/* ============================================================
   DESIGN SYSTEM — sourced verbatim from DESIGN.md
   (Stripi-design-analysis). Shared by every page on this site —
   reuse these tokens/components instead of introducing new values.
   ============================================================ */
:root{
  /* colors */
  --primary:#533afd;
  --primary-deep:#4434d4;
  --primary-press:#2e2b8c;
  --primary-soft:#665efd;
  --primary-subdued:#b9b9f9;
  --brand-dark-900:#1c1e54;
  --ink:#0d253d;
  --ink-secondary:#273951;
  --ink-mute:#64748d;
  --ink-mute-2:#61718a;
  --on-primary:#ffffff;
  --canvas:#ffffff;
  --canvas-soft:#f6f9fc;
  --canvas-cream:#f5e9d4;
  --hairline:#e3e8ee;
  --hairline-input:#a8c3de;
  --ruby:#ea2261;
  --magenta:#f96bee;
  --lemon:#9b6829;
  --shadow-blue:#003770;

  /* radius */
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-pill:9999px;

  /* spacing */
  --space-xxs:2px;
  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:24px;
  --space-xxl:32px;
  --space-huge:64px;
  /* macro section rhythm — DESIGN.md: "Section padding 64–96px on marketing surfaces" */
  --space-section: clamp(4rem, 3rem + 4vw, 6rem);

  /* elevation — Level 1 & 2 are DESIGN.md's literal tokens; Level 3 extends
     the same shadow-blue tint for a richer hover lift on premium surfaces */
  --shadow-1: 0 1px 3px rgba(0,55,112,.08);
  --shadow-2: 0 8px 24px rgba(0,55,112,.08), 0 2px 6px rgba(0,55,112,.04);
  --shadow-3: 0 28px 56px -16px rgba(13,37,61,.24), 0 10px 24px rgba(0,55,112,.10), 0 2px 6px rgba(0,55,112,.05);

  /* layout */
  --nav-h:64px;
  --container:1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
/* the `hidden` attribute must always win, even over components that set
   their own `display` (flex/grid) — without this, `el.hidden = true` on a
   flex/grid element silently does nothing */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
  font-weight:300;
  font-feature-settings:"ss01";
  color:var(--ink);
  background:var(--canvas-soft);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{ color:inherit; }
h1,h2,h3,p{ margin:0; }

/* ---------- signature gradient mesh (upper third of every marketing page) ---------- */
.mesh{
  position:absolute;
  top:0; left:0; right:0;
  height:min(50vh, 520px);
  z-index:0;
  pointer-events:none;
  background-color:var(--canvas);
  background-image:
    radial-gradient(circle at 12% 22%, rgba(245,233,212,.98), transparent 42%),
    radial-gradient(circle at 30% 8%,  rgba(155,104,41,.34), transparent 38%),
    radial-gradient(circle at 52% 20%, rgba(249,107,238,.40), transparent 46%),
    radial-gradient(circle at 74% 10%, rgba(102,94,253,.62), transparent 50%),
    radial-gradient(circle at 90% 28%, rgba(234,34,97,.36), transparent 44%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
}

/* ---------- nav-bar-on-mesh ---------- */
.nav{
  position:relative;
  z-index:2;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.4);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-lg);
  min-height:var(--nav-h);
  padding:var(--space-md) clamp(1.5rem, 5vw, 3.5rem);
}
.nav-logo{ display:flex; align-items:center; transition:opacity .16s ease; }
.nav-logo:hover{ opacity:.75; }
.nav-logo img{ display:block; height:24px; width:auto; }
.nav-logo:focus-visible{ outline:3px solid var(--primary-soft); outline-offset:3px; border-radius:4px; }

.nav-links{
  display:flex;
  align-items:center;
  gap:var(--space-xl);
}
.nav-link{
  font-size:15px;
  font-weight:400;
  color:var(--ink-secondary);
  text-decoration:none;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.nav-link:hover{ color:var(--primary); border-bottom-color:var(--primary-subdued); }
.nav-link.active{ color:var(--ink); font-weight:500; border-bottom-color:var(--primary); }
.nav-link:focus-visible{ outline:3px solid var(--primary-soft); outline-offset:3px; border-radius:2px; }

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  cursor:pointer;
  padding:10px;
  margin:-10px;
  color:var(--ink);
  border-radius:var(--radius-md);
  transition:background-color .16s ease, color .16s ease;
}
.nav-toggle svg{ width:24px; height:24px; display:block; }
.nav-toggle:hover{ background:rgba(83,58,253,.08); color:var(--primary); }
.nav-toggle:focus-visible{ outline:3px solid var(--primary-soft); outline-offset:2px; }

