/* ===== One Block Mod — style ===== */
:root{
  --sky:#40C9FD;
  --sky-deep:#1FA6DD;
  --sky-pale:#BFEDFF;
  --grass:#96D025;
  --grass-dark:#6FA313;
  --dirt:#43250B;
  --dirt-mid:#6B3E17;
  --cloud:#FFFFFF;
  --ink:#43250B;
  --font-display:"Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  --font-body:"Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wrap:1160px;
  --step:clamp(64px, 9vw, 112px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--sky);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);line-height:1.1;margin:0 0 .6em;font-weight:700}
h2{font-size:clamp(2rem, 4.2vw, 3rem);color:#fff;text-shadow:3px 3px 0 var(--dirt), 0 3px 0 var(--dirt)}
h3{font-size:1.3rem;color:var(--dirt)}
p{margin:0 0 1em;max-width:62ch}
.wrap{width:min(var(--wrap), 100% - 2.5rem);margin-inline:auto}
:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px var(--dirt)}

.skip{position:absolute;left:-999px;top:0;background:var(--dirt);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-display);font-weight:700;font-size:1.15rem;
  text-decoration:none;color:#fff;background:var(--dirt);
  padding:.8rem 1.4rem;border:3px solid var(--dirt);
  box-shadow:0 6px 0 #241303, inset 0 -4px 0 rgba(0,0,0,.25), inset 0 4px 0 rgba(255,255,255,.12);
  transition:transform .12s, box-shadow .12s;
}
.btn:hover{transform:translateY(2px);box-shadow:0 4px 0 #241303, inset 0 -4px 0 rgba(0,0,0,.25), inset 0 4px 0 rgba(255,255,255,.12)}
.btn:active{transform:translateY(6px);box-shadow:0 0 0 #241303}
.btn-install{background:var(--grass);color:var(--dirt)}
.btn-install:hover{background:#ACE33D}
.btn-play span{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.btn-play small{font-family:var(--font-body);font-size:.72rem;font-weight:600;opacity:.85}
.btn-play svg{color:var(--grass)}
.btn-sm{font-size:1rem;padding:.45rem 1rem;box-shadow:0 4px 0 #241303}
.link-under{font-weight:800;text-decoration:none;padding-bottom:2px}
.link-under:hover{color:#fff;border-color:#fff}

/* ===== Nav ===== */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(64,201,253,.92);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:4px solid var(--dirt);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.3rem}
.brand img{width:40px;height:40px;border:2px solid var(--dirt);flex-shrink:0}
.menu{display:flex;align-items:center;gap:1.4rem}
.menu a:not(.btn){text-decoration:none;font-weight:800;font-size:.95rem}
.menu a:not(.btn):hover{color:#fff}
.nav-toggle{display:none;background:var(--dirt);border:0;width:46px;height:42px;padding:10px;cursor:pointer}
.nav-toggle span{display:block;height:4px;background:#fff;margin:4px 0}

/* ===== Pixel step edges ===== */
.step-edge{position:absolute;left:0;right:0;height:24px;background-repeat:repeat-x;background-size:96px 24px;pointer-events:none}
.edge-grass{bottom:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 24' shape-rendering='crispEdges'%3E%3Cpath fill='%2396D025' d='M0 24V12h16V0h16v8h16v8h16V4h16v8h16v12z'/%3E%3C/svg%3E")}
.edge-dirt{bottom:-1px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 24' shape-rendering='crispEdges'%3E%3Cpath fill='%2343250B' d='M0 24V8h16v8h16V4h16v12h16V0h16v12h16v12z'/%3E%3C/svg%3E")}
.edge-dirt-top{top:-23px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 24' shape-rendering='crispEdges'%3E%3Cpath fill='%2343250B' d='M0 24V8h16v8h16V4h16v12h16V0h16v12h16v12z'/%3E%3C/svg%3E")}

/* ===== Sections base ===== */
main > section{position:relative;padding:var(--step) 0}
.band-grass{background:var(--grass)}
.band-grass::after{
  content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;z-index:2;
  background:
    linear-gradient(90deg, var(--dirt) 0 25%, var(--dirt-mid) 25% 37.5%, var(--dirt) 37.5% 75%, var(--dirt-mid) 75% 87.5%, var(--dirt) 87.5%) 0 0/64px 12px repeat-x;
}
.band-grass h2{text-shadow:3px 3px 0 var(--dirt), 0 3px 0 var(--dirt)}
.band-sky-deep{background:var(--sky-deep)}
.band-dirt{background:var(--dirt);color:#F6EBDD}
.section-head{margin-bottom:clamp(2rem,4vw,3rem);max-width:640px}
.section-head p{font-size:1.15rem;font-weight:600}
.section-head.center{text-align:center;margin-inline:auto}
.sub{font-weight:600;font-size:1.1rem}

/* ===== Hero ===== */
.hero{overflow:hidden;padding:clamp(3rem,7vw,6rem) 0 clamp(5rem,9vw,8rem) !important}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;position:relative;z-index:1}
.hero h1{
  font-size:clamp(3.2rem, 9vw, 6.6rem);
  color:#fff;letter-spacing:.01em;
  text-shadow:4px 4px 0 var(--dirt), 0 5px 0 var(--dirt), 4px 9px 0 var(--grass-dark);
  margin-bottom:.35em;
}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);font-weight:600;max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin:2rem 0 1.6rem}
.hero-facts{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-weight:800}
.hero-facts li{display:flex;align-items:center;gap:.5rem}
.hero-facts li::before{content:"";width:12px;height:12px;background:var(--grass);box-shadow:inset -3px -3px 0 var(--grass-dark), 0 0 0 2px var(--dirt)}
.hero-art img{width:100%;max-width:440px;margin-inline:auto;border:5px solid var(--dirt);box-shadow:12px 12px 0 var(--dirt);animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-14px)}}

.clouds i{position:absolute;display:block;background:#fff;opacity:.85;animation:drift linear infinite}
.clouds i::before{content:"";position:absolute;background:#fff;width:50%;height:100%;left:20%;top:-60%}
.clouds i:nth-child(1){width:140px;height:28px;top:12%;left:-10%;animation-duration:70s}
.clouds i:nth-child(2){width:90px;height:20px;top:30%;left:20%;animation-duration:90s;animation-delay:-30s}
.clouds i:nth-child(3){width:180px;height:32px;top:62%;left:50%;animation-duration:110s;animation-delay:-60s}
.clouds i:nth-child(4){width:110px;height:22px;top:80%;left:5%;animation-duration:85s;animation-delay:-10s}
.clouds i:nth-child(5){width:130px;height:24px;top:8%;left:70%;animation-duration:95s;animation-delay:-45s}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}

/* ===== About ===== */
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split-rev{grid-template-columns:1.2fr .8fr;align-items:start}
.split-media img{width:100%;max-width:340px;margin-inline:auto;image-rendering:pixelated;filter:drop-shadow(10px 10px 0 rgba(67,37,11,.55))}
.about .split-text p{font-weight:600}

/* ===== Features ===== */
.feature-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0 3rem}
.feature{display:flex;gap:1rem;padding:1.6rem 0;border-top:3px solid var(--dirt)}
.feature h3{margin-bottom:.35rem}
.feature p{margin:0}
.pix{flex:none;width:36px;height:36px;margin-top:2px;box-shadow:0 0 0 3px var(--dirt)}
.pix-green{background:var(--grass);box-shadow:inset -6px -6px 0 var(--grass-dark), inset 6px 6px 0 #B7E45A, 0 0 0 3px var(--dirt)}
.pix-brown{background:var(--dirt-mid);box-shadow:inset -6px -6px 0 var(--dirt), inset 6px 6px 0 #8B5A2B, 0 0 0 3px var(--dirt)}
.pix-blue{background:#fff;box-shadow:inset -6px -6px 0 var(--sky-pale), inset 6px 6px 0 #fff, 0 0 0 3px var(--dirt)}

/* ===== How it works — staircase ===== */
.phases{list-style:none;padding:0;margin:0;counter-reset:ph;display:grid;grid-template-columns:repeat(8,1fr);gap:.75rem;align-items:start;padding-bottom:10.5rem}
.phases li{counter-increment:ph;position:relative;padding-top:4.2rem}
.phases li:nth-child(1){transform:translateY(10.5rem)}
.phases li:nth-child(2){transform:translateY(9.0rem)}
.phases li:nth-child(3){transform:translateY(7.5rem)}
.phases li:nth-child(4){transform:translateY(6.0rem)}
.phases li:nth-child(5){transform:translateY(4.5rem)}
.phases li:nth-child(6){transform:translateY(3.0rem)}
.phases li:nth-child(7){transform:translateY(1.5rem)}
.phases li::before{
  content:counter(ph);position:absolute;top:0;left:0;width:56px;height:56px;
  display:grid;place-items:center;font-family:var(--font-display);font-size:1.5rem;color:var(--dirt);
  background:var(--c);box-shadow:inset -6px -6px 0 rgba(0,0,0,.2), inset 6px 6px 0 rgba(255,255,255,.3), 0 0 0 3px var(--dirt);
}
.phases li:nth-child(7)::before{color:#fff}
.phases h3{color:#fff;text-shadow:2px 2px 0 var(--dirt);font-size:1.15rem;margin-bottom:.3rem}
.phases p{font-size:.95rem;font-weight:600;color:#08304A;margin:0}

/* ===== Installation ===== */
.steps{list-style:none;padding:0;margin:2rem 0 2.4rem;counter-reset:st}
.steps li{counter-increment:st;display:grid;grid-template-columns:52px 1fr;column-gap:1.2rem;padding-bottom:1.4rem;position:relative}
.steps li::before{
  content:counter(st);grid-row:span 2;width:52px;height:52px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.5rem;color:#fff;background:var(--dirt);
  box-shadow:inset -5px -5px 0 #241303;
}
.steps li:not(:last-child)::after{content:"";position:absolute;left:24px;top:56px;bottom:4px;width:4px;background:repeating-linear-gradient(var(--dirt) 0 8px, transparent 8px 14px)}
.steps h3{margin:.4rem 0 .2rem}
.steps p{margin:0}
.install-note{border-left:8px solid var(--grass);padding:.4rem 0 .4rem 1.6rem;margin-top:5.5rem}
.install-note h3{font-size:1.2rem}
.install-note p{font-weight:600}

/* ===== Use cases ===== */
.use-rows{border-top:3px solid var(--dirt)}
.use-row{display:grid;grid-template-columns:minmax(220px, 1fr) 1.6fr;gap:2rem;padding:1.5rem 0;border-bottom:3px solid var(--dirt)}
.use-row h3{margin:0}
.use-row p{margin:0;font-weight:600}

/* ===== Comparison ===== */
.table-scroll{overflow-x:auto;border:4px solid var(--dirt);box-shadow:10px 10px 0 var(--dirt)}
table{width:100%;min-width:640px;border-collapse:collapse;background:rgba(255,255,255,.88);font-size:1rem}
th,td{padding:1rem 1.2rem;text-align:left;border-bottom:2px solid rgba(67,37,11,.2)}
thead th{font-family:var(--font-display);font-size:1.15rem;background:var(--dirt);color:#fff;border-bottom:0}
thead th.hl{background:var(--grass);color:var(--dirt)}
tbody th{font-weight:800}
td.hl{background:rgba(150,208,37,.28);font-weight:800}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* ===== Safety ===== */
.safety h2{color:var(--grass);text-shadow:3px 3px 0 #1F1004}
.safety p{font-size:1.15rem}
.checks{list-style:none;margin:0;padding:0}
.checks li{display:flex;gap:1rem;padding:.9rem 0;border-bottom:2px dashed rgba(246,235,221,.25);font-weight:600}
.checks li:last-child{border-bottom:0}
.checks li::before{
  content:"";flex:none;width:22px;height:22px;margin-top:3px;background:var(--grass);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M6 1h2v2H7v1H6v1H5v1H4v1H3V6H2V5H1V4H0V3h2v1h1v1h1V4h1V3h1z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M6 1h2v2H7v1H6v1H5v1H4v1H3V6H2V5H1V4H0V3h2v1h1v1h1V4h1V3h1z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===== Testimonials ===== */
.quotes{display:grid;max-width:820px;margin:0 auto;text-align:center}
.quote{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .4s}
.quote.is-active{opacity:1;visibility:visible}
.quote blockquote{
  margin:0 0 1.2rem;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.3;color:#fff;text-shadow:2px 2px 0 var(--dirt);
}
.quote blockquote::before{content:"\201C";display:block;font-size:4rem;line-height:.6;color:var(--grass);text-shadow:3px 3px 0 var(--dirt);margin-bottom:.6rem}
.quote figcaption{font-weight:800;font-size:1.05rem}
.quote-dots{display:flex;justify-content:center;gap:.8rem;margin-top:2rem}
.quote-dots button{width:18px;height:18px;border:3px solid var(--dirt);background:transparent;padding:0;cursor:pointer}
.quote-dots button[aria-selected="true"]{background:var(--dirt)}

/* ===== FAQ ===== */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:start}
.accordion{border-top:3px solid var(--dirt)}
.accordion details{border-bottom:3px solid var(--dirt)}
.accordion summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:1.1rem 0;font-family:var(--font-display);font-size:1.2rem;font-weight:700;
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{
  content:"+";flex:none;width:32px;height:32px;display:grid;place-items:center;
  background:var(--dirt);color:#fff;font-size:1.4rem;transition:transform .2s;
}
.accordion details[open] summary::after{content:"\2212"}
.accordion details p{font-weight:600;margin:0 0 1.2rem;padding-right:3rem}

/* ===== CTA ===== */
.cta{text-align:center;padding-bottom:calc(var(--step) + 24px) !important}
.cta-inner{display:flex;flex-direction:column;align-items:center}
.cta h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.cta p{font-size:1.2rem;font-weight:700;margin-bottom:2rem}

/* ===== Footer ===== */
.footer{background:var(--dirt);color:#E9D9C4;padding:3rem 0 2rem}
.brand-light{color:#fff}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(190px,.7fr);gap:clamp(2rem,7vw,7rem);padding-bottom:2rem;border-bottom:2px dashed rgba(233,217,196,.25)}
.foot-grid p{margin:.8rem 0 0}
.footer nav{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.footer nav a{display:inline-flex;align-items:center;min-height:44px}
.footer-description{max-width:62ch;overflow-wrap:anywhere}
.footer nav a{text-decoration:none;font-weight:700}
.footer nav a:hover{color:var(--grass)}
.foot-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 2rem;padding-top:1.4rem;font-size:.9rem}
.foot-legal p{margin:0}

/* ===== Blog ===== */
.blog-home{background:var(--sky-pale)}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem}
.blog-card{background:#fff;border:3px solid var(--dirt);box-shadow:6px 6px 0 var(--dirt);overflow:hidden;display:flex;flex-direction:column}
.blog-image-link{display:block;overflow:hidden}
.blog-card img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .2s}
.blog-card:hover img{transform:scale(1.035)}
.blog-card-copy{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.blog-category{display:inline-block;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;margin-bottom:.7rem}
.blog-card h3{font-size:1.55rem;line-height:1.2}
.blog-card h3 a{text-decoration:none}
.blog-card h3 a:hover{color:var(--grass-dark)}
.blog-card p{font-size:.98rem}
.blog-card-label{margin-top:auto;font-size:.8rem;font-weight:800;color:#536122}
.blog-all{text-align:center;margin-top:2.5rem}
.blog-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.9rem}
.blog-nav nav{display:flex;gap:1.5rem;font-weight:800}
.blog-nav nav a{text-decoration:none}
.blog-listing,.blog-article{padding-block:2rem 4rem}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:.7rem;font-size:.9rem;margin-bottom:2rem}
.blog-listing-heading{padding-block:1.5rem 2.5rem}
.blog-listing h1,.article-heading h1{font-size:clamp(2.2rem,5vw,4rem);max-width:24ch}
.blog-listing-heading p{font-size:1.2rem}
.article-heading{max-width:850px}
.article-meta{font-size:.95rem}
.article-feature{width:100%;max-height:640px;object-fit:cover;border:3px solid var(--dirt);margin:1.5rem 0 2.5rem}
.article-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(220px,1fr);gap:3rem;align-items:start}
.article-copy{background:#fffdf5;padding:clamp(1.3rem,4vw,3rem);border:3px solid var(--dirt)}
.article-intro{font-size:1.15rem;font-weight:700}
.article-copy section{padding:1.2rem 0 0}
.article-copy h2{color:var(--dirt);text-shadow:none;font-size:1.8rem;line-height:1.2}
.article-copy p{max-width:none}
.article-toc{padding:1.4rem;border:3px solid var(--dirt);background:var(--sky-pale);position:sticky;top:100px}
.article-toc ol{padding-left:1.2rem}
.article-toc li{margin-bottom:.8rem}
.article-note{padding:1.2rem;background:#eef5d8;margin:2rem 0;font-size:.9rem}
.article-note p{margin-top:.7rem}
.related-posts{padding-bottom:4rem}
.blog-grid-related{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:980px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-layout{grid-template-columns:1fr}.article-toc{position:static;grid-row:1}}
@media(max-width:560px){.blog-grid{grid-template-columns:1fr}.blog-nav{flex-wrap:wrap}.blog-nav nav{gap:1.2rem}.blog-article{padding-top:1.5rem}}

.legal-links{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;padding-top:1.5rem;margin-top:1.5rem;border-top:2px dashed rgba(233,217,196,.25);font-size:.9rem}
.legal-links a{font-weight:700;text-underline-offset:3px}
.legal-page{padding-block:2rem 4rem;max-width:920px}
.legal-page h1{font-size:clamp(2rem,4vw,3rem)}
.legal-page h2{margin-top:1.4rem}

/* ===== Responsive ===== */
main,.wrap,.hero-grid>*,.split>*,.feature,.feature>*,.faq-wrap>*,.article-layout>*,.blog-card-copy,.foot-grid>*{min-width:0}
.article-copy,.article-heading,.breadcrumbs,.legal-page{overflow-wrap:anywhere}
.btn{justify-content:center;text-align:center;max-width:100%;min-height:44px}
.table-scroll{max-width:100%;overscroll-behavior-x:contain}
@media (max-width: 1100px){
  .nav-toggle{display:block;flex-shrink:0}
  .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--sky);border-bottom:4px solid var(--dirt);padding:.5rem 1.25rem 1.25rem;display:none;max-height:calc(100dvh - 68px);overflow-y:auto}
  .menu.open{display:flex}
  .menu a:not(.btn){padding:.65rem 0;min-height:44px}
  .menu .btn{margin-top:1rem}
}
@media (max-width: 980px){
  .feature-list{grid-template-columns:repeat(2,1fr)}
  .phases{grid-template-columns:repeat(4,1fr);row-gap:2rem}
  .phases{padding-bottom:0}
  .phases li{transform:none !important}
  .faq-wrap{grid-template-columns:1fr;gap:0}
}
@media (max-width: 860px){
  .nav-toggle{display:block}
  .menu{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--sky);border-bottom:4px solid var(--dirt);padding:.5rem 1.25rem 1.25rem;display:none;
  }
  .menu.open{display:flex}
  .menu a:not(.btn){padding:.8rem 0;border-bottom:2px solid rgba(67,37,11,.2)}
  .menu .btn{margin-top:1rem;justify-content:center}
  .hero-grid,.split,.split-rev{grid-template-columns:1fr}
  .hero-art{order:-1}
  .hero-art img{max-width:300px}
  .install-note{margin-top:0}
  .use-row{grid-template-columns:1fr;gap:.4rem}
}
@media (max-width: 560px){
  .wrap{width:calc(100% - 2rem)}
  .foot-grid{grid-template-columns:1fr;gap:1.5rem}
  .foot-legal{flex-direction:column;align-items:flex-start;gap:.8rem}
  .footer{padding-top:2rem}
  .hero-art img{max-width:min(280px,calc(100% - 12px))}
  .hero-grid{gap:2rem}
  .hero h1{font-size:clamp(2.6rem,13vw,4rem)}
  .hero-actions{align-items:stretch;flex-direction:column}
  .hero-actions .btn{width:100%}
  .article-copy{padding:1.1rem}
  .article-copy h2{font-size:1.5rem}
  .steps li{grid-template-columns:44px minmax(0,1fr);column-gap:.8rem}
  .steps li::before{width:44px;height:44px}
  .steps li:not(:last-child)::after{left:20px;top:48px}
  .accordion details p{padding-right:0}
  .feature-list{grid-template-columns:1fr}
  .phases{grid-template-columns:repeat(2,1fr)}
  .hero-actions{gap:1rem}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}