/* ==========================================================================
   ZADS — theme "Atelier"
   Shared stylesheet for the whole site.
   ========================================================================== */

:root{
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --line:#e5e5e5;
  --paper:#ffffff;
  --paper-alt:#f7f7f5;
  --accent:#2f6b4f;
  --accent-soft:#e7f0ea;
  --danger:#b3432f;
  --danger-soft:#fbeae6;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.serif{font-family:'Fraunces', serif; font-weight:400;}
.wrap{max-width:1080px; margin:0 auto; padding:0 32px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 32px;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border-radius:980px; font-size:14px; font-weight:500;
  transition:opacity .15s ease, border-color .15s ease; border:none; cursor:pointer;
  font-family:inherit;
}
.btn-dark{background:var(--ink); color:#fff;}
.btn-dark:hover{opacity:.82;}
.btn-outline{border:1px solid var(--line); color:var(--ink); background:none;}
.btn-outline:hover{border-color:var(--ink);}
.btn-ghost{font-size:14px; color:var(--ink-soft); background:none;}
.btn-ghost:hover{color:var(--ink);}
.btn-lg{padding:14px 28px; font-size:16px;}
.btn-sm{padding:8px 16px; font-size:13px;}
.btn-block{width:100%;}

/* ---------- site header / nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,0.85);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:64px;}
.logo{font-weight:600; font-size:19px; letter-spacing:-0.01em;}
.navlinks{display:flex; gap:36px; font-size:14px; color:var(--ink-soft);}
.navlinks a{padding:4px 0; border-bottom:2px solid transparent;}
.navlinks a:hover{color:var(--ink);}
.navlinks a.active{color:var(--ink); border-bottom-color:var(--accent);}
.nav-cta{display:flex; align-items:center; gap:20px;}
.nav-toggle{display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink);}

/* ---------- homepage hero ---------- */
.hero{padding:96px 0 64px; text-align:center;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--accent); background:var(--accent-soft);
  padding:6px 14px; border-radius:980px; margin-bottom:28px; font-weight:500;
}
.hero h1{
  font-size:clamp(40px, 6vw, 68px); line-height:1.05; letter-spacing:-0.02em;
  max-width:780px; margin:0 auto 22px;
}
.hero p.lead{
  font-size:20px; color:var(--ink-soft); max-width:560px; margin:0 auto 36px;
  line-height:1.55;
}
.hero-ctas{display:flex; gap:14px; justify-content:center; margin-bottom:64px; flex-wrap:wrap;}

/* ---------- interior page hero ---------- */
.page-hero{padding:64px 0 48px; border-bottom:1px solid var(--line); background:var(--paper-alt);}
.page-hero .crumb{font-size:13px; color:var(--ink-soft); margin-bottom:16px;}
.page-hero .crumb a:hover{color:var(--ink);}
.page-hero .crumb span{margin:0 6px;}
.page-hero h1{font-size:clamp(30px,4.5vw,46px); letter-spacing:-0.02em; max-width:700px;}
.page-hero p.lead{font-size:17px; color:var(--ink-soft); max-width:600px; margin-top:14px;}

/* ---------- browser mockup ---------- */
.browser{
  max-width:920px; margin:0 auto; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 30px 60px -30px rgba(0,0,0,0.25);
}
.browser-bar{
  height:38px; background:var(--paper-alt); display:flex; align-items:center;
  gap:8px; padding:0 16px; border-bottom:1px solid var(--line);
}
.dot{width:10px; height:10px; border-radius:50%; background:#d9d9d9;}
.browser-body{
  background:linear-gradient(180deg, #fafaf8 0%, #f1f1ef 100%);
  padding:48px 40px; text-align:left;
}
.browser-body .tag{font-size:12px; color:var(--accent); font-weight:600; letter-spacing:.04em; text-transform:uppercase;}
.browser-body h3{font-size:26px; margin:10px 0 12px; letter-spacing:-0.01em;}
.browser-body p{color:var(--ink-soft); font-size:15px; max-width:420px;}
.browser-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:36px; align-items:center;}
.browser-shot{border-radius:12px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/11;}
.browser-shot img{width:100%; height:100%; object-fit:cover;}

/* ---------- stats bar ---------- */
.stats{
  display:flex; justify-content:center; gap:64px; padding:56px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-top:72px; flex-wrap:wrap;
}
.stat{text-align:center;}
.stat .num{font-size:34px; font-weight:600; letter-spacing:-0.02em;}
.stat .lbl{font-size:13px; color:var(--ink-soft); margin-top:4px;}

/* ---------- generic sections ---------- */
.section{padding:96px 0;}
.section-tight{padding:56px 0;}
.section-head{text-align:center; max-width:600px; margin:0 auto 64px;}
.section-head .kicker{font-size:13px; color:var(--accent); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:14px; display:block;}
.section-head h2{font-size:clamp(28px,4vw,40px); letter-spacing:-0.02em; margin-bottom:14px;}
.section-head p{color:var(--ink-soft); font-size:17px;}

/* ---------- alternating feature rows ---------- */
.feature-row{
  display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;
  padding:64px 0; border-top:1px solid var(--line);
}
.feature-row:first-child{border-top:none;}
.feature-row:nth-child(even) .feature-visual{order:2;}
.feature-visual{
  background:var(--paper-alt); border-radius:16px; aspect-ratio:4/3;
  overflow:hidden; border:1px solid var(--line);
}
.feature-visual img{width:100%; height:100%; object-fit:cover;}
.feature-text .num{font-size:13px; color:var(--ink-soft); font-weight:500; margin-bottom:14px; display:block;}
.feature-text h3{font-size:28px; letter-spacing:-0.01em; margin-bottom:14px;}
.feature-text p{color:var(--ink-soft); font-size:16px; line-height:1.6;}

/* ---------- feature / benefit grid ---------- */
.grid-features{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.grid-features.cols-2{grid-template-columns:repeat(2, 1fr);}
.grid-card{background:#fff; padding:28px 26px;}
.grid-card .thumb{width:44px; height:44px; border-radius:10px; overflow:hidden; margin-bottom:18px; border:1px solid var(--line);}
.grid-card .thumb img{width:100%; height:100%; object-fit:cover;}
.grid-card .thumb-icon{width:44px; height:44px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.grid-card .thumb-icon svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.grid-card h4{font-size:16px; margin-bottom:8px; font-weight:600;}
.grid-card p{font-size:14px; color:var(--ink-soft); line-height:1.55;}
.grid-card a.more{font-size:13px; color:var(--accent); font-weight:500; display:inline-block; margin-top:10px;}

/* ---------- feature wall (dense tile grid with photo + link) ---------- */
.feature-wall{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:18px;}
.feature-tile{display:block; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;}
.feature-tile:hover{border-color:var(--ink); box-shadow:0 14px 30px rgba(0,0,0,.07); transform:translateY(-2px);}
.feature-tile .thumb{aspect-ratio:16/10; background:var(--paper-alt); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:16px;}
.feature-tile .thumb img{max-width:100%; max-height:100%; object-fit:contain;}
.feature-tile .ft-body{padding:16px 18px;}
.feature-tile .ft-tag{font-size:10.5px; font-weight:600; color:var(--accent); background:var(--accent-soft); padding:3px 10px; border-radius:980px; display:inline-block; margin-bottom:10px; text-transform:uppercase; letter-spacing:.03em;}
.feature-tile h4{font-size:14.5px; font-weight:600; margin-bottom:6px; color:var(--ink); line-height:1.3;}
.feature-tile p{font-size:12.5px; color:var(--ink-soft); line-height:1.5;}
@media (max-width:600px){ .feature-wall{grid-template-columns:repeat(2,1fr);} }

.feature-wall-wrap{position:relative; max-height:560px; overflow:hidden; transition:max-height .35s ease;}
.feature-wall-wrap.expanded{max-height:6000px;}
.feature-wall-wrap:not(.expanded)::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:110px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--paper) 80%);
  pointer-events:none;
}
.feature-wall-more{display:flex; justify-content:center; margin-top:28px;}
.feature-wall-more.is-hidden{display:none;}

/* ---------- "new" badge (announcements, pricing, demos) ---------- */
.badge-new{display:inline-flex; align-items:center; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 10px; border-radius:980px; vertical-align:middle; line-height:1.6;}
.plan .badge-new{position:absolute; top:-13px; right:36px;}
.plan{position:relative;}

/* ---------- card grid with image (demos / themes) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.showcase-card{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff;}
.showcase-card .shot{aspect-ratio:4/3; overflow:hidden; background:var(--paper-alt);}
.showcase-card .shot img{width:100%; height:100%; object-fit:cover;}
.showcase-card .body{padding:22px 22px 24px;}
.showcase-card h4{font-size:17px; font-weight:600; margin-bottom:8px;}
.showcase-card p{font-size:14px; color:var(--ink-soft); line-height:1.55; margin-bottom:16px;}

/* ---------- pricing ---------- */
.pricing{background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.plans{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; max-width:1080px; margin:0 auto;}
.plans.cols-2{grid-template-columns:1fr 1fr; max-width:820px;}
.plan{background:#fff; border:1px solid var(--line); border-radius:16px; padding:36px;}
.plan.featured{border:2px solid var(--ink); position:relative;}
.plan-badge{position:absolute; top:-13px; left:36px; background:var(--ink); color:#fff; font-size:11px; font-weight:600; padding:4px 12px; border-radius:980px;}
.plan h4{font-size:14px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px;}
.plan .price{font-size:40px; font-weight:600; letter-spacing:-0.02em; margin-bottom:6px;}
.plan .price span{font-size:15px; color:var(--ink-soft); font-weight:400;}
.plan .desc{font-size:14px; color:var(--ink-soft); margin-bottom:24px;}
.plan ul{list-style:none; margin-bottom:28px;}
.plan li{font-size:14px; padding:9px 0; border-top:1px solid var(--line); display:flex; gap:10px;}
.plan li:first-child{border-top:none;}
.plan li:before{content:"✓"; color:var(--accent); font-weight:600;}

/* footnote-style references (e.g. SPA explainer) */
.fn{font-size:11px; color:var(--accent); text-decoration:none; vertical-align:super; margin-left:1px; font-weight:600;}
.fn:hover{text-decoration:underline;}
.pricing-notes{max-width:1080px; margin:36px auto 0; padding-top:24px; border-top:1px solid var(--line);}
.pricing-notes p{font-size:12.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:8px;}
.pricing-notes sup{color:var(--accent); font-weight:700; margin-right:4px;}

/* smaller add-on cards (pricing options) */
.addon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.addon-card{border:1px solid var(--line); border-radius:14px; padding:24px; background:#fff;}
.addon-card h4{font-size:15px; font-weight:600; margin-bottom:8px;}
.addon-card .price{font-size:22px; font-weight:600; margin-bottom:10px;}
.addon-card .price span{font-size:13px; color:var(--ink-soft); font-weight:400;}
.addon-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:14px;}

/* ---------- FAQ accordion ---------- */
.faq{max-width:720px; margin:0 auto;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:24px 0; display:flex; justify-content:space-between; align-items:center;
  font-size:17px; font-weight:500; font-family:inherit; color:var(--ink);
}
.faq-q .plus{font-size:20px; color:var(--accent); font-weight:400; transition:transform .2s ease; flex-shrink:0; margin-left:16px;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a p{font-size:15px; color:var(--ink-soft); line-height:1.6; padding-bottom:24px; max-width:640px;}
.faq-group-title{font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); font-weight:600; margin:48px 0 4px;}
.faq-group-title:first-child{margin-top:0;}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--ink); color:#fff; text-align:center; padding:96px 0; border-radius:24px;
  margin:0 auto; max-width:1016px;
}
.cta-band h2{font-size:clamp(28px,4vw,42px); letter-spacing:-0.02em; margin-bottom:16px;}
.cta-band p{color:#a9a9ad; font-size:17px; margin-bottom:36px;}
.cta-band .btn-dark{background:#fff; color:var(--ink);}
.cta-band-wrap{padding:0 32px 96px;}

/* ---------- footer ---------- */
footer.site-footer{padding:56px 0; border-top:1px solid var(--line);}
.foot-grid{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px;}
.foot-col h5{font-size:13px; font-weight:600; margin-bottom:14px;}
.foot-col a{display:block; font-size:14px; color:var(--ink-soft); padding:5px 0;}
.foot-col a:hover{color:var(--ink);}
.foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ---------- cookie bar ---------- */
.cookie-bar{
  position:sticky; bottom:0; z-index:40; background:#fff; border-top:1px solid var(--line);
  padding:16px 32px; display:none; align-items:center; justify-content:space-between; gap:24px;
  box-shadow:0 -10px 30px -20px rgba(0,0,0,0.2); flex-wrap:wrap;
}
.cookie-bar p{font-size:13px; color:var(--ink-soft); max-width:640px;}
.cookie-bar a{color:var(--ink); text-decoration:underline;}
.cookie-actions{display:flex; gap:10px; flex-shrink:0;}

/* ---------- contact page layout ---------- */
.contact-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:56px; align-items:start;}
@media (max-width:760px){
  .contact-grid{grid-template-columns:1fr;}
}

/* ---------- forms ---------- */
.form-section{max-width:640px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.field{margin-bottom:20px;}
.field label{display:block; font-size:13.5px; font-weight:500; margin-bottom:7px;}
.field .req{color:var(--danger);}
.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field input[type="tel"],
.field select,
.field textarea{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 14px;
  font-size:14.5px; font-family:inherit; background:#fff; color:var(--ink);
  transition:border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--ink);}
.field textarea{resize:vertical; min-height:120px;}
.field-note{font-size:12.5px; color:var(--ink-soft); margin-top:6px;}
.checkbox-row{display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink-soft); margin-bottom:20px;}
.checkbox-row input{margin-top:3px;}
.form-panel{background:var(--paper-alt); border:1px solid var(--line); border-radius:16px; padding:32px;}
.form-note-box{background:var(--accent-soft); border-radius:12px; padding:16px 18px; font-size:14px; color:var(--ink); margin-bottom:28px;}

/* ---------- order / invoice table ---------- */
.order-table{width:100%; border-collapse:collapse; font-size:14px; margin-bottom:8px;}
.order-table th, .order-table td{padding:12px 10px; text-align:left; border-bottom:1px solid var(--line);}
.order-table thead th{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); font-weight:600;}
.order-table tfoot th{border-top:2px solid var(--ink); border-bottom:none; font-weight:600;}
.order-panel{border:1px solid var(--line); border-radius:16px; padding:28px; margin-bottom:32px;}
.order-panel h3{font-size:16px; margin-bottom:16px;}

/* ---------- prose (legal / long-form content) ---------- */
.prose{max-width:760px; margin:0 auto; padding:64px 32px 96px;}
.prose h1{font-size:clamp(28px,4vw,38px); letter-spacing:-0.02em; margin-bottom:8px;}
.prose .updated{font-size:13px; color:var(--ink-soft); margin-bottom:40px;}
.prose h2{font-size:21px; margin:40px 0 14px; letter-spacing:-0.01em;}
.prose h3{font-size:17px; margin:28px 0 10px;}
.prose p{font-size:15.5px; color:var(--ink-soft); line-height:1.75; margin-bottom:16px;}
.prose ul, .prose ol{margin:0 0 16px 20px; color:var(--ink-soft); font-size:15.5px; line-height:1.75;}
.prose li{margin-bottom:6px;}
.prose a{color:var(--accent); text-decoration:underline;}
.prose strong{color:var(--ink); font-weight:600;}
.prose table{width:100%; border-collapse:collapse; font-size:14px; margin:20px 0;}
.prose table th, .prose table td{border:1px solid var(--line); padding:10px; text-align:left;}

/* ---------- big announcement banner ---------- */
.big-announce{background:var(--ink); color:#fff;}
.big-announce .wrap{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; padding:14px 24px; text-align:center;}
.big-announce .ba-text{font-size:14.5px; line-height:1.5;}
.big-announce .ba-text strong{font-weight:600;}
.big-announce .ba-text span{color:rgba(255,255,255,.7); margin-left:4px;}
.big-announce .btn{white-space:nowrap; flex-shrink:0;}
.big-announce .btn-dark{background:#fff; color:var(--ink);}
.big-announce .btn-dark:hover{opacity:.85;}
@media (max-width:600px){ .big-announce .wrap{flex-direction:column; padding:16px 20px;} }

/* ---------- carousel (feature showreel) ---------- */
.carousel{background:var(--paper-alt); overflow:hidden;}
.carousel-viewport{overflow:hidden;}
.carousel-track{display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1);}
.carousel-slide{min-width:100%; padding:72px 0;}
.carousel-slide .wrap{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:56px;}
.carousel-slide.no-img .wrap{grid-template-columns:1fr; text-align:center;}
.carousel-slide.no-img .cs-text{max-width:640px; margin:0 auto;}
.cs-text .kicker{font-size:13px; color:var(--accent); background:var(--accent-soft); padding:4px 12px; border-radius:980px; display:inline-block; margin-bottom:14px; font-weight:500;}
.cs-text h3{font-family:"Fraunces", serif; font-size:clamp(22px,2.6vw,30px); letter-spacing:-0.01em; margin-bottom:14px; line-height:1.2;}
.cs-text p{color:var(--ink-soft); font-size:15.5px; line-height:1.75;}
.cs-text a.more{display:inline-block; margin-top:16px; color:var(--accent); font-weight:500; text-decoration:underline; text-underline-offset:3px;}
.more-link{display:inline-block; margin-top:14px; color:var(--accent); font-weight:500; font-size:14.5px; text-decoration:underline; text-underline-offset:3px;}
.cs-img img{width:100%; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.08); background:#fff;}
.carousel-nav{display:flex; align-items:center; justify-content:center; gap:20px; padding-bottom:36px;}
.carousel-arrow{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); font-size:16px; transition:border-color .15s;}
.carousel-arrow:hover{border-color:var(--ink);}
.carousel-dots{display:flex; gap:7px;}
.carousel-dot{width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer; padding:0; border:none; transition:all .2s;}
.carousel-dot.active{background:var(--accent); width:22px; border-radius:980px;}
@media (max-width:760px){
  .carousel-slide{padding:48px 0;}
  .carousel-slide .wrap{grid-template-columns:1fr; gap:24px;}
  .carousel-slide .cs-img{order:-1;}
}

/* ---------- downloads list (rendered by legacy downloads_main.js) ---------- */
.dw-flex{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.dw-column article{border:1px solid var(--line); border-radius:14px; padding:22px; background:#fff;}
.dw-column h2{font-size:16px; font-weight:600; margin-bottom:12px;}
.dw-column .list-inline{list-style:none; display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--ink-soft); margin-bottom:10px;}
.dw-column .list-inline-item{display:inline-flex; align-items:center; gap:4px;}
.dw-column p{font-size:13.5px; color:var(--ink-soft); margin:10px 0 4px;}
.btn-download{display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:980px; background:var(--ink); color:#fff; font-size:13px; font-weight:500; margin-top:6px;}
#downloads-list .alert{background:var(--accent-soft); color:var(--ink); border-radius:12px; padding:16px 18px; font-size:14px;}
@media (max-width:600px){ .dw-flex{grid-template-columns:1fr;} }

/* ---------- page notice (script-classic / script-essential cross-links) ---------- */
.page-notice{background:var(--accent-soft); color:var(--ink); border-radius:12px; padding:16px 20px; font-size:14.5px; line-height:1.6; margin-bottom:40px;}
.page-notice a{color:var(--accent); font-weight:600; text-decoration:underline;}

/* ---------- state pages (thank-you / error) ---------- */
.state-page{min-height:calc(100vh - 400px); display:flex; align-items:center; justify-content:center; padding:96px 32px;}
.state-card{text-align:center; max-width:560px;}
.state-icon{
  width:64px; height:64px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 28px;
}
.state-icon.danger{background:var(--danger-soft); color:var(--danger);}
.state-card .code{font-size:14px; color:var(--ink-soft); font-weight:500; margin-bottom:16px; letter-spacing:.04em; text-transform:uppercase;}
.state-card h1{font-size:clamp(28px,4vw,38px); letter-spacing:-0.02em; margin-bottom:16px;}
.state-card p{font-size:16px; color:var(--ink-soft); line-height:1.6; margin-bottom:32px;}
.state-card .actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .addon-grid{grid-template-columns:repeat(2,1fr);}
  .plans{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .navlinks{position:fixed; top:64px; left:0; right:0; background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:8px 32px 16px; display:none;}
  .navlinks.open{display:flex;}
  .navlinks a{padding:12px 0; border-bottom:1px solid var(--line);}
  .nav-toggle{display:block;}
  .nav-cta .btn-ghost{display:none;}
  .browser-grid{grid-template-columns:1fr;}
  .feature-row{grid-template-columns:1fr;}
  .feature-row:nth-child(even) .feature-visual{order:0;}
  .grid-features, .grid-features.cols-2{grid-template-columns:1fr;}
  .card-grid, .addon-grid{grid-template-columns:1fr;}
  .plans{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .stats{gap:32px;}
  .cta-band-wrap{padding:0 16px 64px;}
}