@media (max-width:767px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-md);
    background:var(--canvas);
    border-bottom:1px solid var(--hairline);
    padding:var(--space-md) clamp(1.5rem, 5vw, 3.5rem) var(--space-lg);
    box-shadow:var(--shadow-2);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-link{ font-size:16px; padding:8px 2px; }
}

/* ---------- shared buttons ---------- */
.btn{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 20px;
  font-family:inherit;
  font-size:16px;
  font-weight:400;
  line-height:1.0;
  font-feature-settings:"ss01";
  border-radius:var(--radius-pill);
  text-decoration:none;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.98); }
.btn:focus-visible{
  outline:3px solid var(--primary-soft);
  outline-offset:2px;
}

/* button-primary-pill — the ONE prominent action per view; carries a soft
   indigo glow at rest so it reads as the obvious next step */
.btn-primary{
  background:var(--primary);
  color:var(--on-primary);
  border-color:var(--primary);
  box-shadow:0 4px 14px -4px rgba(83,58,253,.4), 0 2px 4px rgba(13,37,61,.06);
}
.btn-primary:hover:not(:active){
  background:var(--primary-deep);
  border-color:var(--primary-deep);
  transform:translateY(-2px);
  box-shadow:0 12px 28px -8px rgba(83,58,253,.55), 0 4px 10px -2px rgba(43,32,140,.3);
}
.btn-primary:active{ background:var(--primary-press); border-color:var(--primary-press); }

/* button-secondary — deliberately quiet/neutral so it never competes with
   the primary CTA; no indigo here, per DESIGN.md's "one filled CTA per band" */
.btn-secondary{
  background:var(--canvas);
  color:var(--ink-secondary);
  border-color:var(--hairline-input);
}
.btn-secondary:hover:not(:active){
  background:var(--canvas-soft);
  border-color:var(--ink-mute-2);
  color:var(--ink);
  transform:translateY(-2px);
  box-shadow:var(--shadow-1);
}
.btn-secondary:active{ background:var(--hairline); }

/* link-on-light */
.email-link{
  display:inline-block;
  font-size:15px;
  font-weight:300;
  color:var(--primary);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color .16s ease, border-color .16s ease;
}
.email-link:hover{ color:var(--primary-deep); border-color:var(--primary-deep); }
.email-link:focus-visible{ outline:3px solid var(--primary-soft); outline-offset:3px; border-radius:2px; }

.cta-row{
  display:flex;
  gap:var(--space-xl);
  flex-wrap:wrap;
  margin-bottom:var(--space-lg);
}
.cta-row.center{ justify-content:center; }
.cta-row.spaced{ margin-top:var(--space-xxl); }

/* ---------- card-feature-light ---------- */
.card{
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--radius-xl);
  padding:var(--space-xxl);
  display:flex;
  align-items:flex-start;
  gap:var(--space-lg);
  box-shadow:var(--shadow-1);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-3);
  border-color:var(--primary-subdued);
}

.card-icon{
  flex-shrink:0;
  width:44px;
  height:44px;
  border-radius:var(--radius-md);
  background:rgba(83,58,253,.10);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s cubic-bezier(.16,1,.3,1), background-color .25s ease;
}
.card-icon svg{ width:22px; height:22px; }
.card:hover .card-icon{ transform:scale(1.08) rotate(-4deg); background:rgba(83,58,253,.16); }

.card h3{
  font-size:26px;
  font-weight:300;
  line-height:1.2;
  letter-spacing:-0.01em;
  font-feature-settings:"ss01";
  color:var(--ink);
  margin-bottom:10px;
}
.card p{
  font-size:15px;
  font-weight:300;
  line-height:1.6;
  color:var(--ink-mute);
}

/* pill-tag-soft */
.badge{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  background:var(--primary-subdued);
  color:var(--primary-deep);
  font-size:10px;
  font-weight:400;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-1);
  white-space:nowrap;
  z-index:2;
}

/* signature color-rhythm accent — a small multi-stop bar echoing the mesh's
   cream/magenta/indigo/ruby stops; purely decorative, no new content */
.accent-bar{
  display:block;
  width:44px;
  height:4px;
  border-radius:var(--radius-pill);
  margin:0 auto var(--space-lg);
  background:linear-gradient(90deg, var(--lemon), var(--magenta) 38%, var(--primary) 70%, var(--ruby));
  opacity:.9;
}
.left-content .accent-bar{ margin:0 0 var(--space-lg); }

/* ============================================================
   HOME (split hero) layout — index.html
   ============================================================ */
.page{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:calc(100dvh - var(--nav-h));
  background-image:
    linear-gradient(100deg, rgba(13,20,54,.92) 0%, rgba(28,30,84,.82) 32%, rgba(83,58,253,.55) 62%, rgba(83,58,253,.22) 100%),
    url("hero-office.jpg");
  background-size:cover;
  background-position:center 35%;
  background-repeat:no-repeat;
}

.panel-left{
  display:flex;
  align-items:center;
  min-width:0;
  padding:var(--space-xl) clamp(1.75rem, 6vw, 6rem) var(--space-xxl);
}

.brand{
  align-self:start;
  padding-top:var(--space-sm);
}
.brand img{
  display:block;
  height:30px;
  width:auto;
}

.left-content{
  align-self:center;
  max-width:36rem;
  padding:var(--space-section) 0;
}

.headline{
  font-size:clamp(2.5rem, 1.6rem + 2.2vw, 3.75rem);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-0.03em;
  font-feature-settings:"ss01";
  color:#ffffff;
  margin-bottom:var(--space-xxl);
}

.subhead{
  font-size:17px;
  font-weight:300;
  line-height:1.65;
  color:rgba(255,255,255,.82);
  max-width:32ch;
  margin-bottom:var(--space-xxl);
}

.panel-right{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:clamp(2rem, 5vw, 5rem);
}

.cards-wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:34rem;
  display:flex;
  flex-direction:column;
  gap:var(--space-xxl);
}

.panel-left .email-link{ color:#ffffff; border-bottom-color:rgba(255,255,255,.4); }
.panel-left .email-link:hover{ color:var(--primary-subdued); border-color:var(--primary-subdued); }

.panel-right .badge{
  background:var(--primary);
  color:#ffffff;
  box-shadow:0 4px 14px rgba(13,20,54,.4);
}

.badge-a{ align-self:flex-end; margin:-.6rem 1.4rem -.6rem 0; transform:rotate(-2deg); }
.badge-b{ align-self:flex-start; margin:-.6rem 0 -.6rem 1.2rem; transform:rotate(1.7deg); }
.badge-c{ align-self:flex-end; margin:-.6rem 2.6rem -.2rem 0; transform:rotate(-1.4deg); }

/* ============================================================
   STANDARD (Products / Contact) page layout
   ============================================================ */
.page-standard{
  position:relative;
  z-index:1;
  max-width:var(--container);
  margin:0 auto;
  padding:var(--space-section) clamp(1.5rem, 5vw, 3.5rem) var(--space-section);
}

.center-hero-page{
  position:relative;
  z-index:1;
  min-height:calc(100dvh - var(--nav-h));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-xl) clamp(1.5rem, 5vw, 3.5rem);
}

.hero-standard{
  max-width:44rem;
  margin:0 auto var(--space-section);
  text-align:center;
  padding-top:var(--space-xxl);
}
.hero-standard.tight{ margin-bottom:0; padding-top:0; }

.headline-standard{
  font-size:clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-0.025em;
  font-feature-settings:"ss01";
  color:var(--ink);
  margin-bottom:var(--space-xl);
}

.subhead-standard{
  font-size:18px;
  font-weight:300;
  line-height:1.65;
  color:var(--ink-mute);
  max-width:42ch;
  margin:0 auto;
}

.trust-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-sm);
  margin-top:var(--space-xl);
}

.features-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--space-xxl);
  margin-bottom:var(--space-section);
}
.features-grid .card{ position:relative; flex-direction:column; }
.features-grid .card-icon{ margin-bottom:var(--space-xs); }
.card-num{
  position:absolute;
  top:var(--space-xl);
  right:var(--space-xl);
  font-size:13px;
  font-weight:400;
  color:var(--ink-mute);
  font-feature-settings:"tnum";
  letter-spacing:0.02em;
}
.features-grid .card:nth-child(1){ animation-delay:80ms; }
.features-grid .card:nth-child(2){ animation-delay:160ms; }
.features-grid .card:nth-child(3){ animation-delay:240ms; }
.features-grid .card:nth-child(4){ animation-delay:320ms; }

@media (max-width:767px){
  .features-grid{ grid-template-columns:1fr; }
}

.cta-band{
  text-align:center;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--radius-xl);
  padding:var(--space-section) var(--space-xxl);
  box-shadow:var(--shadow-1);
}
.cta-band h2{
  font-size:28px;
  font-weight:300;
  letter-spacing:-0.01em;
  font-feature-settings:"ss01";
  color:var(--ink);
  margin-bottom:var(--space-lg);
}
.cta-band p{
  color:var(--ink-mute);
  font-size:16px;
  line-height:1.65;
  max-width:56ch;
  margin:0 auto var(--space-xl);
}

/* card-cream-band — warm interlude variant */
.cta-band.cream{
  background:var(--canvas-cream);
  border-color:transparent;
}
.cta-band.cream p{ color:var(--ink-secondary); }

/* ---------- inquiry form (text-input component) ---------- */
.form-card{
  position:relative;
  z-index:1;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--radius-xl);
  padding:var(--space-xxl);
  max-width:40rem;
  margin:0 auto;
  box-shadow:var(--shadow-2);
}

.field{ margin-bottom:var(--space-xl); }
.field:last-of-type{ margin-bottom:0; }

.field > label{
  display:block;
  font-size:14px;
  font-weight:500;
  color:var(--ink-secondary);
  margin-bottom:var(--space-sm);
}

.required{ color:var(--ruby); margin-left:2px; }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select{
  display:block;
  width:100%;
  background:var(--canvas);
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  font-weight:300;
  line-height:1.4;
  padding:12px 14px;
  min-height:44px;
  border-radius:var(--radius-sm);
  border:1px solid var(--hairline-input);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field input::placeholder{ color:var(--ink-mute-2); opacity:.8; }
.field input:hover,
.field select:hover{ border-color:var(--ink-mute-2); }
.field input:focus,
.field select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(83,58,253,.15);
}
.field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  padding-right:40px;
  cursor:pointer;
}
.field select:invalid{ color:var(--ink-mute-2); }

.field input.invalid,
.field select.invalid{
  border-color:var(--ruby);
}
.field input.invalid:focus,
.field select.invalid:focus{
  box-shadow:0 0 0 3px rgba(234,34,97,.15);
}
.field-error{
  display:none;
  font-size:13px;
  color:var(--ruby);
  margin-top:6px;
}
.field-error.show{ display:block; }

.checkbox-group{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
}
.checkbox-option{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  min-height:44px;
  padding:6px 4px;
  margin:0 -4px;
  border-radius:var(--radius-sm);
  font-size:15px;
  font-weight:300;
  color:var(--ink-secondary);
  cursor:pointer;
  transition:background-color .16s ease;
}
.checkbox-option:hover{ background:var(--canvas-soft); }
.checkbox-option input[type="checkbox"]{
  width:18px;
  height:18px;
  flex-shrink:0;
  accent-color:var(--primary);
}
.checkbox-option input[type="checkbox"]:focus-visible{
  outline:3px solid var(--primary-soft);
  outline-offset:2px;
}

.form-card .cta-row{ margin-top:var(--space-xxl); margin-bottom:0; }
.form-card .btn{ width:100%; }

.form-footnote{
  text-align:center;
  font-size:14px;
  color:var(--ink-mute);
  margin-top:var(--space-xl);
}

.form-success{
  text-align:center;
  padding:var(--space-xl) 0;
}
.form-success:focus{ outline:none; }
.success-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(83,58,253,.12);
  color:var(--primary);
  margin-bottom:var(--space-lg);
}
.success-icon svg{ width:28px; height:28px; }
.form-success h2{
  font-size:26px;
  font-weight:300;
  letter-spacing:-0.01em;
  font-feature-settings:"ss01";
  color:var(--ink);
  margin-bottom:var(--space-sm);
}
.form-success p{
  font-size:15px;
  font-weight:300;
  color:var(--ink-mute);
  line-height:1.6;
}

@media (max-width:767px){
  .form-card{ padding:var(--space-xl); }
}

/* footer-light — site-wide footer (padding matches DESIGN.md literally: 64px 24px) */
.site-footer{
  position:relative;
  z-index:1;
  background:var(--canvas);
  border-top:1px solid var(--hairline);
}
.site-footer-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:var(--space-huge) clamp(1.5rem, 5vw, 3.5rem) var(--space-xxl);
  display:flex;
  justify-content:space-between;
  gap:var(--space-huge);
  flex-wrap:wrap;
}

.footer-brand{ max-width:22rem; }
.footer-brand img{ display:block; height:22px; width:auto; margin-bottom:var(--space-md); }
.footer-tagline{ font-size:14px; font-weight:300; line-height:1.6; color:var(--ink-mute); }

.footer-links{ display:flex; gap:var(--space-huge); flex-wrap:wrap; }
.footer-col{ display:flex; flex-direction:column; gap:var(--space-sm); min-width:8rem; }
.footer-col-title{ font-size:13px; font-weight:500; color:var(--ink); margin-bottom:var(--space-xs); }
.footer-col a{
  font-size:14px;
  font-weight:300;
  color:var(--ink-mute);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  width:fit-content;
  transition:color .16s ease, border-color .16s ease;
}
.footer-col a:hover{ color:var(--primary); border-color:var(--primary-subdued); }
.footer-col a:focus-visible{ outline:3px solid var(--primary-soft); outline-offset:3px; border-radius:2px; }

.site-footer-bottom{ border-top:1px solid var(--hairline); }
.site-footer-bottom p{
  max-width:var(--container);
  margin:0 auto;
  padding:var(--space-lg) clamp(1.5rem, 5vw, 3.5rem) var(--space-xl);
  font-size:13px;
  color:var(--ink-mute);
}

@media (max-width:767px){
  .site-footer-inner{ flex-direction:column; gap:var(--space-xxl); }
  .footer-links{ gap:var(--space-xxl); }
}

/* ---------- entrance motion ---------- */
.brand, .headline, .subhead, .cta-row, .email-link, .card, .badge,
.headline-standard, .subhead-standard, .accent-bar{
  animation:fadeUp .6s cubic-bezier(.16,1,.3,1) both;
}
.brand{ animation-delay:0ms; }
.accent-bar{ animation-delay:0ms; }
.headline{ animation-delay:60ms; }
.subhead{ animation-delay:120ms; }
.cta-row{ animation-delay:180ms; }
.email-link{ animation-delay:220ms; }
.card-1{ animation-delay:80ms; }
.badge-a{ animation-delay:140ms; }
.card-2{ animation-delay:200ms; }
.badge-b{ animation-delay:260ms; }
.card-3{ animation-delay:320ms; }
.badge-c{ animation-delay:380ms; }
.headline-standard{ animation-delay:60ms; }
.subhead-standard{ animation-delay:120ms; }

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .btn-primary:hover:not(:active),
  .btn-secondary:hover:not(:active),
  .card:hover,
  .card:hover .card-icon{ transform:none !important; }
}

/* ---------- responsive (breakpoints per DESIGN.md) ---------- */
@media (max-width:1023px){
  .page{ grid-template-columns:minmax(0,1fr); min-height:auto; }
  .panel-left{ padding:var(--space-xl) var(--space-xl) var(--space-lg); }
  .left-content{ padding:var(--space-xl) 0; max-width:none; }
  .panel-right{ padding:var(--space-lg) var(--space-xl) var(--space-xxl); }
  .headline{ margin-bottom:var(--space-lg); }
  .subhead{ max-width:none; margin-bottom:var(--space-xl); }
  .center-hero-page{ min-height:auto; padding:var(--space-xxl) var(--space-xl) var(--space-huge); }
  .page-standard{ padding:var(--space-xxl) clamp(1.5rem, 5vw, 3.5rem) var(--space-huge); }
  .hero-standard{ margin-bottom:var(--space-huge); }
  .features-grid{ margin-bottom:var(--space-huge); }
}

@media (max-width:767px){
  .headline{ font-size:2.25rem; }
  .headline-standard{ font-size:2rem; }
  .cta-row{ flex-direction:column; align-items:stretch; }
  .cta-row.center{ align-items:center; }
  .btn{ width:100%; min-height:44px; padding:13px 24px; }
  .cta-row.center .btn{ width:100%; max-width:22rem; }
  .card{ padding:var(--space-xl); }
  .cards-wrap{ gap:var(--space-xl); }
  .badge{ font-size:9px; padding:4px 7px; }
  .badge-a{ margin:-.5rem .6rem -.5rem 0; }
  .badge-b{ margin:-.5rem 0 -.5rem .6rem; }
  .badge-c{ margin:-.5rem .9rem -.2rem 0; }
  .cta-band{ padding:var(--space-xxl) var(--space-lg); }
}