@font-face {
  font-family: "Manrope Local";
  src: url("assets/Manrope-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f7f7f8;
  --white: #ffffff;
  --ink: #171717;
  --ink-soft: #33363b;
  --muted: #646970;
  --line: #d9dce1;
  --chrome: #161616;
  --chrome-2: #24262b;
  --blue: #1473e6;
  --blue-hover: #0d66d0;
  --focus: #65b7ff;
  --radius-control: 10px;
  --radius-panel: 22px;
  --container: 1240px;
  --ease: cubic-bezier(.16,1,.3,1);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --section-y: clamp(64px,6vw,96px);
  --section-y-tight: clamp(52px,4.5vw,72px);
  --gutter: clamp(16px,3vw,36px);
}

/* Production documents receive only this stylesheet, while the review page
   also has a small in-document reset. Keep the site shell self-sufficient so
   navigation never falls back to browser defaults after static generation. */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  margin: 0;
  background: var(--chrome);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope Local", "Noto Sans", sans-serif;
}
::selection { background: #b9dcff; color: #07172b; }
* { scrollbar-color: var(--blue) #e5e7eb; }
*::-webkit-scrollbar-track { background: #e5e7eb; }
*::-webkit-scrollbar-thumb { background: var(--blue); border-color: #e5e7eb; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.review-bar {
  background: rgba(17,17,18,.97);
  border-color: rgba(255,255,255,.14);
}
.review-select,
.review-btn {
  background: #28292d;
  border-color: rgba(255,255,255,.17);
  color: #fff;
}

.landing {
  --scene: #dbeeff;
  --scene-strong: #b7dbff;
  --hero-image: url("assets/hero-lp01-digital-retouch-v2-1536.webp");
  --accent: var(--blue);
  display: none;
  position: relative;
  overflow: clip;
  background: var(--paper);
  color: var(--ink);
}
.landing.is-active,
.show-all .landing { display: block; }

.lp01 { --scene:#e8f0ff; --scene-strong:#a8c8ff; --hero-image:url("assets/hero-lp01-digital-retouch-v2-1536.webp"); }
.lp02 { --scene:#edf3ff; --scene-strong:#b8d1ff; --hero-image:url("assets/hero-lp02-digital-ai-retouch-v2-1536.webp"); }
.lp03 { --scene:#e9f3ee; --scene-strong:#b9dfcb; --hero-image:url("assets/hero-lp03-digital-generation-v2-1536.webp"); }
.lp04 { --scene:#f3ecf0; --scene-strong:#d9bdd0; --hero-image:url("assets/hero-lp04-digital-architecture-v2-1536.webp"); }
.lp05 { --scene:#eeedff; --scene-strong:#c7c5ef; --hero-image:url("assets/hero-lp05-digital-background-v2-1536.webp"); }
.lp06 { --scene:#e9f4fb; --scene-strong:#b7dced; --hero-image:url("assets/hero-lp06-digital-remove-background-v2-1536.webp"); }
.lp07 { --scene:#f5eee8; --scene-strong:#dfc3ad; --hero-image:url("assets/hero-lp07-digital-object-edit-v2-1536.webp"); }
.lp08 { --scene:#ebefff; --scene-strong:#c4cbef; --hero-image:url("assets/hero-lp08-digital-compositing-v2-1536.webp"); }
.lp09 { --scene:#e8f3ef; --scene-strong:#b7ddcf; --hero-image:url("assets/hero-lp09-digital-animation-v2-1536.webp"); }
.lp10 { --scene:#edf1ff; --scene-strong:#bac9f2; --hero-image:url("assets/hero-lp10-digital-layouts-v2-1536.webp"); }
.lp11 { --scene:#e8f2ff; --scene-strong:#b6d5f5; --hero-image:url("assets/hero-lp11-digital-night-correction-v2-1536.webp"); }

.site-header,
.lp01 .site-header {
  position: relative;
  z-index: 30;
  min-height: 76px !important;
  border-bottom: 1px solid rgba(255,255,255,.13) !important;
  background: var(--chrome) !important;
  color: #fff;
}
.nav,
.lp01 .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(var(--container), calc(100% - 48px));
  min-height: 76px !important;
  margin: auto;
  gap: 28px;
}
.brand,
.lp01 .brand {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  gap: 12px;
  color: #fff;
  min-height: 44px;
  text-decoration: none;
}
.brand > span:last-child { min-inline-size: 0; }
.brand strong,
.brand small { display: block; }
.brand-mark,
.lp01 .brand-mark {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border: 1px solid rgba(49,168,255,.42);
  border-radius: 11px;
  background: #001e36 url("assets/photoshop-mark.png") center/cover no-repeat;
  box-shadow: none;
}
.brand strong,
.lp01 .brand strong {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
}
.brand small,
.lp01 .brand small { color:#9a9ca2; font-size:11px; }
.donor-nav { display:flex; align-items:center; gap:6px; margin-left:auto; }
.donor-nav a {
  padding: 10px 13px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: #d5d7dc;
  font-size: 13px;
  font-weight: 650;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.donor-nav a:hover { border-color:#5b5d63; background:#25262a; color:#fff; }
.header-cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-left: 12px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-control);
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  transition: background-color .18s ease, transform .18s var(--ease);
}
.header-cta:hover { background: var(--blue-hover); transform: translateY(-1px); }
.header-cta:active { transform: translateY(0) scale(.99); }
.lp01-head-actions {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.lp01-head-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--blue);
  color: #fff;
  box-shadow: none;
  font-weight: 800;
}
.lp01-head-actions a:hover { background: var(--blue-hover); }
.lp01-mobile-launch { display: none; }

h1,h2,h3,p { margin-top:0; }
h1,h2 {
  color: var(--ink);
  font-weight: 780;
  text-transform: none;
  text-wrap: balance;
  letter-spacing: -.035em;
  overflow-wrap:anywhere;
}
h1 {
  max-width: 650px;
  margin-bottom: 24px;
  font-size: clamp(52px,5vw,76px);
  line-height: .98;
}
.landing h1 { font-size:clamp(52px,4.4vw,68px); }
.lp01 h1 { color:var(--ink); }
.lp01 h1 em { color:var(--blue-hover); }
h2 {
  margin-bottom: 18px;
  font-size: clamp(40px,4vw,62px);
  line-height: 1;
}
h3 { color:var(--ink); font-size:22px; line-height:1.15; overflow-wrap:anywhere; }
p { color:var(--ink); }

.hero,
.lp01 .hero,
.lp02 .hero,
.lp03 .hero,
.lp04 .hero,
.lp05 .hero,
.lp06 .hero,
.lp07 .hero,
.lp08 .hero,
.lp09 .hero,
.lp10 .hero,
.lp11 .hero {
  position: relative;
  min-height: 700px;
  display: grid;
  overflow: hidden;
  background: var(--scene) !important;
  color: var(--ink);
}
.hero-inner,
.lp01 .hero-inner,
.lp02 .hero-inner,
.lp03 .hero-inner,
.lp04 .hero-inner,
.lp05 .hero-inner,
.lp06 .hero-inner,
.lp07 .hero-inner,
.lp08 .hero-inner,
.lp09 .hero-inner,
.lp10 .hero-inner,
.lp11 .hero-inner {
  width:min(var(--container),calc(100% - 48px));
  min-height:700px;
  margin:auto;
  padding:58px 0 64px;
  display:grid;
  grid-template-columns:minmax(390px,.78fr) minmax(0,1.22fr);
  gap:54px;
  align-items:center;
}
.hero-copy,
.lp01 .hero-copy {
  position:relative;
  z-index:3;
  max-width:600px;
  margin:0;
  padding:0;
  color:var(--ink);
}
.lede,
.lp01 .hero .lede {
  max-width:560px;
  margin-bottom:28px;
  color:var(--ink-soft) !important;
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.5;
}
.helper { max-width:480px; margin:16px 0 0; color:#35465d; font-size:14px; font-weight:650; }
.landing .hero .helper { color:#35465d !important; }
.actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn,
.lp01 .hero .btn {
  min-height:54px;
  padding:0 24px;
  border:1px solid var(--blue);
  border-radius:var(--radius-control);
  background:var(--blue);
  color:#fff;
  box-shadow:none;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .2s var(--ease),background .2s ease,color .2s ease;
}
.btn:hover { background:var(--blue-hover); border-color:var(--blue-hover); transform:translateY(-2px); filter:none; }
.btn:active { transform:translateY(1px) scale(.99); }
.hero-visual,
.hero-stage,
.lp01 .hero-stage {
  position:relative;
  inset:auto;
  width:100%;
  min-height:0;
  aspect-ratio:3 / 2;
  margin:0;
  overflow:hidden;
  border:10px solid #202124;
  border-radius:18px;
  background-color:#202124;
  background-image:var(--hero-image);
  background-position:center;
  background-size:cover;
  box-shadow:0 28px 70px rgba(25,35,55,.22);
  transform:none;
  isolation:isolate;
}
.hero-visual::before,
.hero-stage::before,
.hero-visual::after,
.hero-stage::after { content:none; }
.hero-stage { background-image:var(--hero-image); }
.stage-top { top:40px; z-index:7; }
.stage-tools { top:86px; z-index:7; }
.stage-float { z-index:7; }
.stage-command { z-index:7; }
.visual-proof { display:none; }
.lp01 .stage-top,
.lp01 .stage-top .stage-file,
.lp01 .stage-top .stage-state {
  color:#fff !important;
  font-weight:750;
  text-shadow:0 1px 2px #000;
}
.lp01 .stage-top {
  z-index:20 !important;
  top:40px;
  left:16px;
  right:16px;
  padding:10px 14px;
  border:1px solid #3b4658;
  border-radius:9px;
  background:#101318 !important;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.lp01 .stage-float,
.lp01 .stage-float b { color:#f4f7fb; }
.lp01 .stage-command strong { color:#f5f7fb; }
.lp01 .stage-command small { color:#b8c1cf; }
.lp01 .stage-command span { color:#fff; }
.lp01 .stage-top,
.lp01 .stage-tools,
.lp01 .stage-float { display:none; }
.landing.lp01 .hero-stage .stage-command {
  left:24px;
  right:24px;
  bottom:24px;
}

.lp02 .hero-inner,
.lp05 .hero-inner,
.lp07 .hero-inner,
.lp11 .hero-inner { grid-template-columns:minmax(0,1.18fr) minmax(390px,.82fr); }
.lp02 .hero-inner { grid-template-rows:auto; }
.lp02 .hero-visual,
.lp05 .hero-visual,
.lp07 .hero-visual,
.lp11 .hero-visual { grid-column:1; grid-row:1; }
.lp02 .hero-copy,
.lp05 .hero-copy,
.lp07 .hero-copy,
.lp11 .hero-copy { grid-column:2; grid-row:1; }
.lp03 .hero-inner { grid-template-columns:minmax(390px,.75fr) minmax(0,1.25fr); }
.lp03 .hero-visual,
.lp04 .hero-visual { min-height:0; }
.lp05 .hero-visual { background-image:var(--hero-image); background-position:center; }
.lp06 .hero-visual {
  min-height:0;
  background-color:#eef2f6;
  background-image:var(--hero-image);
  background-size:contain;
  background-repeat:no-repeat;
}
.lp07 .hero-visual { min-height:0; background-image:var(--hero-image); }
.lp08 .hero-visual { background-image:var(--hero-image); }
.lp09 .hero-visual { min-height:0; background-image:var(--hero-image); }
.lp10 .hero-visual { background-image:var(--hero-image); }
.lp11 .hero-visual { background-image:var(--hero-image); }

/* Neutralize the old cinematic overlays: in v5 copy and product proof are
   separate, readable conversion surfaces. */
.lp04 .hero-inner,
.lp09 .hero-inner {
  display:grid;
  grid-template-columns:minmax(390px,.78fr) minmax(0,1.22fr);
  min-height:700px;
}
.lp04 .hero-copy,
.lp09 .hero-copy {
  position:relative;
  inset:auto;
  width:auto;
  padding:0;
}
.lp04 .hero-visual,
.lp09 .hero-visual {
  position:relative;
  inset:auto;
  grid-column:2;
  grid-row:1;
  min-height:520px;
  border-radius:18px;
}
.lp04 .hero-copy,
.lp09 .hero-copy { grid-column:1; grid-row:1; }
.lp04 .hero-visual::before,
.lp09 .hero-visual::before {
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 18%);
}
.lp04 .hero .lede,
.lp09 .hero .lede { color:var(--ink-soft) !important; }
.lp03 .landing h1,
.lp03 h1,
.lp10 h1 { font-size:clamp(54px,4.5vw,68px); }
.lp10 .hero-copy {
  width:100%;
  max-width:none;
  grid-template-columns:minmax(0,1fr) minmax(380px,.82fr);
  gap:18px 64px;
}
.lp10 .hero-copy .lede { max-width:520px; }
.lp11 .hero-copy { display:block; }
.lp11 .hero-copy .lede { max-width:520px; }
.hero .lede { color:#36404d; }

.section {
  padding:var(--section-y) var(--gutter);
  border:0;
  background:var(--paper);
  color:var(--ink);
}
.section-inner { width:min(var(--container),100%); margin:auto; }
.section-head { max-width:820px; margin-bottom:44px; }
.section-head p,
.tool-copy p { max-width:680px; color:var(--ink); font-size:18px; line-height:1.55; }

.tool-shell { padding:clamp(56px,6vw,82px) var(--gutter); background:var(--white); }
.tool-shell .section-inner {
  padding:52px;
  border-radius:var(--radius-panel);
  background:var(--scene);
}
.tool-grid {
  display:grid;
  grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
  gap:52px;
  align-items:center;
}
.tool-copy h2 { max-width:560px; }
.demo,
.demo.dark {
  min-height:360px;
  padding:22px;
  border:0;
  border-radius:16px;
  background:var(--chrome-2);
  color:#fff;
  box-shadow:0 22px 55px rgba(20,25,35,.18);
}
.demo h3,.demo p,.demo strong { color:#fff; }
.demo-bar { padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.14); }
.demo-status { background:#353942; color:#d8eaff; }
.prompt-box {
  min-height:150px;
  border:1px solid #656b75;
  border-radius:12px;
  background:#181a1f;
  color:#fff;
}
.mode-panel { gap:12px; }
.mode-card {
  min-height:250px;
  border:0;
  border-radius:14px;
  background:var(--white);
  color:var(--ink);
}
.metric-line { gap:0; border-top:1px solid rgba(23,23,23,.18); }
.metric { border:0; border-right:1px solid rgba(23,23,23,.18); background:transparent; color:var(--ink); }
.metric:last-child { border-right:0; }

.grid-3,
.grid-4 { gap:0; border-top:1px solid var(--line); }
.feature {
  min-height:280px;
  padding:38px 32px 40px 0;
  border:0;
  border-right:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
.feature + .feature { padding-left:32px; }
.feature:last-child { border-right:0; }
.feature b { margin-bottom:56px; color:var(--blue); }
.feature h3 { max-width:270px; font-size:27px; }
.feature p { max-width:330px; color:var(--ink); }

.case-strip { background:#fff; }
.case-strip .section-inner { padding:0; border:0; border-radius:0; background:transparent; }
.steps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; counter-reset:none; border-top:1px solid var(--line); }
.step {
  display:block;
  min-height:250px;
  padding:34px 32px 34px 0;
  border:0;
  border-right:1px solid var(--line);
  background:transparent;
}
.step + .step { padding-left:32px; }
.step:last-child { border-right:0; }
.step::before { display:none; }
.step h3 { max-width:290px; font-size:28px; }
.step p { color:var(--ink); }

.gallery { gap:18px; }
.visual-card {
  min-height:570px;
  border:0;
  border-radius:18px;
  background-color:#23252a;
  box-shadow:0 24px 58px rgba(18,25,38,.13);
}
.gallery-stack { gap:18px; }
.gallery-stack .visual-card { min-height:276px; }

.before-after { background-image:none; }
.lp05 .before-after {
  --split:52%;
  position:relative;
  overflow:hidden;
  clip-path:none !important;
  background:#788390 !important;
}
.lp05 .before-after::before,
.lp05 .before-after::after {
  position:absolute;
  top:0;
  bottom:0;
  display:flex;
  align-items:flex-end;
  padding:26px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.03em;
}
.lp05 .before-after::before {
  content:"Исходный фон";
  left:0;
  right:0;
  color:#17191d;
  background:linear-gradient(135deg,#bcc6ce 0%,#707c87 100%);
}
.lp05 .before-after::after {
  content:"Новый фон";
  left:var(--split);
  right:0;
  color:#fff;
  background:#1f65ff;
  box-shadow:-3px 0 0 #fff;
}

.case-grid { gap:18px; }
.case {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:330px;
  padding:38px;
  border:0;
  border-radius:16px;
  background:#17191d;
  color:#fff;
  box-shadow:0 24px 54px rgba(18,25,38,.18);
}
.case::before,
.case::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.case::before { display:none; }
.case::after {
  z-index:-1;
  background:#17191d;
}
.case span {
  width:max-content;
  margin-bottom:72px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(9,11,15,.76);
  color:#fff;
  backdrop-filter:blur(10px);
}
.case h3 { max-width:460px; font-size:32px; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.35); }
.case p { max-width:500px; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.5); }

.related { gap:10px; }
.related a {
  min-height:48px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:#fff;
  color:var(--ink);
}
.related a:hover { border-color:var(--blue); color:var(--blue); }

.faq { grid-template-columns:minmax(360px,.95fr) minmax(0,1.05fr); gap:72px; }
details,details:last-child { border-color:var(--line); }
summary { padding:22px 40px 22px 0; color:var(--ink); }
summary::after { color:var(--blue); }
details p { color:var(--ink); }

.final-cta {
  padding:80px 24px;
  background:var(--paper);
  color:#fff;
}
.final-cta .section-inner {
  min-height:470px;
  padding:58px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  gap:46px;
  align-items:center;
  overflow:hidden;
  border-radius:var(--radius-panel);
  background:var(--chrome);
  color:#fff;
}
.final-cta h2 { grid-column:1; max-width:650px; margin:0; color:#fff; }
.final-cta p { grid-column:1; max-width:560px; margin:0; color:#c9cbd0; }
.final-cta .btn { grid-column:1; width:max-content; margin:0; background:var(--blue); color:#fff; }
.final-cta .notice { grid-column:1; }

.notice {
  margin-top:16px;
  border-radius:var(--radius-control);
  background:#fff0c2;
  color:#5f4700;
}
.notice.is-visible { display:block; }

.site-footer {
  padding:58px 24px;
  border-top:1px solid #33353a;
  background:var(--chrome);
  color:#fff;
}
.footer-inner { width:min(var(--container),100%); grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr); gap:54px; }
.footer-links { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 24px; }
.footer-links a { color:#c1c3c8; min-height:44px; display:flex; align-items:center; }
.footer-links a:hover { color:#fff; }
.footer-note { color:#85888f; }

@media (prefers-reduced-transparency: reduce) {
  .site-header { background:var(--chrome) !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .landing.is-active .hero-copy { animation:copy-in .55s var(--ease) both; }
  .landing.is-active .hero-visual,
  .landing.is-active .hero-stage { animation:stage-in .72s var(--ease) .06s both; }
  @keyframes copy-in {
    from { transform:translateY(8px); }
    to { transform:translateY(0); }
  }
  @keyframes stage-in {
    from { transform:translateY(12px) scale(.992); }
    to { transform:translateY(0) scale(1); }
  }
}

@media (max-width:1080px) {
  .donor-nav { display:none; }
  .hero-inner,
  .lp01 .hero-inner,
  .lp02 .hero-inner,
  .lp03 .hero-inner,
  .lp04 .hero-inner,
  .lp05 .hero-inner,
  .lp06 .hero-inner,
  .lp07 .hero-inner,
  .lp08 .hero-inner,
  .lp09 .hero-inner,
  .lp10 .hero-inner,
  .lp11 .hero-inner {
    min-height:auto;
    padding:52px 0 58px;
    grid-template-columns:1fr;
    gap:38px;
  }
  .lp02 .hero-copy,.lp05 .hero-copy,.lp07 .hero-copy,.lp11 .hero-copy { grid-column:1; grid-row:1; }
  .lp02 .hero-visual,.lp05 .hero-visual,.lp07 .hero-visual,.lp11 .hero-visual { grid-column:1; grid-row:2; }
  .hero-visual,.hero-stage,.lp01 .hero-stage { min-height:480px; }
  .lp04 .hero-inner,.lp09 .hero-inner { grid-template-columns:1fr; }
  .lp04 .hero-copy,.lp09 .hero-copy { grid-column:1; grid-row:1; }
  .lp04 .hero-visual,.lp09 .hero-visual { grid-column:1; grid-row:2; }
  .tool-grid { grid-template-columns:1fr; }
  .faq { grid-template-columns:1fr; gap:28px; }
  .landing > .section:has(.faq) .faq > :first-child {
    padding:0 0 var(--space-5);
    border-right:0;
    border-bottom:1px solid var(--surface-line);
  }
  .final-cta .section-inner { grid-template-columns:1fr; }
  .final-cta h2,.final-cta p,.final-cta .btn,.final-cta .notice { grid-column:1; }
}

@media (max-width:760px) {
  .review-bar { padding:8px; }
  .site-header,.lp01 .site-header,.nav,.lp01 .nav { min-height:68px !important; }
  .nav,.lp01 .nav { width:min(100% - 28px,var(--container)); gap:12px; }
  .brand-mark,.lp01 .brand-mark { width:40px; height:40px; flex-basis:40px; }
  .brand strong,.lp01 .brand strong { font-size:13px; }
  .brand small,.lp01 .brand small { display:none; }
  .lp01-head-actions { display:none; }
  .header-cta {
    min-width: 106px;
    margin-left: auto;
    padding: 0 14px;
    font-size: 13px;
  }
  .lp01-mobile-launch {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    min-width:88px;
    height:44px;
    padding:0 14px;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--radius-control);
    background:var(--blue);
    color:#fff;
    font-size:0;
    line-height:1;
    text-decoration:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
    transition:background-color .18s ease,transform .18s var(--ease);
  }
  .lp01-mobile-launch::before {
    content:"Открыть";
    width:auto;
    height:auto;
    border:0;
    font:800 13px/1 "Manrope Local", "Noto Sans", sans-serif;
    letter-spacing:.01em;
  }
  .lp01-mobile-launch::after { content:none; }
  .lp01-mobile-launch:hover { background:var(--blue-hover); }
  .lp01-mobile-launch:active { transform:translateY(1px) scale(.98); }
  .hero,.lp01 .hero,.lp02 .hero,.lp03 .hero,.lp04 .hero,.lp05 .hero,.lp06 .hero,.lp07 .hero,.lp08 .hero,.lp09 .hero,.lp10 .hero,.lp11 .hero { min-height:auto; }
  .hero-inner,.lp01 .hero-inner,.lp02 .hero-inner,.lp03 .hero-inner,.lp04 .hero-inner,.lp05 .hero-inner,.lp06 .hero-inner,.lp07 .hero-inner,.lp08 .hero-inner,.lp09 .hero-inner,.lp10 .hero-inner,.lp11 .hero-inner {
    width:calc(100% - 28px);
    padding:36px 0 44px;
    gap:28px;
  }
  h1,.lp01 h1,.lp03 h1,.lp04 h1,.lp09 h1,.lp10 h1,.lp11 h1 {
    margin-bottom:18px !important;
    font-size:clamp(38px,11vw,48px) !important;
    line-height:1 !important;
    letter-spacing:-.035em !important;
    overflow-wrap:anywhere;
  }
  h2 { font-size:38px; line-height:1.02; }
  .lede,.lp01 .hero .lede,.lp03 .hero .lede,.lp04 .hero .lede,.lp09 .hero .lede,.lp10 .hero .lede,.lp11 .hero .lede {
    margin-bottom:22px !important;
    font-size:17px;
    line-height:1.48;
  }
  .actions { display:grid; grid-template-columns:1fr; gap:10px; }
  .actions .btn { width:100%; }
  .helper { margin-top:14px; }
  .hero-visual,.hero-stage,.lp01 .hero-stage,.lp03 .hero-visual,.lp04 .hero-visual,.lp06 .hero-visual,.lp07 .hero-visual,.lp09 .hero-visual {
    width:100%;
    min-height:0;
    aspect-ratio:3 / 2;
    border-width:6px;
    border-radius:14px;
    background-size:cover;
  }
  .lp06 .hero-visual { background-size:cover; }
  .lp08 .hero-visual { background-image:image-set(url("assets/hero-lp08-digital-compositing-v2-768.webp") 1x, url("assets/hero-lp08-digital-compositing-v2-1536.webp") 2x); background-position:center; }
  .lp08 .hero-visual { aspect-ratio:3 / 2; }
  .stage-top { top:34px; left:10px; right:10px; }
  .stage-tools { top:78px; left:10px; }
  .stage-float { display:none; }
  .stage-command { left:10px; right:10px; bottom:10px; }
  .landing.lp01 .hero-stage .stage-command {
    left:14px;
    right:14px;
    bottom:14px;
  }
  .section { padding:62px 14px; }
  .tool-shell { padding:14px; background:#fff; }
  .tool-shell .section-inner { padding:26px 18px; border-radius:18px; }
  .tool-grid { gap:30px; }
  .demo,.demo.dark { min-height:300px; padding:16px; }
  .grid-3,.grid-4 { grid-template-columns:1fr; }
  .feature,.feature + .feature { min-height:auto; padding:28px 0; border-right:0; border-bottom:1px solid var(--line); }
  .feature:last-child { border-bottom:0; }
  .feature b { margin-bottom:22px; }
  .feature h3 { max-width:none; }
  .steps { grid-template-columns:1fr; }
  .step,.step + .step { min-height:auto; padding:28px 0; border-right:0; border-bottom:1px solid var(--line); }
  .step:last-child { border-bottom:0; }
  .steps { display:block; }
  .step,
  .step + .step {
    display:block;
    grid-template-columns:none;
    gap:0;
  }
  .step h3 { margin:0 0 12px; }
  .step p { grid-column:auto; margin:0; }
  .gallery { grid-template-columns:1fr; }
  .visual-card { min-height:390px; }
  .gallery-stack { grid-template-columns:1fr 1fr; }
  .gallery-stack .visual-card { min-height:190px; }
  .case-grid { grid-template-columns:1fr; }
  .case { min-height:260px; padding:28px; }
  .case span { margin-bottom:44px; }
  .case h3 { font-size:27px; }
  .faq { grid-template-columns:1fr; gap:22px; }
  .related { grid-template-columns:1fr; }
  .final-cta { padding:14px; }
  .final-cta .section-inner { min-height:auto; padding:34px 20px; gap:24px; border-radius:18px; }
  .final-cta .btn { width:100%; }
  .footer-inner { grid-template-columns:1fr; gap:38px; }
  .footer-links { grid-template-columns:1fr 1fr; }
}

@media (max-width:420px) {
  .gallery-stack { grid-template-columns:1fr; }
  .gallery-stack .visual-card { min-height:220px; }
  .footer-links { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; scroll-behavior:auto !important; }
  :is(a, button, summary, input, select, textarea) {
    transition-property:color, background-color, border-color, opacity !important;
    transition-duration:160ms !important;
    transition-timing-function:var(--ease) !important;
  }
}

/* LP-01 flagship refresh: high-resolution, task-specific campaign imagery. */
.lp01 .hero {
  background:#e9f1ff !important;
}
.lp01 .hero::before { display:none; }
.lp01 .hero-inner {
  grid-template-columns:minmax(360px,.75fr) minmax(0,1.25fr);
  gap:clamp(34px,5vw,78px);
}
.lp01 .hero-copy { max-width:590px; }
.lp01 h1 { max-width:590px; color:#10141c; font-size:clamp(58px,5.2vw,84px); }
.lp01 h1 em { margin-top:8px; color:#1769ff; font-size:.64em; line-height:1.04; white-space:normal; }
.lp01 .hero .lede { color:#333e4d !important; font-size:clamp(18px,1.6vw,22px); }
.lp01 .hero .helper { color:#536070 !important; }
.lp01 .hero-stage {
  min-height:0;
  aspect-ratio:3 / 2;
  border:8px solid #10141c;
  border-radius:28px;
  background-image:var(--hero-image) !important;
  background-size:cover !important;
  background-position:center !important;
  box-shadow:0 38px 80px rgba(25,63,130,.23);
}
.lp01 .hero-stage::before,
.lp01 .hero-stage::after { content:none; }
.lp01 .stage-top,
.lp01 .stage-tools,
.lp01 .stage-float,
.lp01 .stage-command { display:none; }

.lp01 .tool-shell { background:#10141c; }
.lp01 .tool-copy h2 { color:#fff; }
.lp01 .tool-copy p { color:#ced9ea; }
.lp01 #lp01-demo .before-after {
  min-height:392px;
  background-image:url("assets/lp01-demo-product-v1-1536.webp") !important;
  background-size:cover !important;
  background-position:center !important;
  clip-path:none !important;
}
.lp01 #lp01-demo .demo { border:1px solid #344055; }

.lp01 #lp01-examples { background:#f8fbff; }
.lp01 #lp01-examples .gallery > .visual-card {
  min-height:590px;
  background-image:url("assets/proof-lp01-digital-sneaker-v2-1536.webp") !important;
  background-size:cover !important;
  background-position:center !important;
}
.lp01 #lp01-examples .gallery-stack .visual-card {
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  min-height:286px;
  padding:28px;
  background-image:none !important;
  box-shadow:none;
}
.lp01 #lp01-examples .gallery-stack .visual-card:first-child { background:#1769ff !important; }
.lp01 #lp01-examples .gallery-stack .visual-card:last-child { background:#121722 !important; }
.lp01 .proof-copy p { position:relative; z-index:1; margin:0; color:rgba(255,255,255,.76); font-size:17px; line-height:1.3; }
.lp01 .proof-copy strong { display:block; margin-top:4px; color:white; font-size:26px; line-height:1.05; }

.lp01 .case:first-child::before,
.lp01 .case:last-child::before {
  background-size:cover;
  background-position:center;
  transform:none;
}
.lp01 .case:first-child::before { background-image:url("assets/lp01-case-espresso-v2-1536.webp"); }
.lp01 .case:last-child::before { background-image:url("assets/lp01-case-publication-v2-1536.webp"); }
.lp01 .case::before { display:block; }
.lp01 .case::after { background:linear-gradient(90deg,rgba(7,11,18,.86) 0%,rgba(7,11,18,.56) 52%,rgba(7,11,18,.1) 100%); }

@media (max-width:1080px) {
  .lp01 .hero-inner { grid-template-columns:1fr; }
  .lp01 .hero-copy { max-width:720px; }
  .lp01 .hero-stage { min-height:0; }
}

@media (max-width:760px) {
  .lp05 .before-after::before,
  .lp05 .before-after::after { padding:18px; font-size:16px; }
  .lp01 .hero { background:#e9f1ff !important; }
  .lp01 .hero-inner { gap:26px; padding:30px 0 40px; }
  .lp01 h1 { font-size:clamp(43px,11.4vw,56px) !important; }
  .lp01 .hero-stage { min-height:0 !important; aspect-ratio:3 / 2; border-width:6px; border-radius:19px; background-position:center !important; }
  .lp01 #lp01-demo .before-after { min-height:280px; background-position:center; }
  .lp01 .tool-shell { padding:32px 14px; background:#10141c; }
  .lp01 .tool-shell .section-inner { padding:0; border-radius:0; background:transparent; }
  .lp01 .tool-copy h2 { color:#fff !important; }
  .lp01 .tool-copy p { color:#ced9ea !important; }
  .lp01 #lp01-examples .gallery > .visual-card { min-height:0; aspect-ratio:3 / 2; }
  .lp01 #lp01-examples .gallery-stack { grid-template-columns:1fr 1fr; }
  .lp01 #lp01-examples .gallery-stack .visual-card { min-height:190px; padding:18px; }
  .lp01 .proof-copy p { font-size:13px; }
  .lp01 .proof-copy strong { font-size:18px; }
  .lp01 .case { min-height:300px; }
  .lp01 .case::before { background-position:center !important; }
  .lp01 .case::after { background:linear-gradient(90deg,rgba(7,11,18,.88) 0%,rgba(7,11,18,.48) 72%,rgba(7,11,18,.15) 100%); }
}

/* v22 media and rhythm audit: every proof is one unique, responsive asset. */
.proof-picture {
  display:block;
  width:100%;
  overflow:hidden;
  border:8px solid #202124;
  border-radius:20px;
  background:#202124;
  box-shadow:0 28px 64px rgba(18,25,38,.16);
}
.proof-picture img {
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  object-position:center;
}
.demo-proof {
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  margin:0 0 var(--space-5);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  object-fit:cover;
  object-position:center;
}
.lp05 .before-after {
  min-height:0;
  aspect-ratio:3/2;
  margin-bottom:var(--space-4);
  background:#202124 !important;
}
.lp05 .before-after img { width:100%; height:100%; object-fit:cover; }
.lp05 .before-after::before,
.lp05 .before-after::after { content:""; z-index:2; padding:0; pointer-events:none; }
.lp05 .before-after::before {
  left:var(--split);
  right:auto;
  width:2px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(20,115,230,.72);
}
.lp05 .before-after::after {
  left:calc(var(--split) - 12px);
  right:auto;
  top:calc(50% - 12px);
  bottom:auto;
  width:24px;
  height:24px;
  border:2px solid #fff;
  border-radius:50%;
  background:#1473e6;
  box-shadow:0 4px 14px rgba(0,0,0,.34);
}
.lp11 #lp11-problems { min-height:0; }
.lp11 #lp11-problems label { display:block; margin-top:var(--space-4); color:#fff; }
.section-head p { margin-bottom:0; }

@media (max-width:760px) {
  .lp01 { --hero-image:image-set(url("assets/hero-lp01-digital-retouch-v2-768.webp") 1x, url("assets/hero-lp01-digital-retouch-v2-1536.webp") 2x); }
  .lp02 { --hero-image:image-set(url("assets/hero-lp02-digital-ai-retouch-v2-768.webp") 1x, url("assets/hero-lp02-digital-ai-retouch-v2-1536.webp") 2x); }
  .lp03 { --hero-image:image-set(url("assets/hero-lp03-digital-generation-v2-768.webp") 1x, url("assets/hero-lp03-digital-generation-v2-1536.webp") 2x); }
  .lp04 { --hero-image:image-set(url("assets/hero-lp04-digital-architecture-v2-768.webp") 1x, url("assets/hero-lp04-digital-architecture-v2-1536.webp") 2x); }
  .lp05 { --hero-image:image-set(url("assets/hero-lp05-digital-background-v2-768.webp") 1x, url("assets/hero-lp05-digital-background-v2-1536.webp") 2x); }
  .lp06 { --hero-image:image-set(url("assets/hero-lp06-digital-remove-background-v2-768.webp") 1x, url("assets/hero-lp06-digital-remove-background-v2-1536.webp") 2x); }
  .lp07 { --hero-image:image-set(url("assets/hero-lp07-digital-object-edit-v2-768.webp") 1x, url("assets/hero-lp07-digital-object-edit-v2-1536.webp") 2x); }
  .lp08 { --hero-image:image-set(url("assets/hero-lp08-digital-compositing-v2-768.webp") 1x, url("assets/hero-lp08-digital-compositing-v2-1536.webp") 2x); }
  .lp09 { --hero-image:image-set(url("assets/hero-lp09-digital-animation-v2-768.webp") 1x, url("assets/hero-lp09-digital-animation-v2-1536.webp") 2x); }
  .lp10 { --hero-image:image-set(url("assets/hero-lp10-digital-layouts-v2-768.webp") 1x, url("assets/hero-lp10-digital-layouts-v2-1536.webp") 2x); }
  .lp11 { --hero-image:image-set(url("assets/hero-lp11-digital-night-correction-v2-768.webp") 1x, url("assets/hero-lp11-digital-night-correction-v2-1536.webp") 2x); }
  .section { padding:clamp(54px,14vw,72px) var(--gutter); }
  .section-head { margin-bottom:var(--space-6); }
  .proof-picture { border-width:5px; border-radius:15px; }
  .proof-picture img,
  .demo-proof { aspect-ratio:3/2; object-fit:contain; background:#202124; }
  .lp02 .proof-picture img { object-position:45% center; }
  .lp03 .proof-picture img { object-position:52% center; }
  .lp04 .proof-picture img { object-position:68% center; }
  .lp05 .proof-picture img { object-position:54% center; }
  .lp06 .proof-picture img { object-position:50% center; }
  .lp07 .proof-picture img { object-position:52% center; }
  .lp08 .proof-picture img { object-position:48% center; }
  .lp09 .proof-picture img { object-position:50% center; }
  .lp10 .proof-picture img { object-position:50% center; }
  .lp11 .proof-picture img { object-position:50% center; }
  .lp01 #lp01-demo .before-after { background-image:url("assets/lp01-demo-product-v1-768.webp") !important; }
  .lp01 #lp01-examples .gallery > .visual-card { background-image:url("assets/proof-lp01-digital-sneaker-v2-768.webp") !important; }
  .lp01 .case:first-child::before { background-image:url("assets/lp01-case-espresso-v2-768.webp"); }
  .lp01 .case:last-child::before { background-image:url("assets/lp01-case-publication-v2-768.webp"); }
  .lp05 .before-after { aspect-ratio:3/2; }
}

/* v24 system audit: content-driven heights and an explicit tablet composition. */
.section:has(.related),
.section:has(.faq) { padding-block:var(--section-y-tight); }

.feature,
.step {
  min-width:0;
  min-height:0;
}
.feature h3 { font-size:clamp(24px,2vw,28px); }
.case {
  min-width:0;
  min-height:clamp(272px,24vw,330px);
}
.case span {
  margin-bottom:var(--space-7);
  padding:0;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
  color:#dce8ff;
  font-size:13px;
  letter-spacing:.07em;
}
.related {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
}
.related a { min-width:0; }
.mode-panel {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.metric-line {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

@media (min-width:1440px) {
  :root {
    --container:1360px;
    --section-y:clamp(80px,5.6vw,108px);
  }
  .hero-inner { gap:clamp(56px,5vw,86px); }
}

@media (min-width:601px) and (max-width:1080px) {
  .grid-3,
  .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-3 .feature:nth-child(odd),
  .grid-4 .feature:nth-child(odd) { padding-left:0; }
  .grid-3 .feature:nth-child(2),
  .grid-4 .feature:nth-child(2n) { border-right:0; }
  .grid-3 .feature:nth-child(n+3),
  .grid-4 .feature:nth-child(n+3) { border-top:1px solid var(--line); }
  .grid-3 .feature:nth-child(3) {
    grid-column:span 2;
    padding-right:0;
  }
  .related,
  .mode-panel { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:600px) {
  .section { padding-block:clamp(48px,13vw,68px); }
  .section:has(.related),
  .section:has(.faq) { padding-block:clamp(44px,12vw,60px); }
  h2 { font-size:clamp(30px,9.5vw,38px); line-height:1.04; }
  .related,
  .mode-panel,
  .metric-line { grid-template-columns:1fr; }
  .case { min-height:272px; }
  .case span { margin-bottom:var(--space-6); }
}

/* v26 conversion audit: one clear action, content-led closure, no decorative pseudo-icons. */
.final-cta .section-inner {
  min-height:0;
  grid-template-columns:1fr;
  gap:18px;
  padding:clamp(32px,5vw,64px);
  text-align:center;
}
.final-cta h2,
.final-cta p,
.final-cta .btn,
.final-cta .notice {
  grid-column:auto;
  justify-self:center;
}
.final-cta .btn { max-width:100%; }

/* v27 semantic rhythm system: every product stage gets a distinct surface and composition. */
.landing {
  --surface-primary:var(--paper);
  --surface-secondary:#eef2f7;
  --surface-muted:var(--scene);
  --surface-accent:var(--scene-strong);
  --surface-dark:#10141c;
  --surface-elevated:var(--white);
  --surface-product-demo:var(--scene);
  --surface-line:rgba(23,23,23,.14);
}
@supports (background:color-mix(in srgb, white 50%, black)) {
  .landing {
    --surface-secondary:color-mix(in srgb, var(--scene) 46%, var(--paper));
    --surface-muted:color-mix(in srgb, var(--scene) 72%, var(--white));
  }
}

/* Final audit: keep lighting only where it supports the LP-01 product scene. */
.hero::before {
  content:none;
}
.lp01 .hero::before {
  content:none;
}
.lp01 .hero .btn {
  box-shadow:none;
}

/* Content-driven breakpoints: labels and footer links never compete for one line. */
/* v30 proof cleanup: show the photograph itself, never a simulated control. */
.lp05 .before-after::before,
.lp05 .before-after::after {
  content:none !important;
  display:none !important;
}

/* The source prototype forced a 340px square hero on small phones. Keep the
   photographic 3:2 proof intact for every route instead of cropping it. */
@media (max-width:760px) {
  .landing .hero-visual {
    min-height:0 !important;
    aspect-ratio:3 / 2 !important;
  }

  /* LP-01 supporting claims are captions for the proof, not oversized CTAs. */
  .lp01 #lp01-examples .gallery-stack {
    gap:14px;
  }
  .lp01 #lp01-examples .gallery-stack .visual-card {
    min-height:0 !important;
    padding:18px 0 0 !important;
    align-items:flex-start;
    border:0;
    border-top:2px solid #1769ff;
    border-radius:0;
    background:transparent !important;
  }
  .lp01 #lp01-examples .gallery-stack .visual-card:last-child {
    border-color:#121722;
  }
  .lp01 #lp01-examples .gallery-stack .visual-card:first-child,
  .lp01 #lp01-examples .gallery-stack .visual-card:last-child {
    background:transparent !important;
  }
  .lp01 #lp01-examples .proof-copy p {
    color:#58677b !important;
    font-size:15px;
    line-height:1.3;
  }
  .lp01 #lp01-examples .proof-copy strong {
    margin-top:6px;
    color:#171717 !important;
    font-size:clamp(21px,5.4vw,26px);
    line-height:1.05;
  }
}
@media (max-width:900px) {
  .footer-links {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Capabilities: a wide, tinted evidence panel rather than a second text document. */
.landing > .tool-shell + .section {
  background:var(--surface-secondary);
}
.landing > .tool-shell + .section .section-head {
  max-width:720px;
}
.landing > .tool-shell + .section .grid-3,
.landing > .tool-shell + .section .grid-4 {
  overflow:hidden;
  border:1px solid var(--surface-line);
  border-radius:var(--radius-panel);
  background:var(--surface-elevated);
}
.landing.landing.landing > .tool-shell + .section .feature {
  min-height:300px;
  padding:clamp(28px,3.2vw,46px);
}
.landing > .tool-shell + .section .feature + .feature {
  padding-left:clamp(28px,3.2vw,46px);
}
.landing > .tool-shell + .section .feature:first-child {
  background:var(--surface-accent);
}
.landing > .tool-shell + .section .feature:first-child b {
  color:var(--ink);
}

/* Process: numbered decisions live in one quiet product workspace. */
.landing > .case-strip:not(:has(.case-grid)) {
  background:var(--surface-muted);
}
.landing > .case-strip:not(:has(.case-grid)) .section-inner {
  padding:clamp(32px,4.4vw,60px);
  border-radius:var(--radius-panel);
  background:var(--surface-elevated);
}
.landing > .case-strip:not(:has(.case-grid)) .section-head {
  max-width:720px;
  margin-bottom:var(--space-6);
}
.landing > .case-strip:not(:has(.case-grid)) .steps {
  counter-reset:product-step;
  border-top:0;
}
.landing > .case-strip:not(:has(.case-grid)) .step {
  position:relative;
  min-height:236px;
  padding:var(--space-5) clamp(22px,2.6vw,38px) var(--space-5) 0;
  counter-increment:product-step;
}
.landing > .case-strip:not(:has(.case-grid)) .step + .step {
  padding-left:clamp(22px,2.6vw,38px);
}
.landing > .case-strip:not(:has(.case-grid)) .step::before {
  display:block;
  margin:0 0 var(--space-6);
  color:var(--blue);
  font-size:13px;
  font-weight:850;
  letter-spacing:.08em;
  content:counter(product-step, decimal-leading-zero);
}

/* Proof: give real media the widest, calmest reading surface. */
.landing > .section:has(.proof-picture),
.landing > .section:has(.gallery) {
  background:var(--surface-primary);
}
.landing > .section:has(.proof-picture) .section-head,
.landing > .section:has(.gallery) .section-head {
  max-width:760px;
  margin-bottom:var(--space-6);
}
.landing > .section:has(.proof-picture) .proof-picture {
  border-color:var(--surface-dark);
  box-shadow:0 28px 64px rgba(18,25,38,.16);
}

/* Scenarios: paired outcomes use contrast, not two identical dark cards. */
.landing > .case-strip:has(.case-grid) {
  background:var(--surface-secondary);
}
.landing > .case-strip:has(.case-grid) .case-grid {
  gap:1px;
  overflow:hidden;
  border-radius:var(--radius-panel);
  background:var(--surface-dark);
}
.landing > .case-strip:has(.case-grid) .case {
  min-height:clamp(288px,24vw,360px);
  border-radius:0;
  box-shadow:none;
}
.landing:not(.lp01) > .case-strip:has(.case-grid) .case:last-child {
  background:var(--surface-accent);
  color:var(--ink);
}
.landing:not(.lp01) > .case-strip:has(.case-grid) .case:last-child span {
  background:rgba(255,255,255,.66);
  color:var(--ink);
  backdrop-filter:none;
}
.landing:not(.lp01) > .case-strip:has(.case-grid) .case:last-child h3,
.landing:not(.lp01) > .case-strip:has(.case-grid) .case:last-child p {
  color:var(--ink);
  text-shadow:none;
}

/* Continuation is a compact tool switcher, deliberately separate from FAQ. */
.landing > .section:has(.related) {
  background:var(--surface-primary);
  padding-block:var(--section-y-tight);
}
.landing > .section:has(.related) .section-head,
.landing > .section:has(.related) .section-inner > h2 {
  max-width:720px;
  margin-bottom:var(--space-5);
}
.landing > .section:has(.related) .related {
  gap:1px;
  overflow:hidden;
  border-radius:var(--radius-panel);
  background:var(--surface-line);
}
.landing > .section:has(.related) .related a {
  min-height:96px;
  padding:var(--space-5);
  border:0;
  background:var(--surface-elevated);
  color:var(--ink);
  font-size:16px;
  font-weight:750;
}
.landing > .section:has(.related) .related a:first-child {
  background:var(--surface-accent);
}
.landing > .section:has(.related) .related a:hover {
  background:var(--blue);
  color:#fff;
}

/* FAQ: a high-readability answer panel on a distinct muted surface. */
.landing > .section:has(.faq) {
  background:var(--surface-muted);
}
.landing > .section:has(.faq) .faq {
  padding:clamp(30px,4.2vw,60px);
  border-radius:var(--radius-panel);
  background:var(--surface-elevated);
}
.landing > .section:has(.faq) .faq > :first-child {
  align-self:stretch;
  padding-right:clamp(24px,4vw,64px);
  border-right:1px solid var(--surface-line);
}
.landing > .section:has(.faq) details:first-child {
  border-top:1px solid var(--surface-line);
}

/* Creation products lead their proof with a reversed editorial axis; editors keep it direct. */
@media (min-width:761px) {
  .lp03 > .section:has(.proof-picture) .section-head,
  .lp04 > .section:has(.proof-picture) .section-head,
  .lp09 > .section:has(.proof-picture) .section-head,
  .lp10 > .section:has(.proof-picture) .section-head {
    margin-left:auto;
    text-align:right;
  }
}
@media (min-width:1081px) {
  .landing > .tool-shell + .section .grid-3 {
    grid-template-columns:1.22fr .89fr .89fr;
  }
  .landing > .tool-shell + .section .grid-4 {
    grid-template-columns:1.28fr .91fr .91fr .91fr;
  }
  .landing > .case-strip:not(:has(.case-grid)) .steps {
    grid-template-columns:1.18fr .91fr .91fr;
  }
  .landing > .section:has(.related) .related {
    grid-template-columns:1.28fr .91fr .91fr .91fr;
  }
}
@media (max-width:760px) {
  .landing > .tool-shell + .section .grid-3,
  .landing > .tool-shell + .section .grid-4,
  .landing > .case-strip:has(.case-grid) .case-grid,
  .landing > .section:has(.related) .related,
  .landing > .section:has(.faq) .faq {
    border-radius:18px;
  }
  .landing > .tool-shell + .section .feature {
    min-height:0;
    padding:28px;
    border-right:0;
  }
  .landing > .tool-shell + .section .feature + .feature {
    padding-left:28px;
    border-top:1px solid var(--surface-line);
  }
  .landing > .case-strip:not(:has(.case-grid)) .section-inner,
  .landing > .section:has(.faq) .faq {
    padding:28px;
  }
  .landing > .case-strip:not(:has(.case-grid)) .step,
  .landing > .case-strip:not(:has(.case-grid)) .step + .step {
    min-height:0;
    padding:24px 0;
    border-right:0;
    border-top:1px solid var(--surface-line);
  }
  .landing > .case-strip:not(:has(.case-grid)) .step::before {
    margin-bottom:var(--space-4);
  }
  .landing > .section:has(.faq) .faq > :first-child {
    padding:0 0 var(--space-5);
    border:0;
  }
  .landing > .section:has(.related) .related a {
    min-height:72px;
    padding:20px 22px;
  }
  .lp03 > .section:has(.proof-picture) .section-head,
  .lp04 > .section:has(.proof-picture) .section-head,
  .lp09 > .section:has(.proof-picture) .section-head,
  .lp10 > .section:has(.proof-picture) .section-head {
    margin-left:0;
    text-align:left;
  }
}

/* v34 systemic layout audit: content-led components and continuous page surfaces. */
:root {
  --space-control-x: clamp(16px, 2vw, 22px);
  --space-card: clamp(24px, 2.6vw, 34px);
  --space-card-compact: clamp(18px, 2vw, 24px);
  --button-height: 50px;
  --button-height-strong: 52px;
  --section-y: clamp(56px, 5.2vw, 84px);
  --section-y-tight: clamp(44px, 4.2vw, 60px);
  --gutter: clamp(16px, 3vw, 32px);
}

/* The page itself owns every backdrop. Direct sections never reveal body colour. */
body { background: var(--paper); }
.landing > :is(.hero, .tool-shell, .section, .site-footer) { margin-block: 0; }
.landing > .tool-shell + .section,
.landing > .case-strip:not(:has(.case-grid)) {
  background: var(--surface-secondary);
}
.landing > .section:has(.proof-picture),
.landing > .section:has(.gallery),
.landing > .section:has(.related),
.landing > .section:has(.faq),
.landing > .final-cta,
.lp01 #lp01-examples {
  background: var(--surface-primary);
}
.landing > .section:has(.faq) .faq { background: var(--surface-muted); }
.landing > .case-strip:has(.case-grid) { background: var(--surface-secondary); }
.landing > .final-cta { padding: var(--section-y) var(--gutter); }

/* Controls have a stable touch size. The primary action receives the only larger tier. */
.btn,
.lp01 .hero .btn {
  min-height: var(--button-height);
  padding: 10px var(--space-control-x);
  border-radius: var(--radius-control);
  font-size: 16px;
  line-height: 1.2;
}
.landing .hero .btn { min-height: var(--button-height-strong); }
.actions { gap: var(--space-3); }
.actions .btn { width: auto; max-width: 100%; }
.related a {
  font-size: 15px;
  line-height: 1.28;
}
.demo-status { font-size: 13px; }
.lp01-mobile-launch::before {
  font: 800 15px/1 "Manrope Local", "Noto Sans", sans-serif;
}

/* Working panels follow content instead of a legacy desktop minimum. */
.tool-shell { padding: var(--section-y) var(--gutter); }
.tool-shell .section-inner { padding: var(--space-card); }
.tool-grid { gap: clamp(28px, 4vw, 46px); }
.demo,
.demo.dark {
  min-height: 0;
  padding: var(--space-card-compact);
}
.prompt-box { min-height: 128px; }
.mode-panel { align-items: start; }
.mode-card {
  min-height: 0;
  padding: var(--space-card-compact);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
}
.demo .mode-card,
.demo.dark .mode-card { color: var(--ink); }
.demo .mode-card b,
.demo .mode-card h3,
.demo .mode-card p,
.demo.dark .mode-card b,
.demo.dark .mode-card h3,
.demo.dark .mode-card p { color: var(--ink); }
.mode-card h3 { margin-bottom: 10px; }
.mode-card p { margin-bottom: 0; color: inherit; font-size: 16px; line-height: 1.45; }

/* Text-first cards use only the space their copy needs. */
.section-head { margin-bottom: clamp(28px, 3vw, 40px); }
.feature,
.landing > .tool-shell + .section .feature {
  min-height: 0;
  padding: var(--space-card);
}
.feature + .feature,
.landing > .tool-shell + .section .feature + .feature { padding-left: var(--space-card); }
.feature b { margin-bottom: clamp(24px, 2.8vw, 36px); }
.step,
.landing > .case-strip:not(:has(.case-grid)) .step {
  min-height: 0;
  padding-block: var(--space-card-compact);
}
.landing > .case-strip:not(:has(.case-grid)) .step::before {
  margin-bottom: var(--space-5);
}
.case,
.landing > .case-strip:has(.case-grid) .case {
  min-height: clamp(250px, 20vw, 320px);
  padding: var(--space-card);
}
.case span { margin-bottom: clamp(24px, 3vw, 36px); }

/* Linked tools are navigation rows, not oversized CTA cards. */
.landing > .section:has(.related) .related a {
  min-height: 60px;
  padding: 14px 18px;
  font-size: 16px;
  line-height: 1.3;
}
.final-cta .section-inner {
  padding: clamp(32px, 4.4vw, 52px);
  gap: var(--space-4);
}
.final-cta .btn { width: auto; min-height: var(--button-height-strong); }
summary {
  padding-block: 18px;
  font-size: 16px;
  line-height: 1.35;
}
details p { font-size: 16px; line-height: 1.5; }
.site-footer { padding: clamp(48px, 5vw, 58px) var(--gutter); }
.footer-inner { gap: clamp(32px, 4vw, 48px); }
.footer-links { gap: 8px 20px; }
.brand small,
.lp01 .brand small { font-size: 13px; line-height: 1.3; }
.footer-note { font-size: 14px; line-height: 1.45; }

@media (min-width:1440px) {
  :root { --section-y: clamp(72px, 5vw, 88px); }
}

@media (max-width:760px) {
  :root {
    --gutter: clamp(16px, 4.8vw, 22px);
    --section-y: clamp(44px, 11vw, 56px);
    --section-y-tight: clamp(36px, 9vw, 46px);
    --space-card: 20px;
    --space-card-compact: 18px;
    --button-height: 48px;
    --button-height-strong: 50px;
  }

  .section,
  .landing > .section:has(.related),
  .landing > .section:has(.faq) { padding: var(--section-y) var(--gutter); }
  .landing > .section:has(.related),
  .landing > .section:has(.faq) { padding-block: var(--section-y-tight); }
  .tool-shell { padding: var(--section-y) var(--gutter); }
  .tool-shell .section-inner { padding: 20px; border-radius: 18px; }
  .lp01 .tool-shell .section-inner { padding: 0; }
  .tool-grid { gap: 24px; }
  .demo,
  .demo.dark { min-height: 0; padding: 18px; }
  .prompt-box { min-height: 118px; }

  .actions { display: flex; align-items: flex-start; }
  .actions .btn,
  .final-cta .btn { width: auto; }
  .section-head { margin-bottom: 24px; }
  .feature,
  .landing > .tool-shell + .section .feature,
  .feature + .feature,
  .landing > .tool-shell + .section .feature + .feature { padding: 20px; }
  .feature b { margin-bottom: 18px; }
  .step,
  .landing > .case-strip:not(:has(.case-grid)) .step,
  .landing > .case-strip:not(:has(.case-grid)) .step + .step { padding-block: 20px; }
  .landing > .case-strip:not(:has(.case-grid)) .step::before { margin-bottom: 14px; }
  .case,
  .landing > .case-strip:has(.case-grid) .case {
    min-height: 0;
    padding: 22px;
  }
  .case span { margin-bottom: 20px; }
  .case h3 { font-size: clamp(23px, 6.7vw, 28px); line-height: 1.08; }

  .mode-panel { gap: 12px; }
  .mode-card { min-height: 0; padding: 18px; }
  .mode-card h3 { font-size: clamp(21px, 6.2vw, 25px); line-height: 1.1; }
  .mode-card p { font-size: 16px; line-height: 1.45; }
  .landing > .section:has(.related) .related a {
    min-height: 52px;
    padding: 12px 16px;
    font-size: 16px;
  }
  .landing > .section:has(.faq) .faq { padding: 20px; }
  .final-cta { padding: var(--section-y-tight) var(--gutter); }
  .final-cta .section-inner { padding: 28px 20px; gap: 16px; }
  .site-footer { padding-block: 40px; }
  .footer-inner { gap: 28px; }
  .footer-links { gap: 4px 16px; }
}

/* v40 photographic focal-point audit.
   Every media role has its own safe crop. The variables make the intended
   subject position explicit at desktop, tablet, and mobile instead of
   inheriting a generic centred crop. */
.landing {
  --hero-ratio: 3 / 2;
  --hero-focal-desktop: 50% 50%;
  --hero-focal-tablet: 50% 50%;
  --hero-focal-mobile: 50% 50%;
  --hero-focal: var(--hero-focal-desktop);
  --proof-ratio: 3 / 2;
  --proof-fit-desktop: cover;
  --proof-fit-mobile: contain;
  --proof-fit: var(--proof-fit-desktop);
  --proof-focal-desktop: 50% 50%;
  --proof-focal-tablet: 50% 50%;
  --proof-focal-mobile: 50% 50%;
  --proof-focal: var(--proof-focal-desktop);
  --demo-fit-desktop: cover;
  --demo-fit-mobile: contain;
  --demo-fit: var(--demo-fit-desktop);
  --demo-focal-desktop: 50% 50%;
  --demo-focal-tablet: 50% 50%;
  --demo-focal-mobile: 50% 50%;
  --demo-focal: var(--demo-focal-desktop);
}

/* Each scene keeps its meaningful object in the safe centre of its role.
   These values are intentionally different: portrait, object, architecture,
   collage, and sequence imagery do not share one imaginary focal point. */
.lp01 {
  --hero-focal-desktop: 67% 46%; --hero-focal-tablet: 65% 47%; --hero-focal-mobile: 63% 47%;
  --proof-focal-desktop: 59% 53%; --proof-focal-tablet: 58% 53%; --proof-focal-mobile: 58% 53%;
  --demo-focal-desktop: 55% 52%; --demo-focal-tablet: 54% 52%; --demo-focal-mobile: 53% 52%;
  --case-product-focal-desktop: 58% 52%; --case-product-focal-tablet: 57% 52%; --case-product-focal-mobile: 56% 52%;
  --case-content-focal-desktop: 57% 47%; --case-content-focal-tablet: 56% 48%; --case-content-focal-mobile: 55% 48%;
  --case-product-focal: var(--case-product-focal-desktop);
  --case-content-focal: var(--case-content-focal-desktop);
}
.lp02 { --hero-focal-desktop: 67% 47%; --hero-focal-tablet: 65% 48%; --hero-focal-mobile: 63% 49%; --proof-focal-desktop: 54% 49%; --proof-focal-tablet: 53% 49%; --proof-focal-mobile: 52% 49%; }
.lp03 { --hero-focal-desktop: 64% 53%; --hero-focal-tablet: 62% 53%; --hero-focal-mobile: 61% 53%; --proof-focal-desktop: 51% 51%; --proof-focal-tablet: 50% 51%; --proof-focal-mobile: 50% 51%; }
.lp04 { --hero-focal-desktop: 68% 48%; --hero-focal-tablet: 66% 49%; --hero-focal-mobile: 64% 50%; --proof-focal-desktop: 65% 48%; --proof-focal-tablet: 63% 49%; --proof-focal-mobile: 61% 50%; }
.lp05 { --hero-focal-desktop: 42% 55%; --hero-focal-tablet: 43% 55%; --hero-focal-mobile: 44% 54%; --proof-focal-desktop: 48% 53%; --proof-focal-tablet: 49% 53%; --proof-focal-mobile: 50% 53%; --demo-focal-desktop: 46% 53%; --demo-focal-tablet: 47% 53%; --demo-focal-mobile: 48% 53%; }
.lp06 { --hero-focal-desktop: 67% 55%; --hero-focal-tablet: 65% 55%; --hero-focal-mobile: 63% 55%; --proof-focal-desktop: 51% 52%; --proof-focal-tablet: 50% 52%; --proof-focal-mobile: 50% 52%; --demo-focal-desktop: 52% 52%; --demo-focal-tablet: 51% 52%; --demo-focal-mobile: 50% 52%; }
.lp07 { --hero-focal-desktop: 52% 54%; --hero-focal-tablet: 51% 54%; --hero-focal-mobile: 50% 54%; --proof-focal-desktop: 53% 51%; --proof-focal-tablet: 52% 51%; --proof-focal-mobile: 51% 51%; }
.lp08 { --hero-focal-desktop: 63% 55%; --hero-focal-tablet: 61% 55%; --hero-focal-mobile: 59% 55%; --proof-focal-desktop: 55% 52%; --proof-focal-tablet: 54% 52%; --proof-focal-mobile: 53% 52%; }
.lp09 { --hero-focal-desktop: 68% 49%; --hero-focal-tablet: 66% 50%; --hero-focal-mobile: 64% 50%; --proof-focal-desktop: 54% 50%; --proof-focal-tablet: 53% 50%; --proof-focal-mobile: 52% 50%; --demo-focal-desktop: 53% 50%; --demo-focal-tablet: 52% 50%; --demo-focal-mobile: 51% 50%; }
.lp10 { --hero-focal-desktop: 49% 58%; --hero-focal-tablet: 49% 57%; --hero-focal-mobile: 50% 56%; --proof-focal-desktop: 52% 53%; --proof-focal-tablet: 51% 53%; --proof-focal-mobile: 50% 53%; }
.lp11 { --hero-focal-desktop: 61% 53%; --hero-focal-tablet: 60% 53%; --hero-focal-mobile: 59% 53%; --proof-focal-desktop: 53% 51%; --proof-focal-tablet: 52% 51%; --proof-focal-mobile: 51% 51%; --demo-focal-desktop: 54% 52%; --demo-focal-tablet: 53% 52%; --demo-focal-mobile: 52% 52%; }

.landing .hero-visual,
.landing .hero-stage {
  aspect-ratio: var(--hero-ratio);
  background-position: var(--hero-focal) !important;
}

.landing .proof-picture { aspect-ratio: var(--proof-ratio); }
.landing .proof-picture img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: var(--proof-fit);
  object-position: var(--proof-focal);
}
.landing .demo-proof {
  display: block;
  object-fit: var(--demo-fit);
  object-position: var(--demo-focal);
}
.lp05 .before-after img { object-position: var(--demo-focal); }

.lp01 #lp01-demo .before-after { background-position: var(--demo-focal) !important; }
.lp01 #lp01-examples .gallery > .visual-card { background-position: var(--proof-focal) !important; }
.lp01 .case:first-child::before { background-position: var(--case-product-focal) !important; }
.lp01 .case:last-child::before { background-position: var(--case-content-focal) !important; }

@media (min-width:761px) and (max-width:1080px) {
  .landing {
    --hero-focal: var(--hero-focal-tablet);
    --proof-focal: var(--proof-focal-tablet);
    --demo-focal: var(--demo-focal-tablet);
  }
  .lp01 {
    --case-product-focal: var(--case-product-focal-tablet);
    --case-content-focal: var(--case-content-focal-tablet);
  }
}

@media (max-width:760px) {
  .landing {
    --hero-focal: var(--hero-focal-mobile);
    --proof-focal: var(--proof-focal-mobile);
    --demo-focal: var(--demo-focal-mobile);
    --proof-fit: var(--proof-fit-mobile);
    --demo-fit: var(--demo-fit-mobile);
  }
  .lp01 {
    --case-product-focal: var(--case-product-focal-mobile);
    --case-content-focal: var(--case-content-focal-mobile);
  }
  /* This card is portrait-oriented in the UI. A 5:4 safe window keeps the
     complete headphone silhouette visible instead of cutting off its cups. */
  .lp01 #lp01-demo .before-after {
    min-height: 0 !important;
    aspect-ratio: 5 / 4;
  }
  .lp05 .before-after img {
    object-fit: contain;
    object-position: var(--demo-focal);
  }
}

/* v44: the landing explains the journey instead of imitating a file uploader. */
.lp02 .tool-copy .try-editor {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  margin-top: 24px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}

.lp02 .tool-copy .try-editor:hover,
.lp02 .tool-copy .try-editor:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
}

.landing-flow {
  min-height: 0 !important;
}

.landing-flow__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.landing-flow__steps li {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 0 18px;
  border-left: 1px solid rgba(207, 222, 246, .24);
}

.landing-flow__steps li:first-child {
  padding-left: 0;
  border-left: 0;
}

.landing-flow__steps b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #1f6fff;
  color: #fff;
  font-size: 14px;
  line-height: 1;
}

.landing-flow__steps strong {
  display: block;
  color: #fff;
  font-size: 17px;
  line-height: 1.15;
}

.landing-flow__steps p {
  margin: 7px 0 0;
  color: #cad7ec;
  font-size: 14px;
  line-height: 1.42;
}

@media (max-width:760px) {
  .lp02 .tool-copy .try-editor {
    margin-top: 20px;
  }

  .landing-flow__steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .landing-flow__steps li,
  .landing-flow__steps li:first-child {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid rgba(207, 222, 246, .2);
  }

  .landing-flow__steps li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* v42: conversion hierarchy, mobile breathing room and footer system */
.landing > .section:has(.related) {
  display: none !important;
}

.lp01 #lp01-examples .gallery > .visual-card {
  background-image: url("assets/proof-lp01-digital-sneaker-v2-1536.webp") !important;
  background-position: 50% 52% !important;
}

.lp01 .case:first-child::before {
  background-image: url("assets/lp01-case-espresso-v2-1536.webp") !important;
  background-position: 70% 50% !important;
}

.lp01 .case:last-child::before {
  background-image: url("assets/lp01-case-publication-v2-1536.webp") !important;
  background-position: 66% 48% !important;
}

.lp01-head-actions .lp01-start {
  font-size: 0 !important;
}

.lp01-head-actions .lp01-start::after {
  content: "Попробовать";
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
}

.final-cta {
  position: relative;
  overflow: hidden;
  text-align: left !important;
  background: #111822 !important;
  border-block: 1px solid rgba(115, 164, 255, .26);
}

.final-cta .section-inner {
  position: relative;
  display: grid !important;
  place-items: unset !important;
  justify-items: start !important;
  gap: 0;
  padding-block: clamp(64px, 8vw, 112px);
}

.final-cta h2 {
  max-width: 17ch;
  margin: 0;
  color: #f7f9ff;
}

.final-cta .final-value {
  max-width: 48ch;
  margin: 22px 0 0;
  color: #c5d2e8 !important;
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.4;
}

.final-cta .btn {
  min-width: min(100%, 220px);
  margin-top: 30px !important;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
}

.site-footer {
  padding: 68px var(--gutter, 24px) 54px !important;
  background: #0b1018 !important;
  border-top: 1px solid rgba(157, 186, 234, .2);
}

.footer-inner {
  width: min(var(--container, var(--max)), 100%) !important;
  grid-template-columns: minmax(240px, .78fr) minmax(0, 1.22fr) !important;
  gap: clamp(40px, 7vw, 96px) !important;
  align-items: start;
}

.site-footer .brand {
  width: fit-content;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(157, 186, 234, .22);
}

.footer-note {
  max-width: 28ch;
  margin: 22px 0 0 !important;
  color: #8f9bb0 !important;
  font-size: 14px;
  line-height: 1.5;
}

.footer-links {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-content: start;
  gap: 0 clamp(20px, 3vw, 42px) !important;
  margin: 0 !important;
  padding: 0 0 4px !important;
  border-top: 1px solid rgba(157, 186, 234, .22);
  border-bottom: 1px solid rgba(157, 186, 234, .14);
}

.footer-links a {
  display: block;
  min-height: 43px;
  padding: 13px 0 10px;
  color: #c7d1e1 !important;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  transition: color .18s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #fff !important;
}

@media (max-width:760px) {
  .section,
  .landing > .section:has(.faq) {
    padding-inline: 24px !important;
  }

  .nav,
  .lp01 .nav,
  .hero-inner,
  .lp01 .hero-inner,
  .lp02 .hero-inner,
  .lp03 .hero-inner,
  .lp04 .hero-inner,
  .lp05 .hero-inner,
  .lp06 .hero-inner,
  .lp07 .hero-inner,
  .lp08 .hero-inner,
  .lp09 .hero-inner,
  .lp10 .hero-inner,
  .lp11 .hero-inner {
    width: calc(100% - 48px) !important;
  }

  .lp01-mobile-launch {
    width: auto !important;
    min-width: 106px !important;
    height: 44px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    flex: 0 0 auto;
  }

  .lp01-mobile-launch::before {
    content: "Попробовать" !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -.01em;
  }

  .lp01-mobile-launch::after {
    content: none !important;
  }

  .lp01 #lp01-examples .gallery > .visual-card {
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    background-image: url("assets/proof-lp01-digital-sneaker-v2-768.webp") !important;
    background-position: 50% 52% !important;
  }

  .lp01 .case {
    min-height: 312px !important;
  }

  .lp01 .case:first-child::before {
    background-image: url("assets/lp01-case-espresso-v2-768.webp") !important;
    background-position: 71% 50% !important;
  }

  .lp01 .case:last-child::before {
    background-image: url("assets/lp01-case-publication-v2-768.webp") !important;
    background-position: 69% 46% !important;
  }

  .final-cta .section-inner {
    padding-block: 56px !important;
  }

  .final-cta h2 {
    max-width: 14ch;
  }

  .final-cta .final-value {
    margin-top: 18px;
    font-size: 18px;
  }

  .final-cta .btn {
    min-width: 0;
    width: auto;
    margin-top: 26px !important;
  }

  .site-footer {
    padding: 44px 24px 36px !important;
  }

  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .site-footer .brand {
    padding-bottom: 16px;
  }

  .footer-note {
    max-width: 34ch;
    margin-top: 18px !important;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 18px !important;
  }

  .footer-links a {
    min-height: 42px;
    padding-block: 12px;
    font-size: 13px;
  }
}

@media (max-width:360px) {
  .nav,
  .lp01 .nav {
    gap: 8px !important;
  }

  .site-header .brand-mark {
    width: 38px !important;
    height: 38px !important;
  }

  .site-header .brand strong {
    font-size: 12px !important;
  }

  .lp01-mobile-launch {
    min-width: 98px !important;
    padding-inline: 10px !important;
    font-size: 12px;
  }
}

/* v43: the product scenario demonstrates a real listing, not a blank photo. */
.lp01 .case > :not(.product-listing) {
  position: relative;
  z-index: 1;
}

.lp01 .case-product-card {
  display: flex;
  align-items: flex-end;
  padding: clamp(22px, 3vw, 38px);
}

.lp01 .case-product-card::after {
  z-index: 0;
  background: linear-gradient(90deg, rgba(4, 11, 23, .83) 0%, rgba(4, 11, 23, .54) 46%, rgba(4, 11, 23, .08) 100%);
}

.product-listing {
  position: relative;
  z-index: 1;
  width: min(100%, 276px);
  padding: 22px;
  border: 1px solid rgba(181, 213, 255, .34);
  border-radius: 14px;
  background: rgba(8, 18, 36, .84);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .24);
  color: #fff;
}

.product-listing__eyebrow,
.product-listing__details {
  margin: 0;
  color: #cfdef6 !important;
  font-size: 13px;
  line-height: 1.35;
  text-shadow: none !important;
}

.product-listing h3 {
  max-width: none;
  margin: 9px 0 10px;
  color: #fff !important;
  font-size: clamp(23px, 2.1vw, 28px);
  line-height: 1.04;
  letter-spacing: -.03em;
  text-shadow: none !important;
}

.product-listing__price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(181, 213, 255, .26);
}

.product-listing__price strong {
  color: #fff;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.035em;
}

.product-listing__price span {
  margin: 0;
  padding: 0;
  background: none;
  color: #b8d3ff;
  font-size: 13px;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

@media (max-width:760px) {
  .lp01 .case-product-card {
    min-height: 340px !important;
  }

  .product-listing {
    width: min(100%, 232px);
    padding: 18px;
  }

  .product-listing h3 {
    font-size: 24px;
  }

  .product-listing__price {
    margin-top: 16px;
    padding-top: 14px;
  }

  .product-listing__price strong {
    font-size: 22px;
  }
}

/* v45: a three-choice decision needs complete rows, never an orphaned third card. */
.lp03 .mode-panel,
.lp08 .mode-panel {
  align-items: stretch;
}

.lp03 .mode-card,
.lp08 .mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 216px;
  text-align: left;
}

.lp03 .mode-card p,
.lp08 .mode-card p {
  margin-top: auto;
}

/* LP-03: three options need a visible edge against their pale canvas. */
.lp03 .mode-panel { gap: 16px; }

.lp03 .mode-card {
  border: 1px solid #cbc5f5;
  background: #fff;
}

@media (min-width:601px) and (max-width:1080px) {
  .lp03 .mode-panel,
  .lp08 .mode-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:760px) {
  .lp03 .mode-panel,
  .lp08 .mode-panel {
    grid-template-columns: 1fr;
  }

  .lp03 .mode-card,
  .lp08 .mode-card {
    min-height: 184px;
  }
}

/* v46: scenario cards own their foreground colours — dark surfaces never inherit ink. */
.landing > .case-strip:has(.case-grid) .case {
  --case-ink: #fff;
  --case-muted: #dce8ff;
  --case-label: #b9dcff;
  background: var(--surface-dark);
  color: var(--case-ink);
}

.landing > .case-strip:has(.case-grid) .case > :is(span, h3, p) {
  position: relative;
  z-index: 1;
}

.landing > .case-strip:has(.case-grid) .case h3 {
  color: var(--case-ink) !important;
  text-shadow: none;
}

.landing > .case-strip:has(.case-grid) .case p {
  color: var(--case-muted) !important;
  text-shadow: none;
}

.landing > .case-strip:has(.case-grid) .case span {
  background: transparent !important;
  color: var(--case-label) !important;
}

.landing:not(.lp01) > .case-strip:has(.case-grid) .case:last-child {
  --case-ink: var(--ink);
  --case-muted: var(--ink-soft);
  --case-label: var(--ink-soft);
  background: var(--surface-accent) !important;
}

/* v47: a landing demonstrates the entry point; it does not imitate a disconnected form. */
.lp04 .generator-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 260px;
}

.lp04 .generator-start h3 {
  max-width: 15ch;
  margin: 0;
}

.lp04 .generator-start p {
  max-width: 34ch;
  margin: 18px 0 28px;
  color: #dce8ff;
}

.lp04 .generator-start .btn {
  margin: 0;
}

@media (max-width:760px) {
  .lp04 .generator-start {
    min-height: 0;
  }
}

/* v48: compatibility-safe contrast contract for every scenario pair. */
.landing .case-grid .case {
  --case-ink: #fff;
  --case-muted: #dce8ff;
  --case-label: #b9dcff;
  background: #10141c !important;
  color: var(--case-ink);
}

.landing .case-grid .case h3 {
  color: var(--case-ink) !important;
  text-shadow: none;
}

.landing .case-grid .case p {
  color: var(--case-muted) !important;
  text-shadow: none;
}

.landing .case-grid .case span {
  background: transparent !important;
  color: var(--case-label) !important;
}

.landing:not(.lp01) > .case-strip:has(.case-grid) .case-grid .case:last-child {
  --case-ink: var(--ink);
  --case-muted: var(--ink-soft);
  --case-label: var(--ink-soft);
  background: var(--surface-accent) !important;
}

/* v52: a dark surface owns its foreground colours; no text may inherit page ink. */
.landing {
  --on-dark: #f7f9ff;
  --on-dark-muted: #c7d6ed;
  --on-dark-label: #b9dcff;
}

.landing :is(.demo, .demo.dark, .final-cta, .site-footer) {
  color: var(--on-dark);
}

.landing :is(.demo, .demo.dark) > :not(.mode-panel) :is(h1, h2, h3, h4, strong, b) {
  color: var(--on-dark) !important;
}

.landing :is(.demo, .demo.dark) > :not(.mode-panel) :is(p, small, li) {
  color: var(--on-dark-muted) !important;
}

.landing .demo .mode-card {
  background-color: var(--white);
}

.landing .demo .mode-card :is(h3, p, b) {
  color: var(--ink) !important;
}

.landing .final-cta :is(h1, h2, h3, h4, strong, b, summary) {
  color: var(--on-dark) !important;
}

.landing .final-cta :is(p, small, li) {
  color: var(--on-dark-muted) !important;
}

.landing .site-footer .brand strong {
  color: var(--on-dark) !important;
}

.landing .site-footer .brand small,
.landing .site-footer .footer-note {
  color: var(--on-dark-muted) !important;
}

.landing .case-grid .case:first-child :is(h1, h2, h3, h4, strong, b) {
  color: var(--case-ink) !important;
}

.landing .case-grid .case:first-child :is(p, small) {
  color: var(--case-muted) !important;
}

.lp01 .case-grid .case:last-child :is(h1, h2, h3, h4, strong, b) {
  color: var(--case-ink) !important;
}

.lp01 .case-grid .case:last-child :is(p, small) {
  color: var(--case-muted) !important;
}

/* v53: demo panels explain a real product flow; they do not imitate controls. */
.landing .demo.dark .metric-line {
  border-color: rgba(185, 220, 255, .22);
}

.landing .demo.dark .metric {
  color: var(--on-dark-muted);
  border-color: rgba(185, 220, 255, .22);
}

.landing .demo.dark .metric strong {
  color: var(--on-dark) !important;
}

.landing .demo.dark .demo-note {
  max-width: 38ch;
  margin: 24px 0 0;
  color: var(--on-dark-muted) !important;
  font-size: 16px;
  line-height: 1.45;
}

/* v54: each tool gets a distinct colour atmosphere while actions stay Photoshop blue. */
.landing {
  --flare-a: #48a8ff;
  --flare-b: #a982ff;
  --flare-a-soft: rgba(72, 168, 255, .34);
  --flare-b-soft: rgba(169, 130, 255, .28);
  --accent-label: #075ebd;
}

.lp01 { --flare-a:#1387ff; --flare-b:#6be1ff; --flare-a-soft:rgba(19,135,255,.34); --flare-b-soft:rgba(107,225,255,.28); --accent-label:#075ebd; }
.lp02 { --flare-a:#1a83ff; --flare-b:#9d79ff; --flare-a-soft:rgba(26,131,255,.33); --flare-b-soft:rgba(157,121,255,.28); --accent-label:#075ebd; }
.lp03 { --flare-a:#18a673; --flare-b:#b7d95d; --flare-a-soft:rgba(24,166,115,.30); --flare-b-soft:rgba(183,217,93,.26); --accent-label:#087452; }
.lp04 { --flare-a:#e45a97; --flare-b:#ffad63; --flare-a-soft:rgba(228,90,151,.28); --flare-b-soft:rgba(255,173,99,.30); --accent-label:#aa285e; }
.lp05 { --flare-a:#7157e8; --flare-b:#f38eb4; --flare-a-soft:rgba(113,87,232,.29); --flare-b-soft:rgba(243,142,180,.26); --accent-label:#4c36bd; }
.lp06 { --flare-a:#008db8; --flare-b:#39c2bb; --flare-a-soft:rgba(0,141,184,.30); --flare-b-soft:rgba(57,194,187,.25); --accent-label:#006e91; }
.lp07 { --flare-a:#d76550; --flare-b:#ecb450; --flare-a-soft:rgba(215,101,80,.28); --flare-b-soft:rgba(236,180,80,.28); --accent-label:#ad4131; }
.lp08 { --flare-a:#536eff; --flare-b:#49baff; --flare-a-soft:rgba(83,110,255,.30); --flare-b-soft:rgba(73,186,255,.26); --accent-label:#354bbc; }
.lp09 { --flare-a:#129e82; --flare-b:#62cdb6; --flare-a-soft:rgba(18,158,130,.29); --flare-b-soft:rgba(98,205,182,.25); --accent-label:#087861; }
.lp10 { --flare-a:#5367e5; --flare-b:#b87ef1; --flare-a-soft:rgba(83,103,229,.31); --flare-b-soft:rgba(184,126,241,.27); --accent-label:#3748b3; }
.lp11 { --flare-a:#1975d7; --flare-b:#d89742; --flare-a-soft:rgba(25,117,215,.31); --flare-b-soft:rgba(216,151,66,.25); --accent-label:#075ebd; }

.landing .hero {
  isolation: isolate;
  background: linear-gradient(118deg, var(--scene) 0%, var(--scene) 56%, var(--surface-secondary) 100%) !important;
}

.landing .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(32rem 26rem at 88% 4%, var(--flare-a-soft) 0%, transparent 64%),
    radial-gradient(27rem 22rem at 55% 108%, var(--flare-b-soft) 0%, transparent 68%);
}

.landing .hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--flare-a), var(--flare-b));
}

.landing .hero-inner {
  position: relative;
  z-index: 1;
}

.landing .tool-shell .section-inner {
  position: relative;
  overflow: hidden;
}

.landing .tool-shell .section-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--flare-a), var(--flare-b));
}

.landing .tool-shell .section-inner > * {
  position: relative;
  z-index: 1;
}

.landing .feature > b,
.landing .step > b {
  color: var(--accent-label);
}

.landing .final-cta .section-inner {
  background:
    radial-gradient(36rem 28rem at 102% 0%, var(--flare-a-soft) 0%, transparent 66%),
    radial-gradient(24rem 20rem at 84% 110%, var(--flare-b-soft) 0%, transparent 70%),
    var(--chrome);
}

@media (max-width: 760px) {
  .landing .hero::before {
    background:
      radial-gradient(22rem 17rem at 100% 0%, var(--flare-a-soft) 0%, transparent 68%),
      radial-gradient(18rem 14rem at 25% 105%, var(--flare-b-soft) 0%, transparent 72%);
  }

  .landing .hero::after,
  .landing .tool-shell .section-inner::before {
    height: 4px;
  }
}

/* Every three-step section shares deliberate vertical rhythm instead of
   relying on collapsed margins from the legacy stylesheet. */
.landing > .case-strip:not(:has(.case-grid)) > .section-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(34px, 3.2vw, 52px);
}

.landing > .case-strip:not(:has(.case-grid)) > .section-inner > h2,
.landing > .case-strip:not(:has(.case-grid)) > .section-inner > .section-head,
.landing > .case-strip:not(:has(.case-grid)) > .section-inner > .steps {
  margin: 0;
}

/* v100: every CTA shares one geometric alignment contract.
   Anchors no longer rely on the font baseline or vertical padding to look centred. */
:is(
  .btn,
  .lp01-head-actions a,
  .lp01-mobile-launch,
  .lp02 .tool-copy .try-editor
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  font-family: inherit;
  line-height: 1.15;
}

.btn,
.lp01 .hero .btn {
  padding-block: 0;
}

/* v74 visual-asset contract.
   The first frame is a deliberate route colour, not a dark empty image slot;
   all photography and editor scenes then use their per-route focal variables.
   This final shared layer makes the crop and loading behaviour independent of
   historical component-specific declarations above. */
.landing .hero-visual,
.landing .hero-stage {
  background-color: var(--scene) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.landing .proof-picture,
.landing .demo,
.landing .before-after {
  background-color: #20242d;
}

.landing .proof-picture img,
.landing .demo-proof,
.landing .before-after img {
  max-inline-size: 100%;
  image-rendering: auto;
}

/* v61: the colour system becomes a visible campaign language.
   Large flowing fields carry attention from the offer to the real editor; copy stays on a quiet layer above them. */
.landing {
  --flow-turn: -12deg;
  --flow-x: 4%;
  --flow-y: -4%;
  --flow-side: right;
  --flow-outline: color-mix(in srgb, var(--flare-a) 72%, var(--white));
  --flow-fill-a: color-mix(in srgb, var(--flare-a) 64%, var(--white));
  --flow-fill-b: color-mix(in srgb, var(--flare-b) 58%, var(--white));
  --flow-surface-a: color-mix(in srgb, var(--flare-a) 42%, var(--white));
  --flow-surface-b: color-mix(in srgb, var(--flare-b) 36%, var(--white));
}

.lp01 { --flow-turn:-16deg; --flow-x:5%; --flow-y:-6%; }
.lp02 { --flow-turn:12deg; --flow-x:-2%; --flow-y:4%; }
.lp03 { --flow-turn:-22deg; --flow-x:7%; --flow-y:-2%; }
.lp04 { --flow-turn:15deg; --flow-x:-5%; --flow-y:3%; }
.lp05 { --flow-turn:-9deg; --flow-x:3%; --flow-y:7%; }
.lp06 { --flow-turn:21deg; --flow-x:-6%; --flow-y:-3%; }
.lp07 { --flow-turn:-18deg; --flow-x:5%; --flow-y:5%; }
.lp08 { --flow-turn:9deg; --flow-x:-3%; --flow-y:-6%; }
.lp09 { --flow-turn:-25deg; --flow-x:6%; --flow-y:2%; }
.lp10 { --flow-turn:18deg; --flow-x:-5%; --flow-y:4%; }
.lp11 { --flow-turn:-12deg; --flow-x:2%; --flow-y:-7%; }

/* Hero: a single large, asymmetric form frames the proof instead of scattering small ornaments. */
.landing .hero {
  overflow: hidden;
  background:
    radial-gradient(84% 120% at -18% 88%, color-mix(in srgb, var(--flare-b) 24%, var(--white)) 0%, transparent 72%),
    linear-gradient(118deg, var(--flow-surface-a) 0%, var(--surface-muted) 45%, var(--flow-surface-b) 100%) !important;
}

.landing .hero::before {
  inset: auto;
  top: clamp(38px, 5vw, 86px);
  right: clamp(-110px, -6vw, -42px);
  z-index: 0;
  width: min(78vw, 1120px);
  height: clamp(450px, 47vw, 720px);
  border-radius: 58% 42% 46% 54% / 47% 58% 42% 53%;
  background: linear-gradient(135deg, var(--flow-fill-a) 0%, var(--flow-fill-b) 100%);
  transform: translate(var(--flow-x), var(--flow-y)) rotate(var(--flow-turn));
}

.landing .hero::after {
  display: block !important;
  inset: auto;
  top: clamp(22px, 3.5vw, 60px);
  right: clamp(-118px, -6.5vw, -46px);
  z-index: 0;
  width: min(86vw, 1180px);
  height: clamp(500px, 51vw, 790px);
  border: 2px solid var(--flow-outline);
  border-radius: 44% 56% 62% 38% / 55% 40% 60% 45%;
  background: transparent;
  opacity: 1;
  transform: translate(-2%, 0) rotate(18deg);
}

/* Three substantive sections turn the palette into scroll rhythm, each with its own protected breathing edge. */
.landing > .tool-shell + .section,
.landing > .section:has(.proof-picture),
.landing > .case-strip:has(.case-grid) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(78% 128% at -14% 58%, color-mix(in srgb, var(--flare-a) 32%, transparent) 0%, transparent 69%),
    radial-gradient(72% 120% at 112% 42%, color-mix(in srgb, var(--flare-b) 32%, transparent) 0%, transparent 70%),
    linear-gradient(118deg, var(--flow-surface-a) 0%, var(--surface-primary) 51%, var(--flow-surface-b) 100%);
}

.landing > .tool-shell + .section::before,
.landing > .section:has(.proof-picture)::before,
.landing > .case-strip:has(.case-grid)::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(46vw, 670px);
  height: min(39vw, 560px);
  top: 12%;
  right: -4vw;
  border: 1px solid var(--flow-outline);
  border-radius: 63% 37% 48% 52% / 43% 57% 43% 57%;
  background:
    radial-gradient(68% 68% at 24% 76%, var(--flow-fill-b) 0%, transparent 74%),
    linear-gradient(140deg, var(--flow-fill-a) 0%, transparent 72%);
  opacity: .9;
  transform: rotate(var(--flow-turn));
}

.landing > .tool-shell + .section .section-inner,
.landing > .section:has(.proof-picture) .section-inner,
.landing > .case-strip:has(.case-grid) .section-inner {
  position: relative;
  z-index: 1;
}

/* Wide proof and scenario surfaces get room around the new colour fields rather than a cramped glow. */
.landing > .section:has(.proof-picture) .section-inner,
.landing > .case-strip:has(.case-grid) .section-inner {
  padding-block: clamp(8px, 1.4vw, 18px);
}

.landing > .section:has(.proof-picture) .proof-picture {
  background:
    linear-gradient(135deg, var(--flare-a) 0%, var(--flare-b) 100%);
  padding: clamp(9px, 1vw, 15px);
}

.landing > .case-strip:has(.case-grid) .case-grid {
  gap: clamp(8px, .9vw, 14px);
  padding: clamp(8px, .9vw, 14px);
}

/* Keep the actual tool surface crisp against the expressive backdrop. */
.landing:not(.lp01) .tool-shell .section-inner {
  background:
    linear-gradient(125deg, var(--surface-accent) 0%, var(--surface-muted) 47%, rgba(255,255,255,.92) 100%);
}

@media (max-width: 760px) {
  .landing .hero::before {
    top: auto;
    right: -100px;
    bottom: -82px;
    width: 420px;
    height: 350px;
  }

  .landing .hero::after {
    top: auto;
    right: -132px;
    bottom: -104px;
    width: 470px;
    height: 395px;
    opacity: .72;
  }

  .landing > .tool-shell + .section::before,
  .landing > .section:has(.proof-picture)::before,
  .landing > .case-strip:has(.case-grid)::before {
    top: auto;
    right: -128px;
    bottom: -105px;
    width: 340px;
    height: 300px;
    opacity: .62;
  }

  .landing > .section:has(.proof-picture) .section-inner,
  .landing > .case-strip:has(.case-grid) .section-inner {
    padding-block: 6px;
  }

  .landing > .section:has(.proof-picture) .proof-picture,
  .landing > .case-strip:has(.case-grid) .case-grid {
    padding: 7px;
  }
}

/* v56: accent choreography — the same brand, different emphasis by product task. */
.landing .hero::after,
.landing .tool-shell .section-inner::before {
  display: none;
}

/* Editorial, background and compositing: a continuous colour baseline links copy to proof. */
.lp01 .hero::after,
.lp05 .hero::after,
.lp08 .hero::after {
  display: block;
}

.lp01 .tool-shell .section-inner::before,
.lp05 .tool-shell .section-inner::before,
.lp08 .tool-shell .section-inner::before {
  display: block;
}

/* AI retouch and animation: a short signal stroke starts the scan path. */
.lp02 .hero::after,
.lp09 .hero::after {
  display: block;
  right: auto;
  width: min(42vw, 540px);
  height: 8px;
  border-radius: 0 999px 0 0;
}

.lp02 .tool-shell .section-inner::before,
.lp07 .tool-shell .section-inner::before,
.lp10 .tool-shell .section-inner::before {
  display: block;
  right: 0;
  bottom: auto;
  left: auto;
  width: min(29%, 310px);
  height: 12px;
  border-radius: 0 0 0 18px;
}

/* Generation and layout: a vertical composition marker holds the right visual side. */
.lp03 .hero::after,
.lp10 .hero::after {
  display: block;
  top: clamp(42px, 8vw, 110px);
  right: 0;
  bottom: auto;
  left: auto;
  width: 10px;
  height: min(38%, 280px);
  border-radius: 10px 0 0 10px;
}

/* Prompt and local edit: two colours meet at the selected edge of the canvas. */
.lp04 .hero::after,
.lp07 .hero::after {
  display: block;
  right: clamp(22px, 5vw, 72px);
  bottom: 26px;
  left: auto;
  width: clamp(116px, 14vw, 210px);
  height: 9px;
  border-radius: 999px;
}

/* Cutout and photo correction: a paired result marker expresses before/after precision. */
.lp06 .hero::after,
.lp11 .hero::after {
  display: block;
  right: 0;
  bottom: 0;
  left: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--flare-a) 0 48%, var(--paper) 48% 52%, var(--flare-b) 52% 100%);
}

/* Motion, cutout and image creation use a low rail inside the working canvas, not a repeated top line. */
.lp03 .tool-shell .section-inner::before,
.lp06 .tool-shell .section-inner::before,
.lp09 .tool-shell .section-inner::before {
  display: block;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  width: 58%;
  height: 5px;
  border-radius: 0 999px 0 0;
}

/* Prompt and correction demos are lit by a localized colour field instead of a rule. */
.lp04 .tool-shell .section-inner::before,
.lp11 .tool-shell .section-inner::before {
  display: block;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background:
    radial-gradient(26rem 16rem at 100% 0%, var(--flare-a-soft) 0%, transparent 67%),
    radial-gradient(18rem 14rem at 0% 100%, var(--flare-b-soft) 0%, transparent 72%);
}

/* Benefits: the important outcome changes position by tool instead of always being the first tile. */
.landing > .tool-shell + .section .feature:first-child {
  background: transparent;
}

.lp01 > .tool-shell + .section .feature:first-child,
.lp05 > .tool-shell + .section .feature:first-child,
.lp08 > .tool-shell + .section .feature:first-child {
  background: var(--surface-accent);
}

.lp02 > .tool-shell + .section .feature:nth-child(2),
.lp06 > .tool-shell + .section .feature:nth-child(2),
.lp11 > .tool-shell + .section .feature:nth-child(2) {
  background: linear-gradient(135deg, var(--surface-accent), var(--surface-elevated));
}

.lp03 > .tool-shell + .section .feature:last-child,
.lp04 > .tool-shell + .section .feature:nth-child(2),
.lp09 > .tool-shell + .section .feature:last-child,
.lp10 > .tool-shell + .section .feature:nth-child(2) {
  background: linear-gradient(180deg, var(--surface-elevated) 0%, var(--surface-accent) 100%);
}

.lp07 > .tool-shell + .section .feature:last-child {
  background: var(--surface-accent);
}

/* Process panels alternate between quiet workspace, directional tint and a highlighted decision. */
.lp02 > .case-strip:not(:has(.case-grid)) .section-inner,
.lp07 > .case-strip:not(:has(.case-grid)) .section-inner,
.lp09 > .case-strip:not(:has(.case-grid)) .section-inner {
  background:
    radial-gradient(28rem 18rem at 100% 0%, var(--flare-a-soft) 0%, transparent 70%),
    var(--surface-elevated);
}

.lp04 > .case-strip:not(:has(.case-grid)) .section-inner,
.lp08 > .case-strip:not(:has(.case-grid)) .section-inner {
  background: linear-gradient(118deg, var(--surface-elevated) 0%, var(--surface-elevated) 58%, var(--surface-muted) 100%);
}

.lp03 > .case-strip:not(:has(.case-grid)) .step:last-child,
.lp05 > .case-strip:not(:has(.case-grid)) .step:nth-child(2),
.lp10 > .case-strip:not(:has(.case-grid)) .step:first-child {
  background: var(--surface-accent);
}

/* Proof media gets an editorial colour field; direction changes with the product narrative. */
.lp01 > .section:has(.proof-picture),
.lp06 > .section:has(.proof-picture),
.lp11 > .section:has(.proof-picture) {
  background: linear-gradient(180deg, var(--surface-primary) 0%, var(--surface-muted) 100%);
}

.lp02 > .section:has(.proof-picture),
.lp05 > .section:has(.proof-picture),
.lp08 > .section:has(.proof-picture) {
  background: linear-gradient(105deg, var(--surface-primary) 0%, var(--surface-primary) 58%, var(--surface-muted) 100%);
}

.lp03 > .section:has(.proof-picture),
.lp04 > .section:has(.proof-picture),
.lp07 > .section:has(.proof-picture),
.lp09 > .section:has(.proof-picture),
.lp10 > .section:has(.proof-picture) {
  background:
    radial-gradient(34rem 24rem at 88% 16%, var(--flare-b-soft) 0%, transparent 70%),
    var(--surface-primary);
}

/* Closing panels use four compositions, all with the same readable dark chrome. */
.lp01 .final-cta .section-inner,
.lp05 .final-cta .section-inner,
.lp08 .final-cta .section-inner {
  background:
    radial-gradient(36rem 28rem at 102% 0%, var(--flare-a-soft) 0%, transparent 66%),
    radial-gradient(24rem 20rem at 84% 110%, var(--flare-b-soft) 0%, transparent 70%),
    var(--chrome);
}

.lp02 .final-cta .section-inner,
.lp06 .final-cta .section-inner,
.lp11 .final-cta .section-inner {
  background:
    linear-gradient(122deg, var(--chrome) 0%, var(--chrome) 58%, rgba(14, 42, 76, .94) 100%),
    var(--chrome);
}

.lp03 .final-cta .section-inner,
.lp07 .final-cta .section-inner,
.lp09 .final-cta .section-inner {
  background:
    radial-gradient(30rem 24rem at -4% 104%, var(--flare-b-soft) 0%, transparent 70%),
    radial-gradient(24rem 18rem at 100% 0%, var(--flare-a-soft) 0%, transparent 72%),
    var(--chrome);
}

.lp04 .final-cta .section-inner,
.lp10 .final-cta .section-inner {
  background:
    linear-gradient(90deg, var(--chrome) 0%, var(--chrome) 62%, rgba(73, 45, 99, .94) 100%),
    var(--chrome);
}

@media (max-width: 760px) {
  .lp03 .hero::after,
  .lp10 .hero::after {
    top: 22px;
    width: 6px;
    height: 82px;
  }

  .lp04 .hero::after,
  .lp07 .hero::after {
    right: 20px;
    bottom: 14px;
    width: 108px;
    height: 6px;
  }

  .lp02 .hero::after,
  .lp09 .hero::after {
    width: 44vw;
    height: 5px;
  }

  .lp02 .tool-shell .section-inner::before,
  .lp07 .tool-shell .section-inner::before,
  .lp10 .tool-shell .section-inner::before {
    width: 34%;
    height: 8px;
  }
}

/* v57: colour is carried by purposeful product surfaces, never by stray decoration.
   Each route now has three large colour moments: orientation, work, and proof. */
@supports (background: color-mix(in srgb, #000 50%, #fff)) {
  .landing {
    --surface-secondary: color-mix(in srgb, var(--scene) 62%, var(--paper));
    --surface-muted: color-mix(in srgb, var(--scene) 84%, var(--white));
    --surface-accent: color-mix(in srgb, var(--scene-strong) 66%, var(--white));
    --proof-mat: linear-gradient(135deg, var(--flare-a) 0%, var(--flare-b) 100%);
  }
}

/* The colour field belongs to the orientation block; isolated strokes made it feel accidental. */
.landing .hero::after,
.landing .tool-shell .section-inner::before {
  display: none !important;
}

.landing .hero {
  background:
    linear-gradient(118deg, var(--surface-muted) 0%, var(--surface-muted) 48%, var(--surface-accent) 100%) !important;
}

.landing .hero::before {
  background:
    radial-gradient(38rem 30rem at 90% -4%, var(--flare-a-soft) 0%, transparent 65%),
    radial-gradient(31rem 25rem at 52% 105%, var(--flare-b-soft) 0%, transparent 70%);
}

/* A product workspace is the largest colour surface after the hero, with a real breathing edge. */
.landing:not(.lp01) .tool-shell .section-inner {
  padding: clamp(32px, 4.4vw, 64px);
  background:
    linear-gradient(128deg, var(--surface-accent) 0%, var(--surface-muted) 52%, var(--surface-elevated) 100%);
}

.lp01 .tool-shell .section-inner {
  padding: clamp(32px, 4.4vw, 64px);
  background:
    linear-gradient(128deg, var(--surface-accent) 0%, var(--surface-muted) 54%, var(--surface-elevated) 100%);
}

/* Benefits stay one connected system, but their emphasized outcome now owns a proper coloured surface. */
.landing > .tool-shell + .section .feature:first-child,
.lp01 > .tool-shell + .section .feature:first-child,
.lp05 > .tool-shell + .section .feature:first-child,
.lp08 > .tool-shell + .section .feature:first-child,
.lp02 > .tool-shell + .section .feature:nth-child(2),
.lp06 > .tool-shell + .section .feature:nth-child(2),
.lp11 > .tool-shell + .section .feature:nth-child(2),
.lp03 > .tool-shell + .section .feature:last-child,
.lp04 > .tool-shell + .section .feature:nth-child(2),
.lp07 > .tool-shell + .section .feature:last-child,
.lp09 > .tool-shell + .section .feature:last-child,
.lp10 > .tool-shell + .section .feature:nth-child(2) {
  background: linear-gradient(145deg, var(--surface-accent) 0%, var(--surface-muted) 100%);
}

/* The process is a single coloured workspace. No individual step is left without the padding it needs. */
.landing > .case-strip:not(:has(.case-grid)) .section-inner,
.lp02 > .case-strip:not(:has(.case-grid)) .section-inner,
.lp04 > .case-strip:not(:has(.case-grid)) .section-inner,
.lp07 > .case-strip:not(:has(.case-grid)) .section-inner,
.lp08 > .case-strip:not(:has(.case-grid)) .section-inner,
.lp09 > .case-strip:not(:has(.case-grid)) .section-inner {
  padding: clamp(36px, 4.8vw, 68px);
  background:
    radial-gradient(34rem 24rem at 100% 0%, var(--flare-a-soft) 0%, transparent 68%),
    linear-gradient(135deg, var(--surface-muted) 0%, var(--surface-elevated) 66%);
}

.lp03 > .case-strip:not(:has(.case-grid)) .step:last-child,
.lp05 > .case-strip:not(:has(.case-grid)) .step:nth-child(2),
.lp10 > .case-strip:not(:has(.case-grid)) .step:first-child {
  background: transparent;
}

/* Real results get a thin, generous colour mat. It tells the visitor this is evidence, not ornament. */
.landing > .section:has(.proof-picture) .proof-picture {
  box-sizing: border-box;
  padding: clamp(6px, .8vw, 12px);
  border: 0;
  border-radius: var(--radius-editor);
  background: var(--proof-mat, var(--flare-a));
  box-shadow: 0 28px 64px rgba(18, 25, 38, .16);
}

.landing > .section:has(.proof-picture) .proof-picture img {
  border-radius: calc(var(--radius-editor) - clamp(6px, .8vw, 12px));
  background: var(--surface-dark);
}

/* Scenarios are shown as a composed pair, with colour around—not underneath—the evidence. */
.landing > .case-strip:has(.case-grid) .case-grid {
  gap: clamp(5px, .65vw, 10px);
  padding: clamp(5px, .65vw, 10px);
  background: linear-gradient(135deg, var(--flare-a), var(--flare-b));
}

.landing > .case-strip:has(.case-grid) .case {
  border-radius: calc(var(--radius-panel) - clamp(5px, .65vw, 10px));
}

/* The second scenario has a different task, not a lower-contrast text treatment. */
.landing:not(.lp01) > .case-strip:has(.case-grid) .case-grid .case:last-child {
  --case-ink: #f7f9ff;
  --case-muted: #dce8ff;
  --case-label: #b9dcff;
  background:
    linear-gradient(145deg, #10141c 0%, color-mix(in srgb, var(--flare-a) 25%, #10141c) 100%) !important;
}

/* The closing action earns a full colour atmosphere, not a near-identical dark box. */
.lp01 .final-cta .section-inner,
.lp05 .final-cta .section-inner,
.lp08 .final-cta .section-inner {
  background: linear-gradient(112deg, var(--chrome) 0%, var(--chrome) 48%, color-mix(in srgb, var(--flare-a) 42%, var(--chrome)) 100%);
}

.lp02 .final-cta .section-inner,
.lp06 .final-cta .section-inner,
.lp11 .final-cta .section-inner {
  background:
    radial-gradient(34rem 25rem at 100% 0%, var(--flare-a-soft) 0%, transparent 66%),
    linear-gradient(112deg, var(--chrome) 0%, color-mix(in srgb, var(--flare-b) 30%, var(--chrome)) 100%);
}

.lp03 .final-cta .section-inner,
.lp07 .final-cta .section-inner,
.lp09 .final-cta .section-inner {
  background:
    radial-gradient(30rem 24rem at -2% 100%, var(--flare-b-soft) 0%, transparent 68%),
    linear-gradient(112deg, var(--chrome) 0%, color-mix(in srgb, var(--flare-a) 34%, var(--chrome)) 100%);
}

.lp04 .final-cta .section-inner,
.lp10 .final-cta .section-inner {
  background:
    radial-gradient(32rem 24rem at 100% 8%, var(--flare-b-soft) 0%, transparent 67%),
    linear-gradient(112deg, var(--chrome) 0%, color-mix(in srgb, var(--flare-a) 36%, var(--chrome)) 100%);
}

@media (max-width: 760px) {
  .landing .hero::before {
    background:
      radial-gradient(24rem 18rem at 100% 0%, var(--flare-a-soft) 0%, transparent 66%),
      radial-gradient(20rem 16rem at 20% 100%, var(--flare-b-soft) 0%, transparent 72%);
  }

  .landing:not(.lp01) .tool-shell .section-inner,
  .lp01 .tool-shell .section-inner,
  .landing > .case-strip:not(:has(.case-grid)) .section-inner {
    padding: 26px 20px;
  }

  .lp01 .tool-shell .section-inner {
    padding: 0;
    background: transparent;
  }

  .landing > .section:has(.proof-picture) .proof-picture {
    padding: 5px;
  }

  .landing > .section:has(.proof-picture) .proof-picture img {
    border-radius: calc(var(--radius-editor) - 5px);
  }
}

/* v65: the colour needs to own real space, not disappear behind a product shot.
   One liquid field and one contour frame every product proof; all copy remains on a calm, high-contrast layer. */
.landing {
  --flow-outline: color-mix(in srgb, var(--flare-a) 76%, var(--white));
  --flow-fill-a: color-mix(in srgb, var(--flare-a) 66%, var(--white));
  --flow-fill-b: color-mix(in srgb, var(--flare-b) 62%, var(--white));
  --flow-surface-a: color-mix(in srgb, var(--flare-a) 48%, var(--white));
  --flow-surface-b: color-mix(in srgb, var(--flare-b) 43%, var(--white));
}

.landing .hero {
  isolation: isolate;
  background:
    radial-gradient(72% 118% at -13% 101%, color-mix(in srgb, var(--flare-b) 38%, var(--white)) 0%, transparent 74%),
    radial-gradient(64% 112% at 102% -18%, color-mix(in srgb, var(--flare-a) 34%, var(--white)) 0%, transparent 74%),
    linear-gradient(116deg, var(--flow-surface-a) 0%, color-mix(in srgb, var(--scene) 62%, var(--white)) 43%, var(--flow-surface-b) 100%) !important;
}

.landing .hero-inner {
  position: relative;
  z-index: 1;
}

.landing .hero::before {
  content: "" !important;
  display: block !important;
  top: clamp(24px, 3vw, 56px);
  right: clamp(-150px, -9vw, -70px);
  bottom: auto;
  left: auto;
  z-index: 0;
  width: min(84vw, 1220px);
  height: clamp(490px, 52vw, 780px);
  border-radius: 62% 38% 53% 47% / 45% 61% 39% 55%;
  background: linear-gradient(130deg, var(--flow-fill-a) 0%, var(--flow-fill-b) 100%);
  opacity: .94;
  transform: translate(var(--flow-x), var(--flow-y)) rotate(var(--flow-turn));
}

.landing .hero::after {
  content: "" !important;
  display: block !important;
  top: clamp(16px, 2.6vw, 46px);
  right: clamp(-172px, -10vw, -88px);
  bottom: auto;
  left: auto;
  z-index: 0;
  width: min(92vw, 1320px);
  height: clamp(545px, 57vw, 860px);
  border: 2px solid var(--flow-outline);
  border-radius: 42% 58% 65% 35% / 57% 39% 61% 43%;
  background: transparent;
  opacity: .98;
  transform: rotate(calc(var(--flow-turn) * -.72));
}

/* The scroll rhythm gets full colour fields too: evidence stays crisp, the surrounding surface does the branding. */
.landing > .tool-shell + .section,
.landing > .section:has(.proof-picture),
.landing > .case-strip:has(.case-grid) {
  background:
    radial-gradient(76% 122% at -16% 58%, color-mix(in srgb, var(--flare-a) 39%, var(--white)) 0%, transparent 70%),
    radial-gradient(72% 124% at 113% 39%, color-mix(in srgb, var(--flare-b) 37%, var(--white)) 0%, transparent 70%),
    linear-gradient(118deg, var(--flow-surface-a) 0%, color-mix(in srgb, var(--surface-primary) 84%, var(--white)) 50%, var(--flow-surface-b) 100%);
}

.landing > .tool-shell + .section::before,
.landing > .section:has(.proof-picture)::before,
.landing > .case-strip:has(.case-grid)::before {
  content: "";
  z-index: 0;
  width: min(52vw, 730px);
  height: min(44vw, 610px);
  top: 8%;
  right: -8vw;
  border: 2px solid var(--flow-outline);
  border-radius: 60% 40% 48% 52% / 42% 59% 41% 58%;
  background: linear-gradient(143deg, var(--flow-fill-a) 0%, var(--flow-fill-b) 100%);
  opacity: .74;
}

@media (max-width: 760px) {
  .landing .hero {
    background:
      radial-gradient(94% 76% at 100% 100%, color-mix(in srgb, var(--flare-b) 37%, var(--white)) 0%, transparent 76%),
      linear-gradient(155deg, var(--flow-surface-a) 0%, color-mix(in srgb, var(--scene) 66%, var(--white)) 49%, var(--flow-surface-b) 100%) !important;
  }

  .landing .hero::before {
    top: auto;
    right: -126px;
    bottom: -118px;
    width: 470px;
    height: 392px;
    opacity: .82;
  }

  .landing .hero::after {
    top: auto;
    right: -152px;
    bottom: -144px;
    width: 530px;
    height: 440px;
    opacity: .8;
  }

  .landing > .tool-shell + .section::before,
  .landing > .section:has(.proof-picture)::before,
  .landing > .case-strip:has(.case-grid)::before {
    top: auto;
    right: -148px;
    bottom: -126px;
    width: 374px;
    height: 326px;
    opacity: .58;
  }

  /* Keep the new colour fields spacious without allowing balanced display copy to overrun a narrow gutter. */
  .landing .hero-copy {
    min-width: 0;
  }

  .landing .hero-copy h1 {
    max-inline-size: 13ch;
    text-wrap: pretty;
  }
}

/* v66 hero composition reset.
   The previous liquid form was visually louder than the offer: its hard
   contour crossed the reading area and made the first impression feel like a
   decorative poster instead of a product landing. Colour now lives in a
   single controlled surface behind the copy, while the editor proof carries
   the visual drama. Every route still inherits its own task-specific tint. */
.landing .hero {
  isolation: isolate;
  background: linear-gradient(
    118deg,
    var(--scene) 0%,
    color-mix(in srgb, var(--scene) 78%, var(--white)) 53%,
    color-mix(in srgb, var(--scene-strong) 62%, var(--white)) 100%
  ) !important;
}

.landing .hero::before,
.landing .hero::after {
  content: none !important;
  display: none !important;
}

/* Browsers without colour-mix keep the same calm task tint instead of
   falling back to a bright generic gradient. */
@supports not (background: color-mix(in srgb, #000 50%, #fff)) {
  .landing .hero {
    background: linear-gradient(118deg, var(--scene) 0%, var(--scene) 58%, var(--scene-strong) 100%) !important;
  }
}

/* v67 public interface contrast pass.
   Production documents do not inherit the review page's anchor reset.  Keep
   the shared chrome deliberately authored: no browser underlines in the
   navigation, dark editorial type on light task surfaces, and a darker blue
   only where the offer needs emphasis. */
.site-header a,
.site-footer a {
  text-decoration: none;
}

.site-header .donor-nav a {
  color: #d5d7dc;
  text-decoration: none;
}

.site-header .lp01-head-actions a,
.site-header .lp01-mobile-launch {
  color: #fff;
  text-decoration: none;
}

.landing .hero :is(h1, .lede, .helper) {
  color: #10141c !important;
}

.landing .hero .lede {
  color: #29384c !important;
}

.landing .hero .helper {
  color: #42536a !important;
}

.lp01 h1 em {
  color: var(--accent-label) !important;
}

/* v73 composition system: media grows with the composition, never with a
   leftover flex gap. These rules deliberately target shared layout roles so
   every route receives the same wide-screen behaviour. */
:root {
  --composition-max: 1440px;
  --composition-gap: clamp(32px, 4vw, 64px);
  --media-radius: 20px;
}

.nav,
.hero-inner,
.section-inner,
.footer-inner {
  inline-size: min(var(--composition-max), calc(100% - (var(--gutter) * 2)));
}

/* A hero stays a two-part composition: concise proposition plus a dominant
   product proof. The reversed routes only change reading direction, not the
   visual weight of their media. */
.landing .hero-inner,
.lp01 .hero-inner,
.lp03 .hero-inner,
.lp04 .hero-inner,
.lp06 .hero-inner,
.lp08 .hero-inner,
.lp09 .hero-inner,
.lp10 .hero-inner {
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: var(--composition-gap);
}

.lp02 .hero-inner,
.lp05 .hero-inner,
.lp07 .hero-inner,
.lp11 .hero-inner {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: var(--composition-gap);
}

.landing .hero-copy,
.landing .hero-visual,
.landing .hero-stage,
.landing .tool-copy,
.landing .demo,
.landing .proof-picture,
.landing .case,
.landing .case-grid {
  min-inline-size: 0;
}

.landing .hero-copy {
  inline-size: 100%;
  max-inline-size: 36rem;
}

.landing .hero-visual,
.landing .hero-stage {
  inline-size: 100%;
  min-block-size: 0 !important;
  aspect-ratio: var(--hero-ratio, 3 / 2);
}

/* LP-08 and LP-10 previously kept an editorial overlay from an early
   prototype. On wide monitors that made the visual span both grid columns
   while the copy still occupied the first one. Reset the explicit placement
   so these routes obey the same readable text-to-media proportion as the
   other nine pages. */
.lp08 .hero-copy,
.lp10 .hero-copy {
  grid-column: 1;
  grid-row: 1;
}

.lp08 .hero-visual,
.lp10 .hero-visual {
  grid-column: 2;
  grid-row: 1;
}

.lp10 .hero-copy {
  display: block;
}

.lp10 .hero-copy :is(h1, .lede, .actions, .helper) {
  grid-column: auto;
  grid-row: auto;
}

/* LP-08 also retained a three-row overlay grid. Its 80px/auto/30px tracks
   pulled the now-normal copy above the clipped hero. Make the vertical rhythm
   match the shared two-column composition instead of merely repairing width. */
.lp08 .hero-inner {
  grid-template-rows: minmax(0, 1fr);
  min-block-size: 700px;
  padding-block: 58px 64px;
  align-items: center;
}

.lp08 .hero-copy {
  align-self: center;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.lp08 .hero-visual {
  min-block-size: 0 !important;
  align-self: center;
}

/* Product demonstrations carry more width than their explanatory copy. The
   inner panel can grow, but the gap remains a deliberate relationship. */
.landing .tool-grid {
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 3.6vw, 56px);
}

.landing .tool-copy {
  max-inline-size: 34rem;
}

.landing .demo {
  inline-size: 100%;
}

/* Interface and photographic proof use their own wrappers. The wrapper owns
   width; the visual fills it without any fixed media width or auto margins. */
.landing .proof-picture {
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: 0;
  border-radius: var(--media-radius);
}

.landing .proof-picture img,
.landing .demo-proof,
.landing .before-after,
.landing .before-after img {
  display: block;
  inline-size: 100%;
  max-inline-size: none;
}

.landing .demo-proof {
  block-size: auto;
  aspect-ratio: 3 / 2;
}

/* Case pairs are full-width evidence surfaces, not two fixed cards pushed to
   opposite edges. */
.landing > .case-strip:has(.case-grid) .case-grid {
  inline-size: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1120px) {
  .landing .hero-inner,
  .lp01 .hero-inner,
  .lp02 .hero-inner,
  .lp03 .hero-inner,
  .lp04 .hero-inner,
  .lp05 .hero-inner,
  .lp06 .hero-inner,
  .lp07 .hero-inner,
  .lp08 .hero-inner,
  .lp09 .hero-inner,
  .lp10 .hero-inner,
  .lp11 .hero-inner,
  .landing .tool-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing .hero-inner { gap: clamp(28px, 5vw, 48px); }

  .lp02 .hero-copy,
  .lp05 .hero-copy,
  .lp07 .hero-copy,
  .lp08 .hero-copy,
  .lp10 .hero-copy,
  .lp11 .hero-copy { grid-column: 1; grid-row: 1; }

  .lp02 .hero-visual,
  .lp05 .hero-visual,
  .lp07 .hero-visual,
  .lp08 .hero-visual,
  .lp10 .hero-visual,
  .lp11 .hero-visual { grid-column: 1; grid-row: 2; }

  .landing .hero-copy,
  .landing .tool-copy { max-inline-size: 44rem; }
}

@media (max-width: 760px) {
  .nav,
  .hero-inner,
  .section-inner,
  .footer-inner {
    inline-size: min(var(--composition-max), calc(100% - (var(--gutter) * 2))) !important;
  }

  .landing .hero-copy,
  .landing .tool-copy { max-inline-size: none; }

  .landing .hero-visual,
  .landing .hero-stage { border-radius: 16px; }

  .landing > .case-strip:has(.case-grid) .case-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* v75: a working surface owns its foreground contract.
   The earlier colour pass brightened LP-01's panel but left inverse copy from
   its former dark stage in place. Keep every light workspace ink-led, and
   make LP-01's intentionally dark workspace an explicit inverse exception. */
.landing .tool-shell .section-inner {
  box-sizing: border-box;
  padding: clamp(44px, 5.2vw, 76px);
  color: var(--ink);
}

.landing .tool-shell .tool-copy h2 {
  color: var(--ink) !important;
}

.landing .tool-shell .tool-copy p {
  color: #29384c !important;
}

.landing.lp01 .tool-shell .section-inner {
  background:
    radial-gradient(32rem 24rem at 100% 0%, color-mix(in srgb, var(--flare-a) 24%, transparent) 0%, transparent 68%),
    linear-gradient(132deg, #10141c 0%, #162336 58%, #1b3150 100%) !important;
  color: #fff;
}

.landing.lp01 .tool-shell .tool-copy h2 {
  color: #fff !important;
}

.landing.lp01 .tool-shell .tool-copy p {
  color: #d5e4f8 !important;
}

@media (max-width: 760px) {
  .landing .tool-shell .section-inner,
  .landing.lp01 .tool-shell .section-inner {
    padding: 28px 22px;
    border-radius: 18px;
  }
}

/* v76: wide viewports are their own composition, not an oversized laptop.
   The proposition keeps a calm reading measure while visual proof receives
   the extra canvas. Shared containers deliberately expand together so the
   header, hero, sections and footer retain one vertical axis on every route. */
@media (min-width: 1441px) {
  :root {
    --composition-max: 1680px;
    --composition-gap: clamp(52px, 4vw, 76px);
    --wide-gutter: clamp(32px, 3vw, 72px);
  }

  .nav,
  .hero-inner,
  .section-inner,
  .footer-inner {
    inline-size: min(var(--composition-max), calc(100% - (var(--wide-gutter) * 2))) !important;
    width: min(var(--composition-max), calc(100% - (var(--wide-gutter) * 2))) !important;
    margin-inline: auto !important;
  }

  /* These wrappers carried their own desktop gutter from the early layout.
     On a wide canvas that created a second, invisible inset around sections
     and made their left edge drift away from the hero and navigation. */
  .landing > :is(.section, .case-strip, .tool-shell),
  .site-footer {
    padding-inline: 0 !important;
  }

  .landing .hero-inner,
  .lp01 .hero-inner,
  .lp03 .hero-inner,
  .lp04 .hero-inner,
  .lp06 .hero-inner,
  .lp08 .hero-inner,
  .lp09 .hero-inner,
  .lp10 .hero-inner {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: var(--composition-gap);
  }

  .lp02 .hero-inner,
  .lp05 .hero-inner,
  .lp07 .hero-inner,
  .lp11 .hero-inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: var(--composition-gap);
  }

  .landing .hero-copy { max-inline-size: 39rem; }

  .landing .tool-grid {
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    gap: clamp(40px, 3.5vw, 64px);
  }

  .landing .tool-copy { max-inline-size: 35rem; }
  .landing .tool-shell .section-inner { padding: clamp(56px, 4.8vw, 84px); }
}

@media (min-width: 1920px) {
  :root {
    --composition-max: 1800px;
    --composition-gap: clamp(64px, 4vw, 84px);
  }
}

/* v77: the process is a sequence, not three full-width paragraphs.
   The preview page supplied `display: grid` in its private reset, while the
   published documents only received this stylesheet. Declare the layout here
   so the actual site cannot silently fall back to ordinary block flow. */
@media (min-width: 1081px) {
  .landing > .case-strip:not(:has(.case-grid)) .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .landing > .case-strip:not(:has(.case-grid)) .step,
  .landing > .case-strip:not(:has(.case-grid)) .step + .step {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-block: clamp(28px, 2.4vw, 40px);
  }

  .landing > .case-strip:not(:has(.case-grid)) .step h3 {
    max-inline-size: 17ch;
    margin-bottom: 18px;
  }

  .landing > .case-strip:not(:has(.case-grid)) .step p {
    max-inline-size: 29ch;
    margin: auto 0 0;
  }
}

/* v78: production grid contracts.
   The preview document has a private display reset, but public routes load
   only this stylesheet. A grid template without `display: grid` is ignored,
   which made evidence cards and case pairs fall back to oversized blocks.
   Keep each layout role explicit here so no page depends on preview-only CSS. */
.landing .gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(18px, 1.8vw, 28px);
  align-items: stretch;
}

.landing .gallery-stack {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 28px);
  min-inline-size: 0;
}

.landing .gallery > *,
.landing .gallery-stack > * {
  min-inline-size: 0;
}

.landing > .case-strip:has(.case-grid) .case-grid,
.landing .faq,
.site-footer .footer-inner {
  display: grid;
}

@media (max-width: 760px) {
  .landing .gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing .gallery-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
}

@media (max-width: 420px) {
  .landing .gallery-stack {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* v79: the publication case must retain the person, not crop through her face.
   On a shallow wide card `cover` trims the vertical source substantially;
   bias the focal point upward so the portrait lands inside the visible frame. */
.landing.lp01 .case:last-child::before {
  background-position: 66% 20% !important;
}

@media (max-width: 760px) {
  .landing.lp01 .case:last-child::before {
    background-position: 69% 20% !important;
  }
}

/* v80: every process is a visible route, never a blank worksheet.
   The old column treatment relied on borders and whitespace alone, which made
   the three actions read as stray copy on wide displays. */
.landing > .case-strip:not(:has(.case-grid)) .steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  align-items: stretch;
  border: 0;
}

.landing > .case-strip:not(:has(.case-grid)) .step,
.landing > .case-strip:not(:has(.case-grid)) .step + .step {
  display: flex;
  flex-direction: column;
  min-height: clamp(264px, 20vw, 330px);
  margin: 0;
  padding: clamp(24px, 2.25vw, 38px) !important;
  overflow: hidden;
  border: 1px solid rgba(37, 82, 137, .16);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(238, 246, 255, .88));
  box-shadow: 0 18px 38px rgba(41, 81, 132, .10);
}

.landing > .case-strip:not(:has(.case-grid)) .step::before {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 0 clamp(30px, 3vw, 52px);
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  box-shadow: 0 10px 20px rgba(19, 104, 234, .24);
}

.landing > .case-strip:not(:has(.case-grid)) .step h3 {
  max-width: 16ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(25px, 2vw, 34px);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.landing > .case-strip:not(:has(.case-grid)) .step p {
  max-width: 31ch;
  margin: auto 0 0;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.42;
}

.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2) {
  border-color: rgba(102, 162, 255, .38);
  background:
    radial-gradient(22rem 16rem at 100% 0%, color-mix(in srgb, var(--flare-a) 58%, transparent), transparent 70%),
    linear-gradient(145deg, #111c31 0%, #172b4c 100%);
  box-shadow: 0 22px 48px rgba(15, 37, 73, .22);
}

.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2)::before {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 10px 24px rgba(4, 11, 24, .24);
}

.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2) h3 {
  color: #fff;
}

.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2) p {
  color: #d7e6fd;
}

.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(3) {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--flare-a) 14%, #fff), rgba(255, 255, 255, .98));
}

@media (max-width: 760px) {
  .landing > .case-strip:not(:has(.case-grid)) .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .landing > .case-strip:not(:has(.case-grid)) .step,
  .landing > .case-strip:not(:has(.case-grid)) .step + .step {
    min-height: 220px;
    padding: 24px !important;
    border: 1px solid rgba(37, 82, 137, .16);
    border-radius: 18px;
  }

  .landing > .case-strip:not(:has(.case-grid)) .step::before {
    width: 40px;
    height: 40px;
    margin-bottom: 28px;
  }
}

/* v81: LP-01 supporting proofs must carry visual evidence on wide layouts.
   These cards formerly held two lines of copy inside full-height colour fields,
   so the gallery felt unfinished beside the editor proof. Each claim now has
   its own purpose-made digital scene; the copy remains over a controlled dark
   gradient so it stays legible at every desktop width. */
.lp01 #lp01-examples .support-proof {
  display: none;
}

@media (min-width: 761px) {
  .landing.lp01 #lp01-examples .gallery-stack .visual-card {
    isolation: isolate;
    border: 1px solid rgba(76, 159, 255, .48);
    border-radius: 20px;
    background-color: #091326 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    box-shadow: 0 20px 42px rgba(9, 22, 48, .18);
  }

  .landing.lp01 #lp01-examples .gallery-stack .visual-card::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(3, 9, 22, .64) 0%, rgba(3, 9, 22, .24) 58%, rgba(3, 9, 22, .04) 100%),
      linear-gradient(0deg, rgba(3, 9, 22, .86) 0%, rgba(3, 9, 22, .04) 72%);
  }

  .landing.lp01 #lp01-examples .gallery-stack .support-proof {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  .landing.lp01 #lp01-examples .gallery-stack .crop-detail .support-proof {
    object-position: 100% 50%;
  }

  .landing.lp01 #lp01-examples .gallery-stack .crop-result .support-proof {
    object-position: 60% 52%;
  }

  .landing.lp01 #lp01-examples .gallery-stack .visual-card:first-child {
    background-image: url("assets/lp01-proof-mask-hairdryer-v1.png") !important;
    background-position: 78% 50% !important;
  }

  .landing.lp01 #lp01-examples .gallery-stack .visual-card:last-child {
    background-image: url("assets/lp01-proof-color-perfume-v1.png") !important;
    background-position: 72% 52% !important;
  }

  .landing.lp01 #lp01-examples .gallery-stack .proof-copy,
  .landing.lp01 #lp01-examples .gallery-stack .proof-copy p {
    position: relative;
    z-index: 1;
  }

  .landing.lp01 #lp01-examples .gallery-stack .proof-copy p {
    max-inline-size: 18ch;
    color: rgba(235, 243, 255, .82);
    text-shadow: 0 2px 16px rgba(0, 0, 0, .4);
  }

  .landing.lp01 #lp01-examples .gallery-stack .proof-copy strong {
    max-inline-size: 13ch;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .42);
  }
}

/* v82: LP-01 scenario cards keep proof and copy in separate physical zones.
   Product details never sit on the appliance; publication copy never crosses a face. */
.landing.lp01 .case-grid .case-product-card,
.landing.lp01 .case-grid .case-publication-card {
  display: grid;
  min-height: clamp(300px, 24vw, 360px);
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(57, 140, 247, .42);
  border-radius: 18px;
  background: #0a1323 !important;
  box-shadow: 0 22px 46px rgba(13, 38, 74, .16);
}

.landing.lp01 .case-grid .case-product-card {
  grid-template-columns: minmax(0, 1.17fr) minmax(236px, .83fr);
}

.landing.lp01 .case-grid .case-publication-card {
  grid-template-columns: minmax(208px, .76fr) minmax(0, 1.24fr);
}

.landing.lp01 .case-grid .case-product-card::before,
.landing.lp01 .case-grid .case-product-card::after,
.landing.lp01 .case-grid .case-publication-card::before,
.landing.lp01 .case-grid .case-publication-card::after {
  display: none !important;
}

.landing.lp01 .case-grid .case-product-visual,
.landing.lp01 .case-grid .case-publication-visual {
  min-width: 0;
  min-height: 100%;
  background-color: #07162e;
  background-repeat: no-repeat;
  background-size: cover;
}

.landing.lp01 .case-grid .case-product-visual {
  background-image: url("assets/lp01-case-espresso-v2-1536.webp");
  background-position: 100% 50%;
}

.landing.lp01 .case-grid .case-publication-visual {
  background-image: url("assets/lp01-case-publication-v2-1536.webp");
  background-position: 80% 20%;
}

.landing.lp01 .case-grid .product-listing,
.landing.lp01 .case-grid .case-publication-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: clamp(22px, 2.2vw, 32px);
  border: 0;
  border-radius: 0;
  background: #0d1728;
  box-shadow: none;
}

.landing.lp01 .case-grid .product-listing::before,
.landing.lp01 .case-grid .case-publication-copy::before {
  width: 34px;
  height: 3px;
  margin-bottom: 20px;
  border-radius: 99px;
  background: #1473e6;
  content: "";
}

.landing.lp01 .case-grid .product-listing h3,
.landing.lp01 .case-grid .case-publication-copy h3 {
  max-width: none;
  margin: 0 0 12px;
  color: #fff !important;
  font-size: clamp(23px, 1.8vw, 29px);
  line-height: 1.06;
  letter-spacing: -.035em;
  text-shadow: none !important;
}

.landing.lp01 .case-grid .product-listing h3 {
  font-size: clamp(21px, 1.55vw, 24px);
  line-height: 1.1;
}

.landing.lp01 .case-grid .product-listing__eyebrow,
.landing.lp01 .case-grid .product-listing__details,
.landing.lp01 .case-grid .case-publication-copy span,
.landing.lp01 .case-grid .case-publication-copy p {
  margin: 0;
  color: #c8d9f2 !important;
  font-size: 14px;
  line-height: 1.42;
  text-shadow: none !important;
}

.landing.lp01 .case-grid .case-publication-copy span {
  margin-bottom: 16px;
  padding: 0;
  background: transparent;
  font-weight: 750;
}

.landing.lp01 .case-grid .case-publication-copy p {
  max-inline-size: 25ch;
}

.landing.lp01 .case-grid .product-listing__price {
  margin-top: auto;
  padding-top: 18px;
}

.landing.lp01 .case-grid .product-listing__price strong {
  font-size: clamp(22px, 1.75vw, 27px);
}

@media (max-width: 760px) {
  .landing.lp01 .case-grid .case-product-card,
  .landing.lp01 .case-grid .case-publication-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0 !important;
  }

  .landing.lp01 .case-grid .case-product-visual,
  .landing.lp01 .case-grid .case-publication-visual {
    min-height: 244px;
  }

  .landing.lp01 .case-grid .case-product-visual {
    background-image: url("assets/lp01-case-espresso-v2-768.webp");
    background-position: 100% 50%;
  }

  .landing.lp01 .case-grid .case-publication-visual {
    background-image: url("assets/lp01-case-publication-v2-768.webp");
    background-position: 80% 20%;
  }

  .landing.lp01 .case-grid .product-listing,
  .landing.lp01 .case-grid .case-publication-copy {
    min-height: 222px;
    padding: 24px;
  }

  .landing.lp01 .case-grid .product-listing::before,
  .landing.lp01 .case-grid .case-publication-copy::before {
    margin-bottom: 16px;
  }

  .landing.lp01 .case-grid .product-listing h3,
  .landing.lp01 .case-grid .case-publication-copy h3 {
    font-size: 27px;
  }
}

/* v85: on a phone the publication proof leads with the finished portrait.
   Copy follows as a distinct caption panel, so neither the copy nor a split
   crop competes with the subject's face. */
@media (max-width: 760px) {
  .landing.lp01 .case-grid .case-publication-card {
    grid-template-rows: minmax(300px, 1fr) auto;
  }

  .landing.lp01 .case-grid .case-publication-visual {
    order: -1;
    min-height: clamp(300px, 84vw, 368px);
    background-image: url("assets/lp01-case-publication-v2-1536.webp");
    background-position: 74% 18%;
  }

  .landing.lp01 .case-grid .case-publication-copy {
    min-height: 0;
    padding: 22px 24px 26px;
    border-top: 3px solid #1473e6;
  }

  .landing.lp01 .case-grid .case-publication-copy::before {
    margin-bottom: 12px;
  }
}

/* v83: LP-01 hero is a product canvas, not a flat colour field.
   The accents echo a live selection area in the editor while preserving a clear
   reading plane for the offer and a distinct proof frame below. */
.landing.lp01 .hero {
  background:
    radial-gradient(42rem 31rem at 92% 18%, rgba(26, 136, 255, .48) 0%, rgba(106, 193, 255, .22) 42%, transparent 73%),
    radial-gradient(34rem 28rem at 4% 94%, rgba(91, 158, 255, .28) 0%, transparent 72%),
    linear-gradient(136deg, #f5f9ff 0%, #e5f0ff 37%, #cfeaff 68%, #effbff 100%) !important;
}

.landing.lp01 .hero::before {
  position: absolute;
  z-index: 0;
  top: clamp(-72px, -4vw, -28px);
  right: clamp(-190px, -11vw, -82px);
  width: min(68vw, 980px);
  height: clamp(430px, 48vw, 720px);
  border: 2px solid rgba(19, 115, 230, .58);
  border-radius: 56% 44% 48% 52% / 43% 55% 45% 57%;
  background:
    radial-gradient(55% 62% at 35% 40%, rgba(255, 255, 255, .66) 0%, rgba(210, 238, 255, .2) 56%, transparent 100%),
    linear-gradient(134deg, rgba(92, 177, 255, .44) 0%, rgba(41, 127, 242, .28) 48%, rgba(168, 231, 255, .36) 100%);
  box-shadow: 0 32px 70px rgba(27, 104, 199, .2);
  opacity: .88;
  transform: rotate(-12deg);
  content: "" !important;
  display: block !important;
}

.landing.lp01 .hero::after {
  position: absolute;
  z-index: 0;
  top: clamp(36px, 7vw, 110px);
  right: clamp(24px, 7vw, 132px);
  width: min(47vw, 690px);
  height: clamp(300px, 33vw, 520px);
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 44% 56% 52% 48% / 59% 42% 58% 41%;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(17, 105, 222, .16);
  opacity: .88;
  transform: rotate(9deg);
  content: "" !important;
  display: block !important;
}

.landing.lp01 .hero-stage {
  box-shadow: 0 34px 76px rgba(14, 64, 143, .26), 0 0 0 10px rgba(255, 255, 255, .24);
}

@media (max-width: 1120px) {
  .landing.lp01 .hero::before {
    top: 16%;
    right: -26vw;
    width: min(92vw, 820px);
    height: clamp(380px, 62vw, 590px);
    opacity: .68;
  }

  .landing.lp01 .hero::after {
    top: auto;
    right: -8vw;
    bottom: 6%;
    width: min(76vw, 650px);
    height: clamp(270px, 44vw, 430px);
    opacity: .72;
  }
}

@media (max-width: 760px) {
  .landing.lp01 .hero {
    background:
      radial-gradient(29rem 24rem at 104% 9%, rgba(26, 136, 255, .5) 0%, rgba(133, 213, 255, .18) 48%, transparent 74%),
      radial-gradient(24rem 22rem at -14% 92%, rgba(101, 165, 255, .28) 0%, transparent 74%),
      linear-gradient(158deg, #f5f9ff 0%, #e2efff 49%, #d4f2ff 100%) !important;
  }

  .landing.lp01 .hero::before {
    top: 6%;
    right: -44vw;
    width: 122vw;
    height: 94vw;
    border-width: 1px;
    opacity: .56;
  }

  .landing.lp01 .hero::after {
    right: -20vw;
    bottom: 5%;
    width: 88vw;
    height: 58vw;
    border-width: 1px;
    opacity: .72;
  }

  .landing.lp01 .hero-stage {
    box-shadow: 0 22px 48px rgba(14, 64, 143, .24), 0 0 0 6px rgba(255, 255, 255, .26);
  }
}

/* v84: the three-step route is a colour field in its own right.
   The steps remain clear work cards, while the surrounding stage now carries
   the direction and energy of a digital editing flow on every landing. */
.landing > .case-strip:not(:has(.case-grid)) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(44rem 33rem at -8% 116%, color-mix(in srgb, var(--flare-b) 36%, transparent) 0%, transparent 72%),
    radial-gradient(46rem 31rem at 104% -10%, color-mix(in srgb, var(--flare-a) 46%, transparent) 0%, transparent 72%),
    linear-gradient(128deg, var(--surface-primary) 0%, var(--surface-secondary) 48%, var(--surface-muted) 100%);
}

.landing > .case-strip:not(:has(.case-grid))::before {
  position: absolute;
  z-index: -1;
  top: clamp(16px, 2.6vw, 46px);
  right: clamp(-230px, -14vw, -84px);
  width: min(48vw, 740px);
  height: min(38vw, 580px);
  border: 1px solid color-mix(in srgb, var(--flare-a) 76%, var(--white));
  border-radius: 57% 43% 48% 52% / 45% 55% 45% 55%;
  background:
    radial-gradient(62% 72% at 33% 62%, rgba(255,255,255,.76) 0%, transparent 70%),
    linear-gradient(138deg, color-mix(in srgb, var(--flare-a) 68%, transparent), color-mix(in srgb, var(--flare-b) 54%, transparent));
  box-shadow: 0 30px 72px color-mix(in srgb, var(--flare-a) 22%, transparent);
  content: "";
  transform: rotate(-13deg);
}

.landing > .case-strip:not(:has(.case-grid))::after {
  position: absolute;
  z-index: -1;
  right: clamp(5%, 9vw, 16%);
  bottom: clamp(-140px, -8vw, -58px);
  width: min(58vw, 880px);
  height: min(24vw, 370px);
  border: 2px solid color-mix(in srgb, var(--flare-b) 72%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.56);
  content: "";
  opacity: .72;
  transform: rotate(10deg);
}

.landing > .case-strip:not(:has(.case-grid)) .section-inner {
  position: relative;
  z-index: 1;
  background:
    radial-gradient(38rem 21rem at 100% 0%, color-mix(in srgb, var(--flare-a) 24%, transparent) 0%, transparent 72%),
    linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.76) 100%) !important;
  box-shadow: 0 28px 66px rgba(24, 61, 110, .12);
}

.landing > .case-strip:not(:has(.case-grid)) .section-head {
  position: relative;
  padding-bottom: clamp(18px, 2.1vw, 28px);
  border-bottom: 1px solid color-mix(in srgb, var(--flare-a) 38%, rgba(21,31,47,.16));
}

.landing > .case-strip:not(:has(.case-grid)) .section-head::after {
  display: block;
  width: clamp(62px, 7vw, 112px);
  height: 5px;
  margin-top: clamp(16px, 1.8vw, 24px);
  border-radius: 99px;
  background: linear-gradient(90deg, var(--flare-a), var(--flare-b));
  content: "";
}

@media (max-width: 760px) {
  .landing > .case-strip:not(:has(.case-grid))::before {
    top: -42px;
    right: -180px;
    width: 410px;
    height: 320px;
    opacity: .7;
  }

  .landing > .case-strip:not(:has(.case-grid))::after {
    right: -120px;
    bottom: -94px;
    width: 430px;
    height: 170px;
    border-width: 1px;
  }

  .landing > .case-strip:not(:has(.case-grid)) .section-inner {
    background:
      radial-gradient(24rem 16rem at 100% 0%, color-mix(in srgb, var(--flare-a) 24%, transparent) 0%, transparent 74%),
      rgba(255,255,255,.86) !important;
  }
}

/* v86: LP-03 uses a violet-to-blue creation atmosphere. It retains Photoshop
   blue for action but removes the accidental blue-on-green palette collision. */
.landing.lp03 {
  --scene: #f0efff;
  --scene-strong: #d5ceff;
  --flare-a: #775cff;
  --flare-b: #42b9ff;
  --flare-a-soft: rgba(119, 92, 255, .30);
  --flare-b-soft: rgba(66, 185, 255, .26);
  --accent-label: #5742c7;
}

.landing.lp03 > .section:has(.faq) {
  background: #f4f3ff;
}

.landing.lp03 > .section:has(.faq) .faq {
  background: linear-gradient(135deg, #f9f8ff 0%, #eef2ff 100%);
}

.landing.lp03 .final-cta .section-inner {
  background:
    radial-gradient(32rem 25rem at -4% 108%, rgba(119, 92, 255, .45) 0%, transparent 69%),
    radial-gradient(28rem 22rem at 104% -8%, rgba(66, 185, 255, .36) 0%, transparent 70%),
    linear-gradient(118deg, #0c1020 0%, #17183c 52%, #2b1f68 100%);
}

/* LP-05: the colour mat and the photographic proof share one continuous edge. */
.landing.lp05 > .section:has(.proof-picture) .proof-picture {
  border-radius: var(--radius-editor, 22px);
  overflow: hidden;
}

.landing.lp05 > .section:has(.proof-picture) .proof-picture img {
  border-radius: calc(var(--radius-editor, 22px) - clamp(6px, .8vw, 12px));
}

/* LP-09: motion evidence is a single editorial frame, not a hard-edged montage. */
.landing.lp09 > .section:has(.proof-picture) .proof-picture {
  border-radius: var(--radius-editor, 22px);
  overflow: hidden;
}

.landing.lp09 > .section:has(.proof-picture) .proof-picture img {
  border-radius: calc(var(--radius-editor, 22px) - clamp(6px, .8vw, 12px));
}

/* Every photographic evidence frame shares the same soft outer contour.
   The internal before/after dividers stay square and precise. */
.landing .proof-picture,
.landing .before-after,
.landing > .case-strip:has(.case-grid) .case-grid {
  border-radius: 22px;
  overflow: hidden;
}

.landing .proof-picture {
  display: block;
  clip-path: inset(0 round 22px);
}

.landing .proof-picture > img {
  border-radius: calc(22px - clamp(6px, .8vw, 12px));
}

/* LP-02: the AI retouch entry should read as a calm, direct work surface.
   Remove the oversized decorative contour and make its actual action unmistakable. */
.lp02 .hero::before,
.lp02 .hero::after {
  display: none !important;
}

.lp02 .hero {
  background: linear-gradient(118deg, #eef5ff 0%, #dfeeff 58%, #f7fbff 100%) !important;
}

.lp02 .tool-shell .section-inner {
  background: linear-gradient(135deg, #edf5ff 0%, #dcecff 100%) !important;
}

.lp02 .tool-copy .try-editor {
  border: 1px solid #0d66d0;
  background: #1473e6;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(20, 115, 230, .22);
}

.lp02 .tool-copy .try-editor:hover,
.lp02 .tool-copy .try-editor:focus-visible {
  border-color: #0d66d0;
  background: #0d66d0;
  color: #fff !important;
}

.landing .demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.landing .demo-status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: #353942;
  color: #d8eaff;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

/* v87: LP-01 offer copy owns a distinct conversion surface.
   Decorative selection contours stay behind the product proof and never cross
   the reading column. */
.landing.lp01 .hero-copy {
  position: relative;
  max-width: 620px;
  padding: clamp(30px, 3vw, 44px);
  border: 1px solid rgba(20, 115, 230, .18);
  border-radius: var(--radius-panel);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96) 0%, rgba(247, 251, 255, .91) 100%);
  box-shadow:
    0 28px 64px rgba(31, 82, 145, .16),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px);
}

.landing.lp01 .hero-copy::before {
  position: absolute;
  top: 0;
  left: clamp(30px, 3vw, 44px);
  width: clamp(64px, 7vw, 96px);
  height: 4px;
  border-radius: 0 0 99px 99px;
  background: linear-gradient(180deg, #1473e6 0%, #55c7ff 100%);
  content: "";
}

.landing.lp01 .hero-copy .lede {
  max-width: 48ch;
  color: var(--ink-soft) !important;
}

.landing.lp01 .hero-copy .helper {
  max-width: 46ch;
  color: var(--muted) !important;
}

@media (min-width: 1121px) {
  .landing.lp01 .hero::before {
    right: clamp(-250px, -15vw, -130px);
    width: min(58vw, 900px);
  }

  .landing.lp01 .hero::after {
    right: clamp(-40px, 2vw, 40px);
    width: min(39vw, 620px);
  }
}

@media (max-width: 760px) {
  .landing.lp01 .hero-copy {
    padding: 24px 22px 26px;
    border-radius: var(--radius-panel);
    box-shadow: 0 20px 46px rgba(31, 82, 145, .14);
    backdrop-filter: blur(8px);
  }

  .landing.lp01 .hero-copy::before {
    left: 22px;
    width: 64px;
    height: 3px;
  }
}

/* v88: sections read as one continuous campaign, not stacked rectangular slides.
   Each new chapter overlaps the previous colour field with a soft rounded seam;
   the content rhythm is preserved by returning the overlap to the top padding. */
.landing {
  --section-seam-overlap: clamp(22px, 2.2vw, 34px);
  --section-seam-radius: clamp(26px, 2.6vw, 40px);
  --section-seam-inset: clamp(6px, .8vw, 14px);
}

.landing > .hero + .section,
.landing > .section + .section,
.landing > .section + .site-footer {
  position: relative;
  z-index: 2;
  width: calc(100% - (var(--section-seam-inset) * 2));
  margin-top: calc(var(--section-seam-overlap) * -1);
  margin-right: auto;
  margin-left: auto;
  border-radius: var(--section-seam-radius) var(--section-seam-radius) 0 0;
  box-shadow:
    0 -18px 44px rgba(31, 82, 145, .10),
    inset 0 1px 0 rgba(255, 255, 255, .78);
}

.landing > .hero + .section,
.landing > .section + .section {
  padding-top: calc(var(--section-y) + var(--section-seam-overlap));
}

.landing > .section + .section:has(.related),
.landing > .section + .section:has(.faq) {
  padding-top: calc(var(--section-y-tight) + var(--section-seam-overlap));
}

.landing > .section + .site-footer {
  overflow: hidden;
  padding-top: var(--section-seam-overlap);
}

@media (max-width: 760px) {
  .landing {
    --section-seam-overlap: 16px;
    --section-seam-radius: 24px;
    --section-seam-inset: 4px;
  }

  .landing > .hero + .section,
  .landing > .section + .section,
  .landing > .section + .site-footer {
    box-shadow:
      0 -12px 30px rgba(31, 82, 145, .09),
      inset 0 1px 0 rgba(255, 255, 255, .72);
  }
}

/* v89: LP-03 routes are product choices with their own visual proof, not tall
   empty text boxes. Tablet keeps all decisions comparable; phones recompose
   every route into a compact horizontal story. */
.landing.lp03 #lp03-modes .section-inner {
  background:
    radial-gradient(circle at 86% 5%, rgba(104, 89, 255, .14), transparent 34%),
    linear-gradient(135deg, #f4f1ff 0%, #fbfaff 56%, #eef4ff 100%);
}

.landing.lp03 #lp03-modes .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .7fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
}

.landing.lp03 #lp03-modes .section-head p {
  max-width: 42ch;
  margin: 0 0 4px;
  color: #4f4a66;
}

.landing.lp03 #lp03-modes .mode-panel {
  gap: clamp(12px, 1.4vw, 18px);
}

.landing.lp03 #lp03-modes .mode-card {
  display: flex;
  min-height: 0;
  padding: 12px;
  border: 1px solid rgba(91, 73, 190, .22);
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 44px rgba(75, 61, 150, .09);
}

.landing.lp03 #lp03-modes .mode-card__picture {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: #171b26;
}

.landing.lp03 #lp03-modes .mode-card__picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing.lp03 #lp03-modes .mode-card__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 22px 10px 12px;
}

.landing.lp03 #lp03-modes .mode-card__copy b {
  margin-bottom: 10px;
  color: #6657c8;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.landing.lp03 #lp03-modes .mode-card__copy h3 {
  max-width: 12ch;
  margin-bottom: 14px;
  font-size: clamp(23px, 2vw, 29px);
  line-height: 1.05;
}

.landing.lp03 #lp03-modes .mode-card__copy p {
  margin-top: auto;
  color: #4f5060;
}

@media (min-width: 641px) and (max-width: 1080px) {
  .landing.lp03 #lp03-modes .mode-panel {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .landing.lp03 #lp03-modes .mode-card {
    display: grid;
    grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr);
    align-items: stretch;
    padding: 12px;
  }

  .landing.lp03 #lp03-modes .mode-card__picture {
    height: 100%;
    min-height: 190px;
    aspect-ratio: auto;
  }

  .landing.lp03 #lp03-modes .mode-card__copy {
    justify-content: center;
    padding: 18px clamp(20px, 4vw, 40px);
  }

  .landing.lp03 #lp03-modes .mode-card__copy b {
    margin-bottom: 8px;
  }

  .landing.lp03 #lp03-modes .mode-card__copy h3 {
    max-width: none;
    margin-bottom: 10px;
    font-size: clamp(23px, 3.4vw, 31px);
  }

  .landing.lp03 #lp03-modes .mode-card__copy p {
    margin-top: 0;
    max-width: 36ch;
    font-size: clamp(15px, 2vw, 18px);
  }

}

@media (max-width: 760px) {
  .landing.lp03 #lp03-modes .section-head {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .landing.lp03 #lp03-modes .mode-panel {
    grid-template-columns: 1fr;
  }

  .landing.lp03 #lp03-modes .mode-card {
    display: grid;
    grid-template-columns: minmax(112px, 38%) minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
  }

  .landing.lp03 #lp03-modes .mode-card__picture {
    height: 100%;
    min-height: 156px;
    aspect-ratio: auto;
  }

  .landing.lp03 #lp03-modes .mode-card__copy {
    padding: 10px 6px 10px 12px;
  }

  .landing.lp03 #lp03-modes .mode-card__copy h3 {
    max-width: none;
    margin-bottom: 10px;
    font-size: 18px;
  }

  .landing.lp03 #lp03-modes .mode-card__copy p {
    font-size: 14px;
    line-height: 1.4;
  }

}

@media (max-width: 480px) {
  .landing.lp03 #lp03-modes .mode-card {
    grid-template-columns: 1fr;
  }

  .landing.lp03 #lp03-modes .mode-card__picture {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .landing.lp03 #lp03-modes .mode-card__copy {
    padding: 16px 10px 14px;
  }

  .landing.lp03 #lp03-modes .mode-card__copy h3 {
    font-size: 22px;
  }
}

/* v91: Readability comes from hierarchy and rhythm, not nested surfaces.
   These three shared editorial patterns stay intentionally flat. */
.landing > .tool-shell + .section {
  background: var(--surface-secondary);
}

.landing > .tool-shell + .section::before {
  display: none;
}

.landing > .tool-shell + .section .grid-3,
.landing > .tool-shell + .section .grid-4 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: visible;
  border: 1px solid var(--surface-line);
  border-width: 1px 0;
  border-radius: 0;
  background: transparent;
}

.landing > .tool-shell + .section .grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing > .tool-shell + .section .feature,
.landing > .tool-shell + .section .feature + .feature,
.landing > .tool-shell + .section .feature:first-child {
  min-width: 0;
  min-height: 0;
  padding: clamp(24px, 2.3vw, 34px);
  border: 0;
  border-right: 1px solid var(--surface-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.landing > .tool-shell + .section .feature:last-child {
  border-right: 0;
}

.landing > .tool-shell + .section .feature::before {
  display: none;
}

.landing > .tool-shell + .section .feature b,
.landing > .tool-shell + .section .feature:first-child b {
  display: block;
  margin: 0 0 10px;
  color: color-mix(in srgb, var(--blue) 78%, var(--ink));
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: .015em;
}

.landing > .tool-shell + .section .feature h3 {
  max-width: 15ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(21px, 1.8vw, 27px);
  line-height: 1.1;
  text-wrap: balance;
}

.landing > .tool-shell + .section .feature p {
  max-width: 34ch;
  margin: 14px 0 0;
  color: color-mix(in srgb, var(--ink) 82%, var(--scene));
  font-size: 16px;
  line-height: 1.5;
}

.landing > .case-strip:not(:has(.case-grid)) {
  background: linear-gradient(128deg, var(--surface-primary), var(--surface-secondary));
}

.landing > .case-strip:not(:has(.case-grid))::before,
.landing > .case-strip:not(:has(.case-grid))::after,
.landing > .case-strip:not(:has(.case-grid)) .section-head::after {
  display: none;
}

.landing > .case-strip:not(:has(.case-grid)) .section-inner {
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

.landing > .case-strip:not(:has(.case-grid)) .section-head {
  max-width: 760px;
  margin-bottom: clamp(26px, 3.2vw, 42px);
  padding-bottom: 0;
  border: 0;
}

.landing > .case-strip:not(:has(.case-grid)) .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--surface-line);
  border-width: 1px 0;
  background: transparent;
}

.landing > .case-strip:not(:has(.case-grid)) .step,
.landing > .case-strip:not(:has(.case-grid)) .step + .step,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2),
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(3) {
  min-width: 0;
  min-height: 0;
  padding: clamp(24px, 2.5vw, 36px);
  border: 0;
  border-right: 1px solid var(--surface-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.landing > .case-strip:not(:has(.case-grid)) .step:last-child {
  border-right: 0;
}

.landing > .case-strip:not(:has(.case-grid)) .step::before,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2)::before {
  display: block;
  margin: 0 0 18px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .08em;
}

.landing > .case-strip:not(:has(.case-grid)) .step h3,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2) h3 {
  max-width: 18ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(23px, 2.2vw, 31px);
  line-height: 1.08;
  text-wrap: balance;
}

.landing > .case-strip:not(:has(.case-grid)) .step p,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2) p {
  max-width: 36ch;
  margin: 14px 0 0;
  color: color-mix(in srgb, var(--ink) 82%, var(--scene));
  font-size: 16px;
  line-height: 1.5;
}

.landing > .section:has(.related) .section-head,
.landing > .section:has(.related) .section-inner > h2 {
  max-width: 760px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}

.landing > .section:has(.related) .related {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(20px, 2.4vw, 34px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.landing > .section:has(.related) .related a,
.landing > .section:has(.related) .related a:first-child {
  min-height: 0;
  padding: 16px 0;
  border: 1px solid var(--surface-line);
  border-width: 1px 0 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.landing > .section:has(.related) .related a:hover {
  background: transparent;
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

@media (min-width: 641px) and (max-width: 1080px) {
  .landing > .tool-shell + .section .grid-4,
  .landing > .section:has(.related) .related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing > .tool-shell + .section .grid-4 .feature:nth-child(2),
  .landing > .tool-shell + .section .grid-4 .feature:nth-child(4) {
    border-right: 0;
  }

  .landing > .tool-shell + .section .grid-4 .feature:nth-child(n + 3) {
    border-top: 1px solid var(--surface-line);
  }
}

@media (max-width: 640px) {
  .landing > .tool-shell + .section .grid-3,
  .landing > .tool-shell + .section .grid-4,
  .landing > .case-strip:not(:has(.case-grid)) .steps,
  .landing > .section:has(.related) .related {
    grid-template-columns: 1fr;
  }

  .landing > .tool-shell + .section .feature,
  .landing > .tool-shell + .section .feature + .feature,
  .landing > .tool-shell + .section .feature:first-child {
    padding: 20px 0;
    border-right: 0;
    border-top: 1px solid var(--surface-line);
  }

  .landing > .tool-shell + .section .feature:first-child {
    border-top: 0;
  }

  .landing > .tool-shell + .section .feature h3,
  .landing > .tool-shell + .section .feature p {
    max-width: none;
  }

  .landing > .case-strip:not(:has(.case-grid)) .step,
  .landing > .case-strip:not(:has(.case-grid)) .step + .step,
  .landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2),
  .landing > .case-strip:not(:has(.case-grid)) .step:nth-child(3) {
    padding: 22px 0;
    border-right: 0;
    border-top: 1px solid var(--surface-line);
  }

  .landing > .case-strip:not(:has(.case-grid)) .step:first-child {
    border-top: 0;
  }

  .landing > .case-strip:not(:has(.case-grid)) .step h3,
  .landing > .case-strip:not(:has(.case-grid)) .step p {
    max-width: none;
  }

  .landing > .section:has(.related) .related a,
  .landing > .section:has(.related) .related a:first-child {
    padding: 15px 0;
  }
}

/* v93: final process-step contract. This intentionally follows the flat
   editorial overrides so stale column and pseudo-element geometry cannot
   reappear in production. */
.landing > .case-strip:not(:has(.case-grid)) .steps {
  counter-reset: product-step;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  align-items: stretch;
  border: 0;
}

.landing > .case-strip:not(:has(.case-grid)) .step,
.landing > .case-strip:not(:has(.case-grid)) .step + .step,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2),
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(3) {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  column-gap: clamp(14px, 1.4vw, 20px);
  row-gap: 10px;
  min-height: 0;
  padding: clamp(22px, 2vw, 30px) !important;
  counter-increment: product-step;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--surface-line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-primary) 94%, var(--blue) 6%);
  box-shadow: 0 16px 34px rgba(29, 72, 128, .08);
}

.landing > .case-strip:not(:has(.case-grid)) .step::before,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2)::before {
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--blue), color-mix(in srgb, var(--blue) 72%, #703cff));
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .04em;
  content: counter(product-step, decimal-leading-zero);
  box-shadow: 0 10px 20px rgba(19, 104, 234, .20);
}

.landing > .case-strip:not(:has(.case-grid)) .step h3,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2) h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  max-width: 18ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 1.7vw, 28px);
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.landing > .case-strip:not(:has(.case-grid)) .step p,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2) p {
  grid-column: 2;
  grid-row: 2;
  max-width: 34ch;
  margin: 0;
  color: color-mix(in srgb, var(--ink) 76%, var(--scene));
  font-size: 16px;
  line-height: 1.48;
}

@media (min-width: 641px) and (max-width: 1080px) {
  .landing > .case-strip:not(:has(.case-grid)) .steps {
    grid-template-columns: 1fr;
  }

  .landing > .case-strip:not(:has(.case-grid)) .step h3,
  .landing > .case-strip:not(:has(.case-grid)) .step p {
    max-width: none;
  }
}

/* v94: one deliberate FAQ system for every landing. Questions form a single
   reading surface; the open answer gains hierarchy without becoming a stack
   of unrelated cards. */
.landing > .section:has(.faq) .faq {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: start;
  padding: clamp(34px, 4.6vw, 66px);
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--surface-line));
  border-radius: var(--radius-panel);
  background:
    radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--blue) 10%, transparent) 0 18%, transparent 44%),
    var(--surface-elevated);
  box-shadow: 0 24px 58px rgba(31, 82, 145, .10);
}

.landing > .section:has(.faq) .faq > :first-child {
  align-self: start;
  padding: 0;
  border: 0;
}

.landing > .section:has(.faq) .faq h2 {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(38px, 3.6vw, 58px);
  line-height: .98;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.landing > .section:has(.faq) .faq > :last-child {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--surface-line));
  border-radius: 18px;
  background: var(--surface-primary);
  box-shadow: 0 16px 40px rgba(29, 72, 128, .08);
}

.landing > .section:has(.faq) details,
.landing > .section:has(.faq) details:first-child,
.landing > .section:has(.faq) details:last-child {
  border: 0;
  border-top: 1px solid var(--surface-line);
  background: transparent;
}

.landing > .section:has(.faq) details:first-child {
  border-top: 0;
}

.landing > .section:has(.faq) details[open] {
  background: color-mix(in srgb, var(--blue) 6%, var(--surface-primary));
}

.landing > .section:has(.faq) summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  min-height: 88px;
  padding: 22px 22px 22px clamp(22px, 2.4vw, 32px);
  list-style: none;
  color: var(--ink);
  font-size: clamp(18px, 1.35vw, 21px);
  font-weight: 780;
  line-height: 1.25;
  letter-spacing: -.018em;
  cursor: pointer;
}

.landing > .section:has(.faq) summary::-webkit-details-marker {
  display: none;
}

.landing > .section:has(.faq) summary::marker {
  content: "";
}

.landing > .section:has(.faq) summary::after {
  position: static;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--surface-line));
  border-radius: 13px;
  background:
    linear-gradient(var(--blue), var(--blue)) center / 14px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center / 2px 14px no-repeat,
    color-mix(in srgb, var(--blue) 8%, var(--surface-primary));
  content: "";
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.landing > .section:has(.faq) details[open] summary::after {
  border-color: var(--blue);
  background:
    linear-gradient(#fff, #fff) center / 14px 2px no-repeat,
    var(--blue);
  content: "";
}

.landing > .section:has(.faq) details p {
  max-width: 68ch;
  margin: 0;
  padding: 16px clamp(74px, 6vw, 92px) 28px clamp(22px, 2.4vw, 32px);
  color: color-mix(in srgb, var(--ink) 78%, var(--scene));
  font-size: clamp(16px, 1.18vw, 18px);
  font-weight: 480;
  line-height: 1.62;
  letter-spacing: -.008em;
}

.landing > .section:has(.faq) summary:hover {
  color: var(--blue);
}

.landing > .section:has(.faq) summary:hover::after {
  border-color: var(--blue);
  background:
    linear-gradient(var(--blue), var(--blue)) center / 14px 2px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center / 2px 14px no-repeat,
    color-mix(in srgb, var(--blue) 14%, var(--surface-primary));
}

.landing > .section:has(.faq) details[open] summary:hover::after {
  background:
    linear-gradient(#fff, #fff) center / 14px 2px no-repeat,
    var(--blue);
}

@media (max-width: 900px) {
  .landing > .section:has(.faq) .faq {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .landing > .section:has(.faq) .faq h2 {
    max-width: 16ch;
  }
}

@media (max-width: 640px) {
  .landing > .section:has(.faq) .faq {
    gap: 22px;
    padding: 24px;
    border-radius: 20px;
  }

  .landing > .section:has(.faq) .faq h2 {
    max-width: 12ch;
    font-size: clamp(32px, 10vw, 44px);
    line-height: 1.02;
  }

  .landing > .section:has(.faq) .faq > :last-child {
    border-radius: 16px;
  }

  .landing > .section:has(.faq) summary {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 14px;
    min-height: 76px;
    padding: 18px 16px 18px 18px;
    font-size: 17px;
    line-height: 1.3;
  }

  .landing > .section:has(.faq) summary::after {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 21px;
  }

  .landing > .section:has(.faq) details p {
    padding: 0 18px 20px;
    font-size: 16px;
    line-height: 1.58;
  }
}

@media (max-width: 640px) {
  .landing > .case-strip:not(:has(.case-grid)) .steps {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .landing > .case-strip:not(:has(.case-grid)) .step,
  .landing > .case-strip:not(:has(.case-grid)) .step + .step,
  .landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2),
  .landing > .case-strip:not(:has(.case-grid)) .step:nth-child(3) {
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 14px;
    padding: 20px !important;
  }

  .landing > .case-strip:not(:has(.case-grid)) .step::before,
  .landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2)::before {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 12px;
  }

  .landing > .case-strip:not(:has(.case-grid)) .step h3,
  .landing > .case-strip:not(:has(.case-grid)) .step p {
    max-width: none;
  }
}

/* v95: feature groups are equal product choices, not a loose editorial table.
   Three-item groups never fall into the broken 2 + orphan layout. */
.landing > .tool-shell + .section .grid-3,
.landing > .tool-shell + .section .grid-4 {
  gap: clamp(12px, 1.5vw, 20px);
  align-items: stretch;
  overflow: visible;
  border: 0;
  background: transparent;
}

.landing > .tool-shell + .section .feature,
.landing > .tool-shell + .section .feature + .feature,
.landing > .tool-shell + .section .feature:first-child {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: clamp(250px, 22vw, 310px);
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid color-mix(in srgb, var(--blue) 15%, var(--surface-line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-primary) 96%, var(--blue) 4%);
}

.landing > .tool-shell + .section .feature::before {
  display: block;
  width: 46px;
  height: 4px;
  margin: 0 0 clamp(24px, 2.2vw, 32px);
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue), var(--focus));
  content: "";
}

.landing > .tool-shell + .section .feature b,
.landing > .tool-shell + .section .feature:first-child b {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 780;
  letter-spacing: .01em;
}

.landing > .tool-shell + .section .feature h3 {
  max-width: 16ch;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.08;
  letter-spacing: -.03em;
}

.landing > .tool-shell + .section .feature p {
  max-width: 34ch;
  margin-top: 18px;
  font-size: clamp(16px, 1.18vw, 18px);
  line-height: 1.52;
}

.landing > .tool-shell + .section .grid-3 .feature:nth-child(3) {
  grid-column: auto;
  width: auto;
  max-width: none;
}

@media (min-width: 901px) and (max-width: 1080px) {
  .landing > .tool-shell + .section .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .landing > .tool-shell + .section .grid-3 {
    grid-template-columns: 1fr;
  }

  .landing > .tool-shell + .section .grid-3 .feature,
  .landing > .tool-shell + .section .grid-3 .feature + .feature,
  .landing > .tool-shell + .section .grid-3 .feature:first-child {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .landing > .tool-shell + .section .feature,
  .landing > .tool-shell + .section .feature + .feature,
  .landing > .tool-shell + .section .feature:first-child {
    min-height: 0;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--blue) 15%, var(--surface-line));
  }

  .landing > .tool-shell + .section .feature::before {
    margin-bottom: 22px;
  }

  .landing > .tool-shell + .section .feature h3,
  .landing > .tool-shell + .section .feature p {
    max-width: none;
  }
}

/* v97: one vertical text rhythm for every repeated content component.
   Labels belong to their title; explanatory copy is a separate reading tier. */
:root {
  --text-gap-label-title: clamp(12px, 1vw, 14px);
  --text-gap-title-copy: clamp(18px, 1.5vw, 22px);
}

.landing .case-grid .case > span,
.landing > .tool-shell + .section .feature > b,
.landing .mode-card > b,
.landing .mode-card__copy > b {
  display: block;
  margin: 0 0 var(--text-gap-label-title) !important;
}

.landing .case-grid .case > h3,
.landing > .tool-shell + .section .feature > h3,
.landing .mode-card > h3,
.landing .mode-card__copy > h3 {
  margin: 0 !important;
}

.landing .case-grid .case > h3 + p,
.landing > .tool-shell + .section .feature > h3 + p,
.landing .mode-card > h3 + p,
.landing .mode-card__copy > h3 + p {
  margin: var(--text-gap-title-copy) 0 0 !important;
}

.landing > .case-strip:not(:has(.case-grid)) .step,
.landing > .case-strip:not(:has(.case-grid)) .step + .step,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2),
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(3) {
  row-gap: clamp(14px, 1.2vw, 18px);
}

@media (max-width: 640px) {
  :root {
    --text-gap-label-title: 10px;
    --text-gap-title-copy: 16px;
  }
}

/* v98: LP-03 FAQ is a compact two-part composition on wide screens.
   The heading is optically centred against the question stack instead of
   hanging at the top of an otherwise empty column. */
@media (min-width: 901px) {
  .landing.lp03 > .section:has(.faq) .faq {
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
    gap: clamp(32px, 4vw, 58px);
    align-items: center;
    padding: clamp(32px, 3.8vw, 54px);
  }

  .landing.lp03 > .section:has(.faq) .faq > :first-child {
    align-self: center;
  }

  .landing.lp03 > .section:has(.faq) .faq h2 {
    max-width: 10ch;
  }

  .landing.lp03 > .section:has(.faq) summary {
    min-height: 82px;
    padding-block: 19px;
  }
}

/* v99: LP-03 proof copy shares one centred axis with the transformation image.
   A wider, balanced paragraph prevents a single orphaned word at the right. */
.landing.lp03 #lp03-examples .section-head {
  width: min(100%, 1080px);
  max-width: 1080px;
  margin-right: auto;
  margin-bottom: clamp(30px, 3vw, 42px);
  margin-left: auto;
  text-align: center;
}

.landing.lp03 #lp03-examples .section-head h2 {
  max-width: none;
  margin-inline: auto;
  text-wrap: balance;
}

.landing.lp03 #lp03-examples .section-head p {
  max-width: 72ch;
  margin: clamp(18px, 1.8vw, 26px) auto 0;
  text-align: center;
  text-wrap: balance;
}

/* v74 — one deliberate visual system for every route.
   Explanations use a dense editorial rail; proof remains photographic. */
:root {
  --lux-ink: #0b1320;
  --lux-graphite: #101b2c;
  --lux-graphite-2: #172942;
  --lux-silver: #e8eef7;
  --lux-mist: #f5f8fc;
  --lux-blue: #1f79ee;
  --lux-line: rgba(115, 151, 201, .32);
  --lux-text-soft: #c9d8ed;
}

.landing :is(h1, h2, h3, p, summary, .btn, .header-cta) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.landing :is(h1, h2, h3) {
  text-wrap: balance;
}

.landing > .section {
  isolation: isolate;
}

/* The two-column title/explainer pattern made every section feel like a
   presentation slide.  Copy now shares the title's reading axis. */
.landing .section-head {
  display: block;
  max-inline-size: 100%;
}

.landing .section-head h2,
.landing .section-inner > h2 {
  max-inline-size: min(100%, 24ch);
  margin: 0;
  font-size: clamp(34px, 4.35vw, 66px);
  line-height: 1.02;
  letter-spacing: -.052em;
}

.landing .section-head p {
  max-inline-size: min(100%, 62ch);
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.45;
  text-wrap: pretty;
}

/* A route's first explanation becomes a substantial dark surface instead of
   a row of empty white tiles. */
.landing > .tool-shell + .section {
  background:
    radial-gradient(circle at 92% 8%, rgba(67, 139, 245, .18), transparent 27%),
    linear-gradient(135deg, #edf3fb 0%, #f8fbff 52%, #e5eefb 100%);
}

.landing > .tool-shell + .section .grid-3,
.landing > .tool-shell + .section .grid-4 {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(128, 169, 221, .35);
  border-radius: 24px;
  background: rgba(151, 188, 234, .24);
  box-shadow: 0 22px 54px rgba(18, 46, 83, .12);
}

.landing > .tool-shell + .section .feature,
.landing > .tool-shell + .section .feature + .feature,
.landing > .tool-shell + .section .feature:first-child {
  display: flex;
  flex-direction: column;
  min-block-size: clamp(242px, 20vw, 314px);
  padding: clamp(28px, 3vw, 46px);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(145deg, rgba(15, 29, 49, .98), rgba(20, 39, 65, .96));
  box-shadow: none;
}

.landing > .tool-shell + .section .feature:nth-child(2n) {
  background:
    radial-gradient(circle at 90% 10%, rgba(46, 125, 238, .3), transparent 35%),
    linear-gradient(145deg, #172a45, #101d31 74%);
}

.landing > .tool-shell + .section .feature::before {
  display: none;
}

.landing > .tool-shell + .section .feature > b {
  margin: 0 0 18px;
  color: #77b3ff;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.landing > .tool-shell + .section .feature > h3 {
  max-inline-size: 17ch;
  margin: 0;
  color: #f7faff;
  font-size: clamp(25px, 2.1vw, 34px);
  line-height: 1.05;
}

.landing > .tool-shell + .section .feature > p {
  max-inline-size: 38ch;
  margin: auto 0 0;
  color: var(--lux-text-soft);
  font-size: clamp(16px, 1.22vw, 19px);
  line-height: 1.48;
}

/* Mode panels are the primary visual explanation.  Each option must feel
   like a route into a real result, not a generic text card. */
.landing .mode-panel {
  gap: clamp(14px, 1.5vw, 22px);
}

.landing .mode-card {
  min-block-size: clamp(230px, 17vw, 290px);
  overflow: hidden;
  border: 1px solid rgba(121, 169, 231, .36);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 8%, rgba(49, 126, 238, .26), transparent 33%),
    linear-gradient(145deg, #172942, #101a2a 72%);
  box-shadow: 0 18px 42px rgba(8, 22, 40, .18);
}

.landing .mode-card__copy,
.landing .mode-card:not(:has(.mode-card__copy)) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 2.5vw, 38px);
}

.landing .mode-card :is(b, h3, p) { max-inline-size: 28ch; }
.landing .mode-card b { color: #79b4ff; }
.landing .mode-card h3 { margin: 10px 0 0; color: #f7faff; font-size: clamp(25px, 2.2vw, 35px); line-height: 1.05; }
.landing .mode-card p { margin: 16px 0 0; color: var(--lux-text-soft); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; }

/* LP08 now shows the three actual outcomes inside the decision surface. */
.landing.lp08 #lp08-demo .mode-card {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(0, 1.1fr);
  align-items: stretch;
  min-block-size: clamp(190px, 15vw, 244px);
}

.landing.lp08 #lp08-demo .mode-card__picture {
  position: relative;
  display: block;
  min-block-size: 100%;
  overflow: hidden;
  background: #0a1421;
}

.landing.lp08 #lp08-demo .mode-card__picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 42%, rgba(15, 26, 42, .48));
}

.landing.lp08 #lp08-demo .mode-card__picture img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.landing.lp08 #lp08-demo .mode-card__copy { padding: clamp(22px, 2.1vw, 32px); }

/* Use cases carry a different surface and a compact editorial rhythm. */
.landing > .case-strip:has(.case-grid) {
  background:
    radial-gradient(circle at 8% 90%, rgba(48, 122, 230, .16), transparent 32%),
    linear-gradient(135deg, #e3ebf7, #f9fbff 55%, #e9f1fc);
}

.landing .case-grid {
  gap: clamp(16px, 1.8vw, 26px);
}

.landing .case-grid .case {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: clamp(260px, 20vw, 330px);
  padding: clamp(28px, 3vw, 46px);
  overflow: hidden;
  border: 1px solid rgba(112, 155, 211, .42);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 9%, rgba(49, 128, 238, .32), transparent 36%),
    linear-gradient(145deg, #172b47, #101a2a 75%);
  box-shadow: 0 20px 44px rgba(13, 38, 72, .16);
}

.landing .case-grid .case:nth-child(even) {
  background:
    radial-gradient(circle at 12% 10%, rgba(127, 193, 255, .2), transparent 34%),
    linear-gradient(145deg, #273a54, #14233a 75%);
}

.landing .case-grid .case > :is(span, h3, p) { color: #f7faff; }
.landing .case-grid .case > span { margin-block-end: 18px; color: #82b8ff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.landing .case-grid .case > h3 { max-inline-size: 18ch; margin: 0; font-size: clamp(27px, 2.5vw, 40px); line-height: 1.04; }
.landing .case-grid .case > p { max-inline-size: 40ch; margin: 18px 0 0; color: var(--lux-text-soft); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; }

/* Steps are a single process rail, never a tall slide with text adrift. */
.landing > .case-strip:not(:has(.case-grid)) {
  background: linear-gradient(180deg, #f5f8fc, #e9f0fa);
}

.landing > .case-strip:not(:has(.case-grid)) .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(103, 147, 204, .34);
  border-radius: 22px;
  background: rgba(136, 175, 220, .25);
}

.landing > .case-strip:not(:has(.case-grid)) .step {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-block-size: clamp(206px, 16vw, 260px);
  padding: clamp(28px, 3vw, 42px);
  border: 0;
  border-radius: 0;
  background: #fafdff;
  box-shadow: none;
}

.landing > .case-strip:not(:has(.case-grid)) .step::before {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  margin: 0 0 22px;
  border-radius: 12px;
  background: var(--lux-blue);
  color: #fff;
  box-shadow: 0 10px 20px rgba(31, 121, 238, .24);
}

.landing > .case-strip:not(:has(.case-grid)) .step > h3 { max-inline-size: 17ch; margin: 0; color: var(--lux-ink); font-size: clamp(23px, 2vw, 31px); line-height: 1.08; }
.landing > .case-strip:not(:has(.case-grid)) .step > p { max-inline-size: 34ch; margin: auto 0 0; color: #405673; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.45; }

/* FAQ and CTA stay readable at every width; never force thin text columns. */
.landing > .section:has(.faq) {
  background: linear-gradient(135deg, #edf4fd, #f9fbff 62%, #e7effa);
}

.landing > .section:has(.faq) .faq {
  grid-template-columns: minmax(0, .78fr) minmax(420px, 1.22fr);
  align-items: start;
}

.landing > .section:has(.faq) .faq h2 { max-inline-size: 16ch; }
.landing > .section:has(.faq) summary { padding-inline: clamp(24px, 3vw, 40px); font-size: clamp(19px, 1.7vw, 26px); line-height: 1.18; }
.landing > .section:has(.faq) details p { max-inline-size: 62ch; padding-inline: clamp(24px, 3vw, 40px); }

.landing .final-cta .section-inner {
  min-block-size: clamp(320px, 26vw, 420px);
  padding: clamp(42px, 5vw, 76px);
  background:
    radial-gradient(circle at 80% 15%, rgba(48, 129, 240, .38), transparent 30%),
    linear-gradient(135deg, #0d1726, #152a47 58%, #0d1828);
}

.landing .final-cta h2 { max-inline-size: min(100%, 21ch); font-size: clamp(38px, 4.5vw, 68px); }
.landing .final-cta .final-value { max-inline-size: min(100%, 50ch); }
.landing .btn, .landing .header-cta { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1; }

@media (max-width: 900px) {
  .landing > .tool-shell + .section .grid-3,
  .landing > .tool-shell + .section .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing > .section:has(.faq) .faq { grid-template-columns: 1fr; }
  .landing > .section:has(.faq) .faq h2 { max-inline-size: 20ch; }
  .landing.lp08 #lp08-demo .mode-card { grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr); }
}

@media (max-width: 640px) {
  .landing .section-head h2,
  .landing .section-inner > h2 { max-inline-size: 100%; font-size: clamp(32px, 10vw, 46px); }
  .landing > .tool-shell + .section .grid-3,
  .landing > .tool-shell + .section .grid-4,
  .landing > .case-strip:not(:has(.case-grid)) .steps { grid-template-columns: 1fr; }
  .landing > .tool-shell + .section .feature,
  .landing > .tool-shell + .section .feature + .feature,
  .landing > .tool-shell + .section .feature:first-child,
  .landing .case-grid .case,
  .landing > .case-strip:not(:has(.case-grid)) .step { min-block-size: 0; padding: 28px 24px; }
  .landing .mode-card { min-block-size: 0; }
  .landing.lp08 #lp08-demo .mode-card { grid-template-columns: 1fr; }
  .landing.lp08 #lp08-demo .mode-card__picture { aspect-ratio: 16 / 8; }
  .landing.lp08 #lp08-demo .mode-card__picture::after { background: linear-gradient(180deg, transparent 35%, rgba(15, 26, 42, .55)); }
  .landing .final-cta .section-inner { min-block-size: 0; padding: 42px 24px; }
}

@media (max-width: 760px) {
  .landing.lp03 #lp03-examples .section-head {
    text-align: left;
  }

  .landing.lp03 #lp03-examples .section-head p {
    margin-top: 16px;
    text-align: left;
  }
}

/* Mid-cascade process rhythm guard. */
.landing > .case-strip:not(:has(.case-grid)) > .section-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: clamp(34px, 3.2vw, 52px) !important;
}

.landing > .case-strip:not(:has(.case-grid)) > .section-inner > h2,
.landing > .case-strip:not(:has(.case-grid)) > .section-inner > .section-head,
.landing > .case-strip:not(:has(.case-grid)) > .section-inner > .steps {
  margin: 0 !important;
}

/* Final contrast contract for the explanatory cards after each demo. */
.landing > .tool-shell + .section .feature {
  background: linear-gradient(145deg, #142842, #0c1727 78%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.landing.landing.landing > .tool-shell + .section .feature:nth-child(even) {
  background: radial-gradient(circle at 90% 8%, rgba(51, 134, 245, .28), transparent 34%), linear-gradient(145deg, #1a3150, #0c1727 78%) !important;
}

.landing.landing.landing > .tool-shell + .section .feature > b { color: #78b4ff !important; opacity: 1 !important; }
.landing.landing.landing > .tool-shell + .section .feature > h3 { color: #f8fbff !important; opacity: 1 !important; text-shadow: none !important; }
.landing.landing.landing > .tool-shell + .section .feature > p { color: #d0def2 !important; opacity: 1 !important; text-shadow: none !important; }

/* Action cards shown on dark product demos always carry their own contrast. */
.landing .demo.dark .mode-card {
  color: #f8fbff !important;
  background: linear-gradient(160deg, rgba(27, 53, 85, .98), rgba(13, 27, 46, .98)) !important;
  border-color: rgba(104, 174, 255, .48) !important;
}

.landing .demo.dark .mode-card > b { color: #78b4ff !important; }
.landing .demo.dark .mode-card > h3 { color: #f8fbff !important; }
.landing .demo.dark .mode-card > p { color: #d0def2 !important; }

/* A light mode card is a reading surface, not an inverse editor panel. */
.landing.lp03 #lp03-modes .mode-card {
  color: #101928 !important;
}

.landing.lp03 #lp03-modes .mode-card__copy > b {
  color: #5e50bd !important;
}

.landing.lp03 #lp03-modes .mode-card__copy > h3 {
  color: #101928 !important;
}

.landing.lp03 #lp03-modes .mode-card__copy > p {
  color: #40516a !important;
}

/* Proof intros are light reading surfaces even inside a dark showcase. */
.landing .section:has(.proof-picture) .section-head {
  color: #101928 !important;
}
.landing .section:has(.proof-picture) .section-head h2 { color: #101928 !important; }
.landing .section:has(.proof-picture) .section-head p { color: #435873 !important; }

/* Merge scenarios need their visual proof to read before the explanatory copy. */
.landing.lp08 #lp08-demo .mode-card {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
}

.landing.lp08 #lp08-demo .mode-card__picture {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}

.landing.lp08 #lp08-demo .mode-card__picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.landing.lp08 #lp08-demo .mode-card__copy { padding: 24px 26px 28px !important; }
.landing.lp08 #lp08-demo .mode-card__copy h3 { font-size: clamp(28px, 2vw, 36px) !important; }

/* Final mobile safety net: a late desktop FAQ rule must never squeeze its answer
   column to zero, and long Russian headings keep whole words without overflow. */
@media (max-width: 760px) {
  .landing > .section:has(.faq) .faq {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  .landing > .section:has(.faq) .faq > * {
    min-inline-size: 0 !important;
  }

  .landing > .section:has(.faq) .faq > :last-child {
    inline-size: 100% !important;
  }

  .landing .section:has(.proof-picture) .section-head h2 {
    font-size: clamp(32px, 9.2vw, 36px) !important;
  }

  .landing .section-head h2,
  .landing > .case-strip:not(:has(.case-grid)) > .section-inner > h2 {
    font-size: clamp(30px, 8.2vw, 32px) !important;
  }

  .landing > .section:has(.faq) .faq h2 {
    font-size: clamp(28px, 7.4vw, 29px) !important;
  }

  .landing .case h3 {
    font-size: clamp(23px, 6.4vw, 25px) !important;
  }

  .landing .mode-card__copy h3 {
    font-size: clamp(22px, 5.9vw, 23px) !important;
  }

}

/* Honest local demo: an accessible preflight, never a fake processing state. */
.tool-demo-dialog {
  width: min(650px, calc(100vw - 32px));
  max-width: 650px;
  max-height: min(760px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  color: #f7fbff;
  background: #0d1b2e;
  border: 1px solid rgba(121, 181, 255, .65);
  border-radius: 22px;
  box-shadow: 0 32px 90px rgba(1, 8, 20, .62);
}
.tool-demo-dialog::backdrop { background: rgba(4, 10, 20, .74); backdrop-filter: blur(8px); }
.tool-demo-dialog__panel { position: relative; display: grid; gap: 22px; padding: clamp(26px, 4vw, 42px); }
.tool-demo-dialog__close {
  position: absolute; top: 16px; right: 16px; display: grid; width: 38px; height: 38px; place-items: center;
  padding: 0; border: 1px solid rgba(159, 197, 246, .5); border-radius: 50%; color: #eaf3ff; background: rgba(255, 255, 255, .07); font-size: 28px; line-height: 1; cursor: pointer;
}
.tool-demo-dialog__eyebrow { margin: 0; color: #77b1ff; font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.tool-demo-dialog h2 { max-width: 510px; margin: 0; color: #fff; font-size: clamp(31px, 5vw, 48px); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.tool-demo-dialog h3 { margin: 0; color: #fff; font-size: 24px; letter-spacing: -.025em; }
.tool-demo-dialog__intro, .tool-demo-dialog__stage > p { max-width: 560px; margin: 0; color: #c7d8f1; font-size: 16px; line-height: 1.55; }
.tool-demo-dialog__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0; list-style: none; }
.tool-demo-dialog__steps li { display: grid; gap: 5px; padding: 12px; border-top: 2px solid rgba(157, 188, 232, .25); color: #8ea6c7; font-size: 12px; font-weight: 750; }
.tool-demo-dialog__steps li span { color: #bdd0ea; font-size: 11px; letter-spacing: .08em; }
.tool-demo-dialog__steps .is-current { border-color: #3386f5; color: #f8fbff; }
.tool-demo-dialog__steps .is-current span { color: #6fb2ff; }
.tool-demo-dialog__stage { display: grid; gap: 14px; min-height: 164px; }
.tool-demo-dialog__upload { display: grid; gap: 5px; padding: 20px; border: 1px dashed rgba(127, 183, 255, .68); border-radius: 16px; background: rgba(54, 117, 196, .12); cursor: pointer; }
.tool-demo-dialog__upload:focus-within { outline: 3px solid #84c3ff; outline-offset: 3px; }
.tool-demo-dialog__upload input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.tool-demo-dialog__upload-title { color: #fff; font-weight: 800; }
.tool-demo-dialog__upload-note, .tool-demo-dialog__prompt small { color: #b5c9e5; font-size: 13px; }
.tool-demo-dialog__preview { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; margin: 0; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.tool-demo-dialog__preview img { width: 120px; height: 82px; object-fit: cover; border-radius: 9px; }
.tool-demo-dialog__preview figcaption { color: #d2e1f7; font-size: 14px; overflow-wrap: anywhere; }
.tool-demo-dialog__prompt { display: grid; gap: 7px; color: #fff; font-weight: 750; }
.tool-demo-dialog__prompt textarea { width: 100%; resize: vertical; min-height: 96px; padding: 13px 14px; color: #f8fbff; background: #091424; border: 1px solid rgba(128, 177, 240, .48); border-radius: 12px; font: inherit; }
.tool-demo-dialog__summary { display: grid; gap: 11px; margin: 0; }
.tool-demo-dialog__summary div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding-bottom: 11px; border-bottom: 1px solid rgba(159, 190, 229, .2); }
.tool-demo-dialog__summary dt { color: #9db8dd; font-size: 13px; }
.tool-demo-dialog__summary dd { min-width: 0; margin: 0; color: #f4f8ff; overflow-wrap: anywhere; }
.tool-demo-dialog__notice { margin: 0; padding: 14px; color: #d6e7ff; background: rgba(66, 140, 240, .16); border: 1px solid rgba(94, 167, 255, .48); border-radius: 8px; font-size: 14px; line-height: 1.5; }
.tool-demo-dialog__actions { display: flex; justify-content: space-between; gap: 10px; }
.tool-demo-dialog__actions button { min-height: 46px; padding: 0 18px; border-radius: 999px; font: inherit; font-weight: 800; cursor: pointer; }
.tool-demo-dialog__back { color: #d6e6fb; background: transparent; border: 1px solid rgba(154, 191, 237, .52); }
.tool-demo-dialog__next, .tool-demo-dialog__done { margin-left: auto; color: #fff; background: #1d74e9; border: 1px solid #3b92ff; box-shadow: 0 10px 24px rgba(19, 108, 234, .26); }
.tool-demo-dialog :is(button, input, textarea):focus-visible { outline: 3px solid #84c3ff; outline-offset: 3px; }
@media (max-width: 520px) {
  .tool-demo-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .tool-demo-dialog__panel { gap: 18px; padding: 26px 20px 22px; }
  .tool-demo-dialog__steps li { padding-inline: 7px; }
  .tool-demo-dialog__steps li:not(.is-current) { font-size: 11px; }
  .tool-demo-dialog__preview { grid-template-columns: 1fr; }
  .tool-demo-dialog__preview img { width: 100%; height: 140px; }
  .tool-demo-dialog__summary div { grid-template-columns: 1fr; gap: 3px; }
}

/* Shown only when analytics are intentionally enabled and the visitor has not chosen yet. */
.analytics-consent {
  position: fixed; z-index: 120; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: end; width: min(620px, calc(100vw - 40px)); padding: 22px 24px;
  color: #f7fbff; background: linear-gradient(135deg, #162b48, #0a1525); border: 1px solid rgba(125, 183, 252, .52); border-radius: 18px; box-shadow: 0 24px 64px rgba(2, 10, 22, .42);
}
.analytics-consent__eyebrow { margin: 0 0 7px; color: #77b1ff; font-size: 11px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.analytics-consent h2 { margin: 0 0 8px; color: #fff; font-size: 20px; letter-spacing: -.025em; }
.analytics-consent p:not(.analytics-consent__eyebrow) { margin: 0; color: #cbdcf3; font-size: 13px; line-height: 1.5; }
.analytics-consent__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.analytics-consent__actions button { min-height: 42px; padding: 0 14px; color: #dbeaff; background: transparent; border: 1px solid rgba(155, 192, 237, .5); border-radius: var(--radius-control); font: inherit; font-size: 13px; font-weight: 780; cursor: pointer; }
.analytics-consent__actions button[data-consent="granted"] { color: #fff; background: #1d74e9; border-color: #3b92ff; }
.analytics-consent__actions button:hover { border-color: #8cc4ff; background: rgba(85, 151, 231, .14); }
.analytics-consent__actions button[data-consent="granted"]:hover { background: #1567d5; }
.analytics-consent button:focus-visible { outline: 3px solid #8cc4ff; outline-offset: 3px; }
@media (max-width: 620px) {
  .analytics-consent { right: 12px; bottom: 12px; left: 12px; width: auto; grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .analytics-consent__actions { justify-content: stretch; }
  .analytics-consent__actions button { flex: 1 1 140px; }
}

/* Shared responsive type contract: headings never split a Russian word to
   preserve a narrow card, while supporting copy can still break a long URL. */
.landing :is(h1, h2, h3, summary) {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  text-wrap: pretty;
}

.landing :is(p, li) {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.landing :is(.hero-copy, .section-head, .tool-copy, .mode-card__copy, .feature, .step, .case, .faq) {
  min-inline-size: 0;
}

@media (max-width: 760px) {
  .landing :is(.section-head h2, .tool-copy h2, .feature h3, .step h3, .mode-card h3, .case h3, .faq h2, .final-cta h2) {
    max-inline-size: 100% !important;
    text-wrap: pretty;
  }

  .landing .mode-card :is(b, h3, p) {
    max-inline-size: 100%;
  }
}

/* The explanatory cards immediately after a product demo are dark surfaces:
   their light type never competes with a pale gradient behind it. */
.landing > .tool-shell + .section .feature {
  background: linear-gradient(145deg, #142842, #0c1727 78%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.landing > .tool-shell + .section .feature:nth-child(even) {
  background: radial-gradient(circle at 90% 8%, rgba(51, 134, 245, .28), transparent 34%), linear-gradient(145deg, #1a3150, #0c1727 78%) !important;
}

.landing > .tool-shell + .section .feature > b { color: #78b4ff !important; opacity: 1 !important; }
.landing > .tool-shell + .section .feature > h3 { color: #f8fbff !important; opacity: 1 !important; text-shadow: none !important; }
.landing > .tool-shell + .section .feature > p { color: #d0def2 !important; opacity: 1 !important; text-shadow: none !important; }

/* v75 contrast failsafe — intentionally last in the cascade.
   Explanation cards must never inherit pale copy from a former light theme. */
.landing > .tool-shell + .section .feature,
.landing > .tool-shell + .section .feature + .feature,
.landing > .tool-shell + .section .feature:first-child {
  background: linear-gradient(145deg, #142842, #0c1727 78%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.landing > .tool-shell + .section .feature:nth-child(even) {
  background:
    radial-gradient(circle at 90% 8%, rgba(51, 134, 245, .28), transparent 34%),
    linear-gradient(145deg, #1a3150, #0c1727 78%) !important;
}

.landing > .tool-shell + .section .feature > b,
.landing > .tool-shell + .section .feature:first-child > b {
  color: #78b4ff !important;
  opacity: 1 !important;
}

.landing > .tool-shell + .section .feature > h3,
.landing > .tool-shell + .section .feature:first-child > h3 {
  color: #f8fbff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.landing > .tool-shell + .section .feature > p,
.landing > .tool-shell + .section .feature:first-child > p {
  color: #d0def2 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* v109: final surface hierarchy — this deliberately comes last so page-local
   legacy colours cannot flatten the system back to white. */
.landing {
  --lux-graphite: #0b1420;
  --lux-graphite-soft: #152235;
  --lux-silver: #dfe7f1;
  --lux-ice: #eff4f9;
  background: var(--lux-ice) !important;
}

.landing > .tool-shell {
  background:
    linear-gradient(118deg, rgba(182, 199, 220, .46), transparent 38%),
    linear-gradient(180deg, #e7edf5 0%, #f7f9fc 100%) !important;
}

.landing > .tool-shell .section-inner {
  background: linear-gradient(118deg, rgba(255, 255, 255, .94), rgba(237, 243, 250, .84)) !important;
}

.landing > .tool-shell + .section {
  background:
    radial-gradient(ellipse at 88% 6%, rgba(71, 132, 203, .14), transparent 34%),
    linear-gradient(132deg, #dfe8f3, #f6f8fc 58%, #e9eef6) !important;
}

.landing > .case-strip:not(:has(.case-grid)) {
  background:
    radial-gradient(ellipse at 6% 76%, rgba(78, 137, 206, .15), transparent 34%),
    linear-gradient(160deg, #e5ebf3 0%, #f8fafc 54%, #e2e9f2 100%) !important;
}

.landing > .case-strip:has(.case-grid) {
  background:
    radial-gradient(ellipse at 84% 18%, rgba(54, 126, 208, .18), transparent 36%),
    linear-gradient(135deg, #cfd9e6 0%, #edf2f7 52%, #dce5ef 100%) !important;
}

.landing > .section:has(.proof-picture) {
  background:
    radial-gradient(ellipse at 90% 10%, rgba(47, 121, 216, .28), transparent 34%),
    linear-gradient(135deg, var(--lux-graphite), #101d2d 58%, var(--lux-graphite-soft)) !important;
}

.landing > .section:has(.proof-picture) .section-head h2 {
  color: #f5f8fd !important;
}

.landing > .section:has(.proof-picture) .section-head p {
  color: #c7d6e9 !important;
}

.landing > .section:has(.related) {
  background:
    linear-gradient(120deg, rgba(40, 114, 210, .16), transparent 38%),
    #0d1724 !important;
}

.landing > .section:has(.related) :is(h2, h3) {
  color: #f5f8fd !important;
}

.landing > .section:has(.related) .related,
.landing > .section:has(.related) .related a {
  border-color: rgba(172, 204, 241, .24) !important;
}

.landing > .section:has(.related) .related a {
  background: rgba(255, 255, 255, .035) !important;
  color: #dbe8f8 !important;
}

.landing > .section:has(.related) .related a:hover {
  background: rgba(45, 125, 233, .22) !important;
  color: #fff !important;
}

.landing > .section:has(.faq) {
  background:
    radial-gradient(ellipse at 10% 88%, rgba(85, 142, 208, .13), transparent 35%),
    linear-gradient(145deg, #e7edf5, #f8fafc 56%, #e1e9f2) !important;
}

.landing > .section:has(.faq) .faq {
  background: rgba(248, 250, 252, .82) !important;
}

@media (max-width: 760px) {
  .landing > .section:has(.proof-picture) {
    background: linear-gradient(155deg, var(--lux-graphite), #14243a) !important;
  }

  .landing > .section:has(.related) .related a {
    background: transparent !important;
  }
}

/* Process sequence: each ordinal, title and description belong to the same
   reading unit. This final contract supersedes the older LP-specific flex and
   grid experiments, which could place those three elements in separate cells. */
.landing > .case-strip:not(:has(.case-grid)) .steps,
.landing.lp07 > .case-strip:not(:has(.case-grid)) .steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  align-items: stretch;
}

.landing > .case-strip:not(:has(.case-grid)) .step,
.landing > .case-strip:not(:has(.case-grid)) .step + .step,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2),
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(3) {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center;
  column-gap: clamp(16px, 1.6vw, 24px);
  row-gap: 10px;
  min-block-size: clamp(210px, 17vw, 260px) !important;
  padding: clamp(28px, 2.8vw, 42px) !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.landing > .case-strip:not(:has(.case-grid)) .step + .step {
  border-inline-start: 1px solid color-mix(in srgb, currentColor 16%, transparent) !important;
}

.landing > .case-strip:not(:has(.case-grid)) .step::before,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2)::before {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: start;
  inline-size: 48px !important;
  block-size: 48px !important;
  margin: 0 !important;
}

.landing > .case-strip:not(:has(.case-grid)) .step > h3,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2) > h3 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end;
  max-inline-size: 18ch;
  margin: 0 !important;
  text-wrap: balance;
}

.landing > .case-strip:not(:has(.case-grid)) .step > p,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2) > p {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start;
  max-inline-size: 34ch;
  margin: 0 !important;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .landing > .case-strip:not(:has(.case-grid)) .steps,
  .landing.lp07 > .case-strip:not(:has(.case-grid)) .steps {
    grid-template-columns: 1fr !important;
  }

  .landing > .case-strip:not(:has(.case-grid)) .step,
  .landing > .case-strip:not(:has(.case-grid)) .step + .step {
    min-block-size: 0 !important;
  }

  .landing > .case-strip:not(:has(.case-grid)) .step + .step {
    border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent) !important;
    border-inline-start: 0 !important;
  }
}

@media (max-width: 560px) {
  .landing > .case-strip:not(:has(.case-grid)) .step,
  .landing > .case-strip:not(:has(.case-grid)) .step + .step {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    column-gap: 14px;
    padding: 24px 20px !important;
  }

  .landing > .case-strip:not(:has(.case-grid)) .step::before,
  .landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2)::before {
    inline-size: 42px !important;
    block-size: 42px !important;
  }
}

/* Generator entry panels are work surfaces, not a centred billboard. Keeping
   the whole reading path on one left axis makes long Russian copy wrap by
   meaning and gives the primary action a clear place to start. */
.landing.lp04 #lp04-demo .tool-grid {
  grid-template-columns: minmax(440px, 1fr) minmax(0, 1fr) !important;
  align-items: stretch;
}

.landing.lp04 #lp04-demo .tool-copy {
  max-inline-size: 30rem;
}

.landing.lp04 #lp04-demo .tool-copy h2 {
  max-inline-size: 17ch;
  text-wrap: balance;
}

.landing.lp04 #lp04-demo .generator-start {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  min-height: clamp(290px, 22vw, 360px);
  text-align: left !important;
}

.landing.lp04 #lp04-demo .generator-start h3 {
  max-inline-size: 18ch;
  margin: 0 !important;
  font-size: clamp(30px, 2.35vw, 40px);
  line-height: 1.06;
  text-wrap: balance;
}

.landing.lp04 #lp04-demo .generator-start p {
  max-inline-size: 43ch;
  margin: 18px 0 28px !important;
  text-wrap: pretty;
}

.landing.lp04 #lp04-demo .generator-start .btn {
  align-self: flex-start !important;
  min-width: 0;
}

@media (max-width: 900px) {
  .landing.lp04 #lp04-demo .tool-grid {
    grid-template-columns: 1fr !important;
  }

  .landing.lp04 #lp04-demo .tool-copy,
  .landing.lp04 #lp04-demo .tool-copy h2,
  .landing.lp04 #lp04-demo .generator-start h3,
  .landing.lp04 #lp04-demo .generator-start p {
    max-inline-size: 100%;
  }
}

/* The three-step design rail is content, not a row of unstyled inline text. */
.landing.lp10 #lp10-demo .metric-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 28px 0 22px;
  border-block: 1px solid rgba(185, 220, 255, .22);
}

.landing.lp10 #lp10-demo .metric {
  display: flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
  padding: 16px 14px;
  border: 0;
  background: transparent;
  color: var(--on-dark);
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 750;
  line-height: 1.15;
}

.landing.lp10 #lp10-demo .metric + .metric {
  border-inline-start: 1px solid rgba(185, 220, 255, .22);
}

.landing.lp10 #lp10-demo .metric strong {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 9px;
  background: rgba(31, 126, 242, .22);
  color: #fff !important;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  line-height: 1;
}

.landing.lp10 #lp10-demo .metric span {
  min-inline-size: 0;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 620px) {
  .landing.lp10 #lp10-demo .metric-line {
    grid-template-columns: 1fr;
    margin-block: 22px 18px;
  }

  .landing.lp10 #lp10-demo .metric {
    padding: 14px 0;
  }

  .landing.lp10 #lp10-demo .metric + .metric {
    border-top: 1px solid rgba(185, 220, 255, .18);
    border-inline-start: 0;
  }
}

/* Cold-luxury surface rhythm. The page moves through material surfaces instead
   of resetting to white after every message: studio graphite for proof,
   brushed silver for decisions, and a quiet porcelain base for reading. */
.landing {
  --lux-graphite: #0b1420;
  --lux-graphite-soft: #152235;
  --lux-silver: #dfe7f1;
  --lux-ice: #eff4f9;
  --lux-porcelain: #f7f9fc;
  background: var(--lux-ice);
}

.landing > .tool-shell {
  background:
    linear-gradient(118deg, rgba(182, 199, 220, .46), transparent 38%),
    linear-gradient(180deg, #e7edf5 0%, #f7f9fc 100%);
}

.landing > .tool-shell .section-inner {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .94), rgba(237, 243, 250, .84));
}

.landing > .tool-shell + .section {
  background:
    radial-gradient(ellipse at 88% 6%, rgba(71, 132, 203, .14), transparent 34%),
    linear-gradient(132deg, #dfe8f3, #f6f8fc 58%, #e9eef6);
}

.landing > .case-strip:not(:has(.case-grid)) {
  background:
    radial-gradient(ellipse at 6% 76%, rgba(78, 137, 206, .15), transparent 34%),
    linear-gradient(160deg, #e5ebf3 0%, #f8fafc 54%, #e2e9f2 100%);
}

.landing > .case-strip:has(.case-grid) {
  background:
    radial-gradient(ellipse at 84% 18%, rgba(54, 126, 208, .18), transparent 36%),
    linear-gradient(135deg, #cfd9e6 0%, #edf2f7 52%, #dce5ef 100%);
}

.landing > .case-strip:has(.case-grid) .case {
  background: rgba(249, 251, 253, .92);
}

.landing > .section:has(.proof-picture) {
  background:
    radial-gradient(ellipse at 90% 10%, rgba(47, 121, 216, .28), transparent 34%),
    linear-gradient(135deg, var(--lux-graphite), #101d2d 58%, var(--lux-graphite-soft));
}

.landing > .section:has(.proof-picture) .section-head h2 {
  color: #f5f8fd !important;
}

.landing > .section:has(.proof-picture) .section-head p {
  color: #c7d6e9 !important;
}

.landing > .section:has(.related) {
  background:
    linear-gradient(120deg, rgba(40, 114, 210, .16), transparent 38%),
    #0d1724;
}

.landing > .section:has(.related) :is(h2, h3) {
  color: #f5f8fd !important;
}

.landing > .section:has(.related) .related {
  border-color: rgba(172, 204, 241, .24);
}

.landing > .section:has(.related) .related a {
  border-color: rgba(172, 204, 241, .24);
  background: rgba(255, 255, 255, .035);
  color: #dbe8f8 !important;
}

.landing > .section:has(.related) .related a:hover {
  background: rgba(45, 125, 233, .22);
  color: #fff !important;
}

.landing > .section:has(.faq) {
  background:
    radial-gradient(ellipse at 10% 88%, rgba(85, 142, 208, .13), transparent 35%),
    linear-gradient(145deg, #e7edf5, #f8fafc 56%, #e1e9f2);
}

.landing > .section:has(.faq) .faq {
  background: rgba(248, 250, 252, .82);
}

@media (max-width: 760px) {
  .landing > .section:has(.proof-picture) {
    background: linear-gradient(155deg, var(--lux-graphite), #14243a);
  }

  .landing > .section:has(.related) .related a {
    background: transparent;
  }
}

/* v107 — one dense premium system for every landing.
   This closes the old stack of page-specific visual patches: copy owns calm
   surfaces, proof owns the colour, and repeated content uses only three
   clear forms (facts, steps, evidence). */
:root {
  --premium-paper: #f5f3ef;
  --premium-surface: #fffdfa;
  --premium-ink: #111820;
  --premium-muted: #52606c;
  --premium-line: rgba(26, 39, 53, .18);
  --premium-dark: #0c1420;
  --premium-dark-soft: #132033;
  --premium-gap: clamp(18px, 2.2vw, 32px);
  --premium-section: clamp(58px, 6vw, 96px);
}

.landing {
  background: var(--premium-paper);
}

.landing > .section,
.landing > .case-strip,
.landing > .tool-shell {
  isolation: isolate;
}

/* The coloured task tint is a restrained material cue, never a text layer. */
.landing .hero,
.landing.lp01 .hero,
.landing.lp02 .hero,
.landing.lp03 .hero,
.landing.lp04 .hero,
.landing.lp05 .hero,
.landing.lp06 .hero,
.landing.lp07 .hero,
.landing.lp08 .hero,
.landing.lp09 .hero,
.landing.lp10 .hero,
.landing.lp11 .hero {
  min-height: clamp(590px, 42vw, 690px);
  background: linear-gradient(114deg, var(--premium-paper) 0%, var(--premium-surface) 56%, color-mix(in srgb, var(--scene) 54%, var(--premium-surface)) 100%) !important;
}

.landing .hero::before,
.landing .hero::after {
  display: none;
}

.hero-inner,
.lp01 .hero-inner,
.lp02 .hero-inner,
.lp03 .hero-inner,
.lp04 .hero-inner,
.lp05 .hero-inner,
.lp06 .hero-inner,
.lp07 .hero-inner,
.lp08 .hero-inner,
.lp09 .hero-inner,
.lp10 .hero-inner,
.lp11 .hero-inner {
  min-height: clamp(590px, 42vw, 690px);
  gap: clamp(30px, 4vw, 64px);
}

.landing .hero-copy,
.landing .tool-copy {
  min-inline-size: 0;
}

.landing .hero-copy h1,
.landing:not(.lp01) .hero-copy h1,
.lp01 h1 {
  max-inline-size: min(100%, 15ch);
  margin-block-end: 20px;
  color: var(--premium-ink);
  font-size: clamp(44px, 4.4vw, 72px);
  line-height: .97;
  letter-spacing: -.04em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

.landing .hero-copy .lede,
.landing .hero-copy .helper {
  max-inline-size: 54ch;
  color: var(--premium-muted) !important;
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 520;
  line-height: 1.55;
  text-wrap: pretty;
}

.landing .hero-visual,
.landing .hero-stage {
  border: 7px solid var(--premium-dark);
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(7, 18, 30, .24);
}

.landing .hero-visual::after,
.landing .hero-stage::after {
  display: none;
}

.landing .actions .btn,
.landing .final-cta .btn {
  min-height: 54px;
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(20, 115, 230, .24);
}

/* Large, editorial tool entry: one dark workbench, no nested pastel cards. */
.landing .tool-shell {
  padding-block: var(--premium-section);
  background: var(--premium-paper);
}

.landing .tool-shell .section-inner {
  padding: clamp(26px, 3.2vw, 48px);
  border: 1px solid var(--premium-line);
  border-radius: 22px;
  background: var(--premium-surface);
  box-shadow: 0 20px 48px rgba(20, 31, 43, .1);
}

.landing .tool-grid {
  gap: clamp(28px, 4vw, 58px);
}

.landing .tool-copy h2 {
  max-inline-size: 15ch;
}

.landing .tool-copy p,
.landing .section-head p {
  max-inline-size: 62ch;
  color: var(--premium-muted);
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 510;
  line-height: 1.55;
  text-wrap: pretty;
}

.landing .demo,
.landing .demo.dark {
  border: 1px solid rgba(117, 165, 220, .28);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--premium-dark), var(--premium-dark-soft));
  box-shadow: 0 22px 46px rgba(8, 18, 31, .2);
}

/* Facts stay compact. They no longer pretend to be product screenshots. */
.landing > .tool-shell + .section {
  background: var(--premium-surface);
}

.landing > .tool-shell + .section .grid-3,
.landing > .tool-shell + .section .grid-4 {
  gap: 0;
  border-block: 1px solid var(--premium-line);
}

.landing > .tool-shell + .section .feature,
.landing > .tool-shell + .section .feature + .feature,
.landing > .tool-shell + .section .feature:first-child {
  min-height: 0;
  padding: clamp(24px, 2.4vw, 36px);
  border: 0;
  border-inline-start: 1px solid var(--premium-line);
  border-radius: 0;
  background: transparent;
}

.landing > .tool-shell + .section .feature:first-child {
  border-inline-start: 0;
}

.landing > .tool-shell + .section .feature:nth-child(even) {
  background: color-mix(in srgb, var(--scene) 10%, transparent);
}

.landing > .tool-shell + .section .feature::before {
  width: 34px;
  height: 3px;
  margin-block-end: 16px;
}

.landing > .tool-shell + .section .feature h3 {
  max-inline-size: 18ch;
  margin-block-end: 12px;
}

.landing > .tool-shell + .section .feature p {
  max-inline-size: 34ch;
  color: var(--premium-muted);
}

/* Process is a single controlled sequence, not three floating empty cards. */
.landing > .case-strip:not(:has(.case-grid)) {
  padding-block: var(--premium-section);
  background: linear-gradient(180deg, var(--premium-paper), var(--premium-surface));
}

.landing > .case-strip:not(:has(.case-grid)) .steps {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--premium-line);
  border-radius: 18px;
  background: var(--premium-surface);
}

.landing > .case-strip:not(:has(.case-grid)) .step,
.landing > .case-strip:not(:has(.case-grid)) .step + .step,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2),
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(3) {
  min-height: 0;
  padding: clamp(26px, 2.5vw, 38px) !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.landing > .case-strip:not(:has(.case-grid)) .step + .step {
  border-inline-start: 1px solid var(--premium-line);
}

.landing > .case-strip:not(:has(.case-grid)) .step p {
  color: var(--premium-muted);
}

/* Evidence owns the accent; headings stay outside the coloured field. */
.landing > .section:has(.proof-picture),
.landing > .case-strip:has(.case-grid) {
  background: var(--premium-paper);
}

.landing > .section:has(.proof-picture)::before,
.landing > .case-strip:has(.case-grid)::before {
  display: none;
}

.landing .proof-picture,
.landing .visual-card,
.landing .before-after {
  border: 6px solid var(--premium-dark);
  border-radius: 18px;
  box-shadow: 0 24px 52px rgba(8, 20, 33, .2);
}

.landing .case-grid .case {
  min-height: clamp(300px, 24vw, 400px);
  border: 1px solid rgba(102, 135, 177, .3);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(8, 20, 33, .16);
}

/* FAQ becomes a useful, balanced two-column answer surface. */
.landing > .section:has(.faq) {
  background: var(--premium-surface);
}

.landing > .section:has(.faq) .faq {
  grid-template-columns: minmax(0, .72fr) minmax(420px, 1.28fr);
  align-items: start;
  gap: clamp(32px, 5vw, 78px);
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid var(--premium-line);
  border-radius: 22px;
  background: var(--premium-paper);
  box-shadow: none;
}

.landing > .section:has(.faq) .faq h2 {
  max-inline-size: 14ch;
  font-size: clamp(36px, 3.1vw, 54px);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.landing > .section:has(.faq) .faq > :last-child {
  border: 1px solid var(--premium-line);
  border-radius: 16px;
  background: var(--premium-surface);
}

.landing > .section:has(.faq) summary {
  min-height: 68px;
  padding: 18px 22px;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.28;
}

.landing > .section:has(.faq) details p {
  max-inline-size: 62ch;
  padding: 0 22px 22px;
  color: var(--premium-muted);
  font-size: 16px;
  line-height: 1.55;
}

/* Compact close: the CTA earns attention with contrast, not a giant empty panel. */
.landing .final-cta {
  padding-block: var(--premium-section);
  background: var(--premium-paper);
}

.landing .final-cta .section-inner {
  min-height: clamp(300px, 23vw, 390px);
  padding: clamp(34px, 4.5vw, 64px);
  border: 1px solid rgba(134, 174, 220, .34);
  border-radius: 20px;
  background: linear-gradient(135deg, #0a111b, #132237);
  box-shadow: 0 26px 56px rgba(8, 19, 33, .22);
}

.landing .final-cta h2 {
  max-inline-size: min(100%, 22ch);
  font-size: clamp(38px, 3.8vw, 62px);
  line-height: 1;
  letter-spacing: -.035em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

.landing .final-cta .final-value {
  max-inline-size: 58ch;
  color: #d8e3f2 !important;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.55;
}

.landing .site-footer {
  background: #09111b;
}

/* One responsive grammar: two columns on tablet, one reading column on phone. */
@media (max-width: 1080px) {
  .landing .hero,
  .landing .hero-inner { min-height: 0; }

  .landing > .tool-shell + .section .grid-3,
  .landing > .tool-shell + .section .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .landing > .tool-shell + .section .feature:nth-child(odd) { border-inline-start: 0; }
  .landing > .tool-shell + .section .feature:nth-child(n + 3) { border-top: 1px solid var(--premium-line); }

  .landing > .section:has(.faq) .faq { grid-template-columns: 1fr; gap: 28px; }
  .landing > .section:has(.faq) .faq h2 { max-inline-size: 19ch; }
}

@media (max-width: 760px) {
  .landing .hero { min-height: 0; }

  .landing .hero-copy h1,
  .landing:not(.lp01) .hero-copy h1,
  .lp01 h1 {
    max-inline-size: 100%;
    font-size: clamp(37px, 10.4vw, 48px) !important;
    line-height: 1;
    letter-spacing: -.04em;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .landing .hero-copy .lede { margin-block-end: 24px; }
  .landing .hero-visual,
  .landing .hero-stage { border-width: 5px; border-radius: 16px; }

  .landing .tool-shell .section-inner { padding: 24px 20px; border-radius: 18px; }

  .landing > .tool-shell + .section .grid-3,
  .landing > .tool-shell + .section .grid-4 { grid-template-columns: 1fr; }

  .landing > .tool-shell + .section .feature,
  .landing > .tool-shell + .section .feature + .feature,
  .landing > .tool-shell + .section .feature:first-child {
    padding: 26px 0;
    border-inline-start: 0;
    border-top: 1px solid var(--premium-line);
  }

  .landing > .tool-shell + .section .feature:first-child { border-top: 0; }

  .landing > .case-strip:not(:has(.case-grid)) .steps { border-radius: 16px; }
  .landing > .case-strip:not(:has(.case-grid)) .step + .step { border-top: 1px solid var(--premium-line); border-inline-start: 0; }

  .landing > .section:has(.faq) .faq { padding: 24px 20px; border-radius: 18px; }
  .landing > .section:has(.faq) .faq h2 { max-inline-size: 100%; font-size: clamp(34px, 9vw, 44px); }
  .landing > .section:has(.faq) summary { padding-inline: 18px; }
  .landing > .section:has(.faq) details p { padding-inline: 18px; }

  .landing .case-grid .case { min-height: 300px; }

  .landing .final-cta .section-inner { min-height: 0; padding: 34px 22px; border-radius: 18px; }
  .landing .final-cta h2 { max-inline-size: 100%; font-size: clamp(34px, 9vw, 48px); overflow-wrap: normal; word-break: normal; hyphens: none; }
}

/* LP09: the motion proof uses the same centred editorial axis as LP03. */
.landing.lp09 #lp09-examples .section-head {
  display: grid;
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.landing.lp09 #lp09-examples .section-head h2 {
  inline-size: min(100%, 22ch);
  margin-inline: auto;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

.landing.lp09 #lp09-examples .section-head p {
  inline-size: min(100%, 64ch);
  margin: clamp(18px, 1.8vw, 26px) auto 0;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 760px) {
  .landing.lp09 #lp09-examples .section-head {
    margin-inline: 0;
    justify-items: start;
    text-align: left;
  }

  .landing.lp09 #lp09-examples .section-head h2,
  .landing.lp09 #lp09-examples .section-head p {
    inline-size: 100%;
    margin-inline: 0;
    text-align: left;
  }
}

/* LP09 proof — the mint form belongs to the motion visual, not beneath copy.
   The headline gets its own quiet reading field, so contrast stays stable at
   every viewport instead of depending on where the decorative shape lands. */
.landing.lp09 #lp09-examples::before {
  top: clamp(420px, 31vw, 560px);
  right: -8vw;
  opacity: .66;
}

.landing.lp09 #lp09-examples .section-head {
  position: relative;
  z-index: 2;
  width: min(100%, 960px);
  max-width: 960px;
  margin: 0 auto clamp(32px, 3.6vw, 52px);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 4vw, 52px);
  border: 1px solid rgba(43, 119, 106, .2);
  border-radius: clamp(22px, 2.4vw, 32px);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 22px 54px rgba(25, 78, 68, .1);
}

.landing.lp09 #lp09-examples .section-head h2 {
  color: #11161b;
}

.landing.lp09 #lp09-examples .section-head p {
  color: #263c39;
  font-weight: 540;
  line-height: 1.52;
}

@media (max-width: 760px) {
  .landing.lp09 #lp09-examples::before {
    top: auto;
    right: -108px;
    bottom: -88px;
    opacity: .44;
  }

  .landing.lp09 #lp09-examples .section-head {
    margin-bottom: 24px;
    padding: 24px 20px 26px;
    border-radius: 20px;
  }
}

/* LP03: the three route promises remain a compact triptych on tablets too. */
@media (min-width: 641px) {
  .landing.lp03 > .tool-shell + .section .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
  }

  .landing.lp03 > .tool-shell + .section .feature,
  .landing.lp03 > .tool-shell + .section .feature + .feature,
  .landing.lp03 > .tool-shell + .section .feature:first-child {
    min-height: clamp(220px, 24vw, 290px);
    padding: clamp(22px, 2.4vw, 32px);
  }

  .landing.lp03 > .tool-shell + .section .feature h3 {
    max-width: 11ch;
    font-size: clamp(22px, 2.1vw, 28px);
  }

  .landing.lp03 > .tool-shell + .section .feature p {
    max-width: 22ch;
    font-size: clamp(16px, 1.35vw, 18px);
  }
}

.landing.lp03 > .tool-shell + .section .feature:nth-child(1) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-primary) 88%, #fff), color-mix(in srgb, var(--scene) 38%, var(--surface-primary))) !important;
}

.landing.lp03 > .tool-shell + .section .feature:nth-child(2) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--scene) 62%, var(--surface-primary)), color-mix(in srgb, var(--surface-elevated) 88%, var(--blue))) !important;
}

.landing.lp03 > .tool-shell + .section .feature:nth-child(3) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-accent) 82%, #fff), color-mix(in srgb, var(--scene-strong) 34%, var(--surface-primary))) !important;
}

/* Tablet benefit grids preserve comparison instead of turning into sparse rows. */
@media (min-width: 641px) and (max-width: 900px) {
  .landing:not(.lp03) > .tool-shell + .section .grid-3,
  .landing:not(.lp03) > .tool-shell + .section .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 20px);
  }

  .landing:not(.lp03) > .tool-shell + .section .grid-3 .feature:nth-child(3) {
    grid-column: 1 / -1;
  }

  .landing:not(.lp03) > .tool-shell + .section .feature,
  .landing:not(.lp03) > .tool-shell + .section .feature + .feature,
  .landing:not(.lp03) > .tool-shell + .section .feature:first-child {
    min-height: 0;
    padding: clamp(22px, 2.8vw, 30px);
  }

  .landing:not(.lp03) > .tool-shell + .section .feature h3,
  .landing:not(.lp03) > .tool-shell + .section .feature p {
    max-width: none;
  }
}

/* v101: LP-02 proof copy stays legible without flattening the scene background.
   The light editorial plate creates one clear reading surface above the proof. */
.landing.lp02 #lp02-examples .section-head {
  position: relative;
  z-index: 1;
  width: min(100%, 1040px);
  max-width: 1040px;
  margin-bottom: clamp(28px, 3vw, 42px);
  padding: clamp(28px, 3.2vw, 44px) clamp(26px, 3.8vw, 52px);
  overflow: hidden;
  border: 1px solid rgba(20, 115, 230, .2);
  border-radius: var(--radius-panel);
  background-color: rgba(255, 255, 255, .95);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(244, 249, 255, .94));
  box-shadow: 0 22px 54px rgba(22, 61, 110, .12);
}

.landing.lp02 #lp02-examples .section-head::before {
  content: "";
  display: block;
  width: clamp(72px, 7vw, 108px);
  height: 5px;
  margin-bottom: clamp(22px, 2.2vw, 30px);
  border-radius: 999px;
  background: linear-gradient(90deg, #1473e6 0%, #58cfff 100%);
}

.landing.lp02 #lp02-examples .section-head h2 {
  max-width: 18ch;
  color: #10141c;
  text-wrap: balance;
}

.landing.lp02 #lp02-examples .section-head p {
  max-width: 66ch;
  margin-top: clamp(16px, 1.8vw, 24px);
  color: #29384c;
  font-weight: 500;
  line-height: 1.55;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .landing.lp02 #lp02-examples .section-head {
    padding: 24px 20px 26px;
    border-radius: 18px;
  }

  .landing.lp02 #lp02-examples .section-head::before {
    height: 4px;
    margin-bottom: 18px;
  }
}

/* v102: LP-02 scope map. Each card demonstrates a different editing scale
   instead of repeating the same empty text container four times. */
.landing.lp02 #lp02-ideas {
  background:
    radial-gradient(circle at 92% 12%, rgba(108, 92, 255, .18), transparent 27%),
    radial-gradient(circle at 8% 88%, rgba(69, 200, 255, .16), transparent 25%),
    linear-gradient(145deg, #eef4ff 0%, #f7f4ff 48%, #eef8ff 100%);
}

.landing.lp02 #lp02-ideas .section-inner {
  padding-block: clamp(72px, 8vw, 118px);
}

.landing.lp02 #lp02-ideas .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .72fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(34px, 4.5vw, 64px);
}

.landing.lp02 #lp02-ideas .section-kicker {
  display: block;
  margin-bottom: 14px;
  color: #1473e6;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.landing.lp02 #lp02-ideas .section-head h2,
.landing.lp02 #lp02-ideas .section-head p {
  max-width: none;
  margin: 0;
}

.landing.lp02 #lp02-ideas .section-head p {
  color: #35455e;
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.48;
  text-wrap: pretty;
}

.landing.lp02 #lp02-ideas .lp02-scope-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  border: 0;
}

.landing.lp02 #lp02-ideas .lp02-scope-card {
  position: relative;
  grid-column: span 5;
  min-height: 390px;
  padding: clamp(24px, 2.5vw, 36px);
  overflow: hidden;
  border: 1px solid rgba(113, 145, 196, .25);
  border-radius: 26px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .98), rgba(247, 250, 255, .92));
  box-shadow: 0 22px 60px rgba(38, 74, 132, .11);
}

.landing.lp02 #lp02-ideas .lp02-scope-card:nth-child(1),
.landing.lp02 #lp02-ideas .lp02-scope-card:nth-child(4) {
  grid-column: span 7;
}

.landing.lp02 #lp02-ideas .lp02-scope-card::before {
  display: none;
}

.landing.lp02 #lp02-ideas .lp02-scope-card > b {
  margin: 26px 0 10px !important;
  color: #1473e6;
  font-size: 14px;
  font-weight: 820;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.landing.lp02 #lp02-ideas .lp02-scope-card > h3 {
  max-width: none;
  color: #10141c;
  font-size: clamp(28px, 2.45vw, 38px);
  line-height: 1.02;
}

.landing.lp02 #lp02-ideas .lp02-scope-card > p {
  max-width: 35ch;
  margin-top: 16px !important;
  color: #4a576b;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.48;
}

.landing.lp02 #lp02-ideas .lp02-scope-visual {
  position: relative;
  height: clamp(138px, 12vw, 178px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: #121722;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
}

.landing.lp02 #lp02-ideas .lp02-scope-canvas {
  position: absolute;
  inset: 22px;
  border-radius: 11px;
  background:
    radial-gradient(circle at 70% 28%, rgba(100, 214, 255, .9), transparent 19%),
    radial-gradient(circle at 32% 72%, rgba(85, 101, 247, .88), transparent 24%),
    linear-gradient(135deg, #243047, #151b28 62%);
}

.landing.lp02 #lp02-ideas .lp02-scope-card--frame .lp02-scope-visual i {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: #f7fbff;
  border-style: solid;
  filter: drop-shadow(0 0 7px rgba(83, 188, 255, .7));
}

.landing.lp02 #lp02-ideas .lp02-scope-card--frame .lp02-scope-visual i:nth-of-type(1) { top: 34px; left: 34px; border-width: 2px 0 0 2px; }
.landing.lp02 #lp02-ideas .lp02-scope-card--frame .lp02-scope-visual i:nth-of-type(2) { top: 34px; right: 34px; border-width: 2px 2px 0 0; }
.landing.lp02 #lp02-ideas .lp02-scope-card--frame .lp02-scope-visual i:nth-of-type(3) { right: 34px; bottom: 34px; border-width: 0 2px 2px 0; }
.landing.lp02 #lp02-ideas .lp02-scope-card--frame .lp02-scope-visual i:nth-of-type(4) { bottom: 34px; left: 34px; border-width: 0 0 2px 2px; }

.landing.lp02 #lp02-ideas .lp02-scope-card--area .lp02-scope-canvas {
  background:
    linear-gradient(90deg, rgba(7, 13, 24, .66) 0 26%, transparent 26% 74%, rgba(7, 13, 24, .66) 74%),
    linear-gradient(0deg, rgba(7, 13, 24, .66) 0 25%, transparent 25% 75%, rgba(7, 13, 24, .66) 75%),
    radial-gradient(circle at 50% 48%, #7a65ff 0 16%, #35b8ff 17% 25%, #263149 26% 100%);
}

.landing.lp02 #lp02-ideas .lp02-scope-card--area .lp02-scope-visual i {
  position: absolute;
  inset: 38px 29%;
  border: 2px dashed rgba(255, 255, 255, .9);
  border-radius: 9px;
  box-shadow: 0 0 24px rgba(66, 174, 255, .32);
}

.landing.lp02 #lp02-ideas .lp02-scope-card--object .lp02-scope-visual,
.landing.lp02 #lp02-ideas .lp02-scope-card--background .lp02-scope-visual {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: center;
  padding: 24px;
}

.landing.lp02 #lp02-ideas .lp02-scope-card--object .lp02-scope-visual span {
  height: 74%;
  border-radius: 14px;
  background: linear-gradient(160deg, #293247, #1c2230);
}

.landing.lp02 #lp02-ideas .lp02-scope-card--object .lp02-scope-visual span:nth-child(2) {
  height: 90%;
  border: 2px solid #68cfff;
  background:
    radial-gradient(circle at 50% 45%, #ffffff 0 9%, #54c8ff 10% 18%, transparent 19%),
    linear-gradient(150deg, #3154d4, #733fff);
  box-shadow: 0 0 30px rgba(80, 129, 255, .45);
  transform: translateY(-3px);
}

.landing.lp02 #lp02-ideas .lp02-scope-card--background .lp02-scope-visual {
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.landing.lp02 #lp02-ideas .lp02-scope-card--background .lp02-scope-visual span {
  height: 100%;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(145deg, #1e2b45, #274f80);
}

.landing.lp02 #lp02-ideas .lp02-scope-card--background .lp02-scope-visual span:nth-child(2) {
  border-radius: 0 12px 12px 0;
  background: linear-gradient(145deg, #5535a4, #a24fd6);
}

.landing.lp02 #lp02-ideas .lp02-scope-card--background .lp02-scope-visual i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 82px;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 30px 30px 16px 16px;
  background: linear-gradient(160deg, #f7fbff, #b9c8dd);
  box-shadow: 0 12px 28px rgba(6, 12, 28, .35);
  transform: translate(-50%, -50%);
}

@media (max-width: 900px) {
  .landing.lp02 #lp02-ideas .section-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .landing.lp02 #lp02-ideas .lp02-scope-card,
  .landing.lp02 #lp02-ideas .lp02-scope-card:nth-child(1),
  .landing.lp02 #lp02-ideas .lp02-scope-card:nth-child(4) {
    grid-column: span 6;
  }
}

@media (max-width: 640px) {
  .landing.lp02 #lp02-ideas .section-inner {
    padding-block: 58px;
  }

  .landing.lp02 #lp02-ideas .lp02-scope-card,
  .landing.lp02 #lp02-ideas .lp02-scope-card:nth-child(1),
  .landing.lp02 #lp02-ideas .lp02-scope-card:nth-child(4) {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 20px;
    border-radius: 20px;
  }

  .landing.lp02 #lp02-ideas .lp02-scope-visual {
    height: 142px;
  }

  .landing.lp02 #lp02-ideas .lp02-scope-card > b {
    margin-top: 22px !important;
  }
}

/* v103: shared footer alignment.
   The footer is a two-zone composition: a compact brand/copyright block and
   a legible product directory. Keeping the rules here shared prevents the
   eleven routes from drifting apart at wide and narrow breakpoints. */
.site-footer {
  padding-block: clamp(52px, 5.2vw, 76px) clamp(40px, 4.2vw, 58px) !important;
}

.site-footer .footer-inner {
  grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr) !important;
  align-items: start !important;
  gap: clamp(48px, 7vw, 112px) !important;
}

.site-footer .footer-inner > :first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.site-footer .brand {
  width: auto;
  padding: 0 !important;
  border: 0 !important;
}

.site-footer .footer-note {
  width: min(100%, 340px);
  max-width: none;
  margin-top: 26px !important;
  padding-top: 22px;
  border-top: 1px solid rgba(157, 186, 234, .2);
  font-size: 14px;
  line-height: 1.5;
}

.site-footer .footer-links {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start;
  align-content: start;
  column-gap: clamp(24px, 3.4vw, 52px) !important;
  row-gap: 2px !important;
  margin: 0 !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid rgba(157, 186, 234, .2);
  border-bottom: 0 !important;
}

.site-footer .footer-links a {
  display: flex;
  align-items: flex-start;
  min-height: 0;
  padding: 11px 0;
  color: #cbd6e8 !important;
  font-size: 15px;
  line-height: 1.42;
  text-wrap: balance;
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible {
  color: #fff !important;
}

@media (max-width: 900px) {
  .site-footer .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .site-footer .footer-note {
    width: min(100%, 420px);
  }

  .site-footer .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 720px;
  }
}

@media (max-width: 560px) {
  .site-footer {
    padding-block: 42px 34px !important;
  }

  .site-footer .footer-inner {
    gap: 28px !important;
  }

  .site-footer .footer-note {
    margin-top: 20px !important;
    padding-top: 18px;
  }

  .site-footer .footer-links {
    column-gap: 20px !important;
    row-gap: 0 !important;
    padding-top: 8px !important;
  }

  .site-footer .footer-links a {
    padding-block: 10px;
    font-size: 14px;
  }
}

/* v105: LP-04 generator entry has one clear desktop composition. The action
   panel is a deliberate destination, rather than a wide empty box with copy
   stranded in its top-left corner. */
.landing.lp04 #lp04-demo .tool-grid {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: stretch;
}

.landing.lp04 #lp04-demo .tool-copy {
  align-self: center;
}

.landing.lp04 #lp04-demo .generator-start {
  min-height: clamp(330px, 27vw, 430px);
  padding: clamp(34px, 4vw, 58px);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.landing.lp04 #lp04-demo .generator-start h3 {
  max-width: 13ch;
  margin: 0 auto;
  font-size: clamp(30px, 2.6vw, 44px);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.landing.lp04 #lp04-demo .generator-start p {
  max-width: 36ch;
  margin: 22px auto 30px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.48;
}

.landing.lp04 #lp04-demo .generator-start .btn {
  align-self: center;
  min-width: min(100%, 252px);
  justify-content: center;
}

@media (max-width: 900px) {
  .landing.lp04 #lp04-demo .tool-grid {
    grid-template-columns: 1fr;
  }

  .landing.lp04 #lp04-demo .generator-start {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .landing.lp04 #lp04-demo .generator-start {
    padding: 30px 22px;
  }

  .landing.lp04 #lp04-demo .generator-start h3 {
    max-width: 12ch;
    font-size: clamp(28px, 9vw, 36px);
  }

  .landing.lp04 #lp04-demo .generator-start p {
    margin-top: 18px;
    margin-bottom: 26px;
  }
}

@media (max-width: 380px) {
  .site-footer .footer-links {
    grid-template-columns: 1fr !important;
  }
}

/* v104: LP-03 route choice is one consistent reading system.  Headings use
   the full content column on desktop, so a short title does not make a
   neighbouring title look accidentally broken. */
.landing.lp03 > .case-strip:not(:has(.case-grid)) .steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(16px, 1.5vw, 22px);
}

.landing.lp03 > .case-strip:not(:has(.case-grid)) .step,
.landing.lp03 > .case-strip:not(:has(.case-grid)) .step + .step,
.landing.lp03 > .case-strip:not(:has(.case-grid)) .step:nth-child(2),
.landing.lp03 > .case-strip:not(:has(.case-grid)) .step:nth-child(3) {
  grid-template-columns: 48px minmax(0, 1fr);
  align-content: center;
  min-height: 178px;
  column-gap: 18px;
  row-gap: 12px;
  padding: clamp(24px, 2.1vw, 32px) !important;
}

.landing.lp03 > .case-strip:not(:has(.case-grid)) .step::before,
.landing.lp03 > .case-strip:not(:has(.case-grid)) .step:nth-child(2)::before {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.landing.lp03 > .case-strip:not(:has(.case-grid)) .step h3,
.landing.lp03 > .case-strip:not(:has(.case-grid)) .step:nth-child(2) h3 {
  width: 100%;
  max-width: none;
  font-size: clamp(23px, 1.65vw, 28px);
  text-wrap: pretty;
}

.landing.lp03 > .case-strip:not(:has(.case-grid)) .step p,
.landing.lp03 > .case-strip:not(:has(.case-grid)) .step:nth-child(2) p {
  max-width: none;
  line-height: 1.5;
}

@media (max-width: 1080px) {
  .landing.lp03 > .case-strip:not(:has(.case-grid)) .steps {
    grid-template-columns: 1fr;
  }

  .landing.lp03 > .case-strip:not(:has(.case-grid)) .step,
  .landing.lp03 > .case-strip:not(:has(.case-grid)) .step + .step,
  .landing.lp03 > .case-strip:not(:has(.case-grid)) .step:nth-child(2),
  .landing.lp03 > .case-strip:not(:has(.case-grid)) .step:nth-child(3) {
    min-height: 0;
    padding: 24px !important;
  }
}

@media (max-width: 560px) {
  .landing.lp03 > .case-strip:not(:has(.case-grid)) .step,
  .landing.lp03 > .case-strip:not(:has(.case-grid)) .step + .step,
  .landing.lp03 > .case-strip:not(:has(.case-grid)) .step:nth-child(2),
  .landing.lp03 > .case-strip:not(:has(.case-grid)) .step:nth-child(3) {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 10px;
    padding: 20px !important;
  }

  .landing.lp03 > .case-strip:not(:has(.case-grid)) .step::before,
  .landing.lp03 > .case-strip:not(:has(.case-grid)) .step:nth-child(2)::before {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
}

/* v106: Cold luxury campaign layer.
   The product keeps its light Adobe-like canvas, but every major chapter now
   has a deliberate material field, a clear edge and a conversion-focused
   density. Photoshop blue remains the only action colour. */
:root {
  --lux-ink: #0d1726;
  --lux-chrome: #101824;
  --lux-chrome-soft: #182332;
  --lux-line: rgba(25, 55, 99, .18);
  --lux-line-light: rgba(255, 255, 255, .74);
  --lux-shadow: 0 28px 68px rgba(10, 23, 43, .16);
  --lux-shadow-soft: 0 18px 46px rgba(20, 55, 98, .12);
}

.landing {
  isolation: isolate;
  background:
    radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--flare-a) 21%, transparent) 0 11%, transparent 30%),
    linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 94%, var(--scene)) 54%, var(--paper) 100%);
}

.landing > .section,
.landing > .case-strip,
.landing > .tool-shell {
  position: relative;
}

/* HERO — a blue-lit studio set rather than a plain pastel sheet. */
.landing .hero,
.landing.lp01 .hero,
.landing.lp02 .hero,
.landing.lp03 .hero,
.landing.lp04 .hero,
.landing.lp05 .hero,
.landing.lp06 .hero,
.landing.lp07 .hero,
.landing.lp08 .hero,
.landing.lp09 .hero,
.landing.lp10 .hero,
.landing.lp11 .hero {
  min-height: clamp(640px, 48vw, 760px);
  background:
    radial-gradient(ellipse 62% 72% at 88% 46%, color-mix(in srgb, var(--flare-a) 38%, transparent) 0%, transparent 70%),
    linear-gradient(116deg, color-mix(in srgb, var(--scene) 77%, #fff) 0%, color-mix(in srgb, var(--scene) 88%, #fff) 45%, color-mix(in srgb, var(--scene) 70%, var(--flare-b)) 100%) !important;
}

.landing .hero::before {
  position: absolute;
  z-index: 0;
  top: -18%;
  right: -9%;
  width: min(58vw, 980px);
  height: min(58vw, 980px);
  border: 1px solid color-mix(in srgb, var(--blue) 42%, transparent);
  border-radius: 48% 52% 61% 39% / 45% 44% 56% 55%;
  background:
    linear-gradient(138deg, color-mix(in srgb, var(--flare-a) 16%, transparent), transparent 58%),
    radial-gradient(circle at 30% 32%, rgba(255, 255, 255, .74) 0 2%, transparent 3% 100%);
  box-shadow: inset 0 0 0 22px color-mix(in srgb, #fff 18%, transparent);
  content: "";
  opacity: .92;
  pointer-events: none;
}

.landing .hero::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30%;
  background: linear-gradient(0deg, color-mix(in srgb, var(--scene) 44%, transparent), transparent);
  content: "";
  pointer-events: none;
}

.hero-inner,
.lp01 .hero-inner,
.lp02 .hero-inner,
.lp03 .hero-inner,
.lp04 .hero-inner,
.lp05 .hero-inner,
.lp06 .hero-inner,
.lp07 .hero-inner,
.lp08 .hero-inner,
.lp09 .hero-inner,
.lp10 .hero-inner,
.lp11 .hero-inner {
  position: relative;
  z-index: 1;
  min-height: clamp(640px, 48vw, 760px);
  gap: clamp(34px, 4.4vw, 72px);
}

.landing .hero-copy {
  max-width: 620px;
}

.landing .hero-copy h1 {
  max-width: 11ch;
  margin-bottom: 22px;
  text-wrap: balance;
}

/* Long product names must use the available desktop column instead of
   breaking a single word into an awkward extra line. LP-01 keeps its
   intentionally compact editorial lock-up. */
.landing:not(.lp01) .hero-copy h1 {
  max-width: 16ch;
}

.landing .hero-copy .lede {
  max-width: 47ch;
  margin-bottom: 30px;
  color: #263a57 !important;
  font-weight: 530;
  line-height: 1.52;
}

.landing .hero-copy .helper {
  max-width: 43ch;
  color: #3b506d !important;
}

.landing .hero-visual,
.landing .hero-stage {
  border: 8px solid var(--lux-ink);
  border-radius: 22px;
  background-color: var(--lux-chrome);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .52),
    0 34px 72px rgba(9, 22, 41, .28),
    -16px 16px 0 color-mix(in srgb, var(--blue) 14%, transparent);
}

.landing .hero-visual::after,
.landing .hero-stage::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(128deg, rgba(255, 255, 255, .16), transparent 17% 70%, rgba(27, 113, 230, .18));
  content: "";
  pointer-events: none;
}

.landing .actions .btn {
  min-height: 56px;
  padding-inline: 28px;
  border-color: #0f69d5;
  border-radius: 14px;
  background: linear-gradient(135deg, #1473e6 0%, #1267d3 100%);
  box-shadow: 0 14px 24px rgba(20, 115, 230, .24), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.landing .actions .btn:hover {
  background: linear-gradient(135deg, #1b7ff5 0%, #095dc9 100%);
  box-shadow: 0 18px 30px rgba(20, 115, 230, .30), inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* TOOL SURFACE — a focused editor bench, not a large blank light panel. */
.landing .tool-shell {
  padding-block: clamp(56px, 6vw, 86px);
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--flare-a) 22%, transparent) 0 13%, transparent 32%),
    linear-gradient(110deg, color-mix(in srgb, var(--scene) 36%, #fff), var(--paper));
}

.landing .tool-shell .section-inner {
  padding: clamp(28px, 3.4vw, 52px);
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: 26px;
  background:
    linear-gradient(118deg, color-mix(in srgb, var(--scene) 88%, #fff), color-mix(in srgb, var(--scene) 60%, var(--flare-b)));
  box-shadow: var(--lux-shadow);
}

.landing .tool-grid {
  gap: clamp(28px, 4vw, 64px);
}

.landing .tool-copy h2 {
  max-width: 13.5ch;
  text-wrap: balance;
}

.landing .tool-copy p {
  color: #32445f;
  font-weight: 510;
}

.landing .demo,
.landing .demo.dark {
  min-height: 0;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(142, 177, 228, .36);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(29, 42, 60, .98), rgba(12, 20, 32, .99));
  box-shadow: 0 20px 42px rgba(7, 18, 35, .26), inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* FEATURES — short, structured editorial tiles with no dead column space. */
.landing > .tool-shell + .section {
  overflow: hidden;
  background:
    linear-gradient(104deg, color-mix(in srgb, var(--scene) 21%, #fff), var(--surface-secondary) 52%, color-mix(in srgb, var(--flare-a) 12%, #fff));
}

.landing > .tool-shell + .section .section-inner {
  position: relative;
}

.landing > .tool-shell + .section .grid-3,
.landing > .tool-shell + .section .grid-4 {
  gap: clamp(12px, 1.4vw, 20px);
  overflow: visible;
  border: 0;
  background: transparent;
}

.landing > .tool-shell + .section .feature,
.landing > .tool-shell + .section .feature + .feature,
.landing > .tool-shell + .section .feature:first-child {
  min-height: clamp(205px, 18vw, 252px);
  padding: clamp(24px, 2.25vw, 34px);
  border: 1px solid var(--lux-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  box-shadow: none;
}

.landing > .tool-shell + .section .feature:nth-child(even) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--scene) 18%, #fff), rgba(255, 255, 255, .78));
}

.landing > .tool-shell + .section .feature::before {
  display: block;
  width: 44px;
  height: 4px;
  margin: 0 0 20px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 36%, transparent));
  content: "";
}

.landing > .tool-shell + .section .feature b,
.landing > .tool-shell + .section .feature:first-child b {
  margin: 0 0 8px;
}

.landing > .tool-shell + .section .feature h3 {
  max-width: 13ch;
}

/* PROCESS — a compact, convincing three-part premium service sequence. */
.landing > .case-strip:not(:has(.case-grid)) {
  padding-block: clamp(58px, 6vw, 88px);
  background:
    radial-gradient(circle at 88% 56%, color-mix(in srgb, var(--flare-b) 20%, transparent) 0 17%, transparent 40%),
    linear-gradient(135deg, color-mix(in srgb, var(--scene) 30%, #fff), var(--surface-primary) 54%, color-mix(in srgb, var(--scene) 17%, #fff));
}

.landing > .case-strip:not(:has(.case-grid)) .section-head {
  max-width: 900px;
  margin-bottom: clamp(28px, 3vw, 42px);
}

.landing > .case-strip:not(:has(.case-grid)) .steps {
  gap: clamp(12px, 1.4vw, 20px);
}

.landing > .case-strip:not(:has(.case-grid)) .step,
.landing > .case-strip:not(:has(.case-grid)) .step + .step,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2),
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(3) {
  min-height: clamp(192px, 15vw, 230px);
  padding: clamp(22px, 2vw, 30px) !important;
  border-color: var(--lux-line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(248, 251, 255, .80));
  box-shadow: none;
}

.landing > .case-strip:not(:has(.case-grid)) .step::before,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2)::before {
  background: linear-gradient(145deg, #1778eb, #0e5eca);
  box-shadow: 0 12px 22px rgba(19, 104, 234, .22);
}

.landing > .case-strip:not(:has(.case-grid)) .step p,
.landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2) p {
  color: #40536c;
}

/* IMAGE PROOF AND USE CASES — bold frames hold the image, never text over it. */
.landing > .section:has(.proof-picture),
.landing > .case-strip:has(.case-grid) {
  background:
    radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--flare-a) 24%, transparent) 0 12%, transparent 32%),
    linear-gradient(118deg, color-mix(in srgb, var(--scene) 28%, #fff), var(--paper) 60%, color-mix(in srgb, var(--scene) 15%, #fff));
}

.landing .proof-picture,
.landing .visual-card,
.landing .before-after {
  overflow: hidden;
  border: 7px solid var(--lux-ink);
  border-radius: 22px;
  box-shadow: 0 26px 58px rgba(10, 27, 49, .20), 12px 12px 0 color-mix(in srgb, var(--blue) 12%, transparent);
}

.landing .proof-picture img,
.landing .visual-card img,
.landing .before-after img {
  border-radius: calc(22px - 7px);
}

.landing > .case-strip:has(.case-grid) {
  padding-block: clamp(60px, 6vw, 92px);
}

.landing .case-grid {
  gap: clamp(16px, 1.6vw, 24px);
}

.landing .case-grid .case {
  min-height: clamp(340px, 29vw, 450px);
  padding: clamp(26px, 2.5vw, 40px);
  border: 1px solid rgba(147, 187, 235, .38);
  border-radius: 22px;
  background:
    linear-gradient(120deg, rgba(8, 20, 37, .94) 0%, rgba(9, 24, 44, .82) 48%, rgba(9, 24, 44, .22) 76%),
    #101824;
  box-shadow: 0 24px 48px rgba(8, 20, 39, .20);
}

.landing .case-grid .case > span,
.landing .case-grid .case > h3,
.landing .case-grid .case > p {
  position: relative;
  z-index: 2;
  max-width: min(78%, 29rem);
}

.landing .case-grid .case > span {
  margin-bottom: clamp(26px, 3vw, 58px);
  background: rgba(9, 22, 41, .72);
}

.landing .case-grid .case > p {
  color: #dce9fb;
}

/* FAQ — contrast and density without a large empty left-hand field. */
.landing > .section:has(.faq) {
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--scene) 16%, #fff), var(--paper) 48%, color-mix(in srgb, var(--flare-a) 9%, #fff));
}

.landing > .section:has(.faq) .faq {
  grid-template-columns: minmax(270px, .68fr) minmax(0, 1.32fr);
  gap: clamp(28px, 4vw, 62px);
  padding: clamp(30px, 4vw, 54px);
  border: 1px solid rgba(116, 159, 214, .26);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--blue) 9%, transparent) 0 14%, transparent 36%),
    rgba(247, 250, 255, .84);
  box-shadow: var(--lux-shadow-soft);
}

.landing > .section:has(.faq) .faq h2 {
  max-width: 10ch;
  font-size: clamp(34px, 3.1vw, 52px);
}

.landing > .section:has(.faq) .faq > :last-child {
  border-color: rgba(105, 145, 196, .28);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  box-shadow: none;
}

.landing > .section:has(.faq) summary {
  min-height: 76px;
  padding-block: 18px;
}

.landing > .section:has(.faq) details p {
  padding-top: 8px;
  padding-bottom: 24px;
  color: #40536c;
}

/* CTA and footer finish like a single premium product system. */
.landing .final-cta {
  padding-block: clamp(68px, 7vw, 104px);
  background:
    radial-gradient(circle at 86% 6%, color-mix(in srgb, var(--flare-b) 35%, transparent) 0 18%, transparent 38%),
    #eef4fd;
}

.landing .final-cta .section-inner {
  min-height: clamp(390px, 30vw, 500px);
  padding: clamp(36px, 5vw, 72px);
  border: 1px solid rgba(121, 168, 230, .30);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 24%, rgba(24, 116, 238, .34) 0 2%, transparent 21%),
    radial-gradient(circle at 75% 120%, rgba(86, 92, 236, .26), transparent 45%),
    linear-gradient(136deg, #0b1422, #111d2d 58%, #0d1a29);
  box-shadow: 0 34px 76px rgba(8, 22, 42, .22), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.landing .final-cta h2 {
  max-width: 12ch;
  text-wrap: balance;
}

.landing .final-cta p {
  color: #cfddf2;
}

.landing .final-cta .btn {
  min-height: 56px;
  padding-inline: 28px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1b7ff5, #1266d8);
  box-shadow: 0 14px 28px rgba(4, 77, 177, .44), inset 0 1px 0 rgba(255, 255, 255, .30);
}

.landing .site-footer {
  border-top-color: rgba(91, 138, 196, .36);
  background:
    radial-gradient(circle at 8% 0%, rgba(20, 115, 230, .14), transparent 24%),
    #0b121e;
}

.landing .site-footer .footer-inner {
  gap: clamp(34px, 5vw, 76px);
}

.landing .site-footer .footer-links {
  row-gap: 14px;
}

.landing .site-footer .footer-links a {
  color: #d1dcee;
}

.landing .site-footer .footer-links a:hover {
  color: #62b8ff;
}

@media (max-width: 1080px) {
  .landing .hero,
  .landing .hero-inner {
    min-height: 0;
  }

  .landing .hero::before {
    top: 18%;
    right: -26%;
    width: 72vw;
    height: 72vw;
  }

  .landing > .tool-shell + .section .grid-3,
  .landing > .tool-shell + .section .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing > .tool-shell + .section .feature:last-child {
    border-right: 1px solid var(--lux-line);
  }
}

@media (max-width: 760px) {
  .landing .hero {
    background:
      radial-gradient(circle at 100% 42%, color-mix(in srgb, var(--flare-a) 30%, transparent) 0 17%, transparent 36%),
      linear-gradient(130deg, color-mix(in srgb, var(--scene) 82%, #fff), color-mix(in srgb, var(--scene) 64%, var(--flare-b))) !important;
  }

  .landing .hero::before {
    top: 34%;
    right: -30%;
    width: 110vw;
    height: 110vw;
    opacity: .58;
  }

  .landing .hero-copy h1 {
    max-width: 12ch;
  }

  .landing .hero-visual,
  .landing .hero-stage {
    border-width: 6px;
    border-radius: 18px;
    box-shadow: 0 22px 50px rgba(9, 22, 41, .25), 8px 8px 0 color-mix(in srgb, var(--blue) 12%, transparent);
  }

  .landing .tool-shell .section-inner {
    padding: 22px;
    border-radius: 22px;
  }

  .landing > .tool-shell + .section .grid-3,
  .landing > .tool-shell + .section .grid-4 {
    grid-template-columns: 1fr;
  }

  .landing > .tool-shell + .section .feature,
  .landing > .tool-shell + .section .feature + .feature,
  .landing > .tool-shell + .section .feature:first-child {
    min-height: 0;
    padding: 24px;
    border: 1px solid var(--lux-line);
  }

  .landing > .case-strip:not(:has(.case-grid)) .step,
  .landing > .case-strip:not(:has(.case-grid)) .step + .step,
  .landing > .case-strip:not(:has(.case-grid)) .step:nth-child(2),
  .landing > .case-strip:not(:has(.case-grid)) .step:nth-child(3) {
    min-height: 0;
  }

  .landing .proof-picture,
  .landing .visual-card,
  .landing .before-after {
    border-width: 5px;
    border-radius: 18px;
    box-shadow: 0 20px 42px rgba(10, 27, 49, .17), 7px 7px 0 color-mix(in srgb, var(--blue) 12%, transparent);
  }

  .landing .case-grid .case {
    min-height: 390px;
    padding: 26px;
  }

  .landing .case-grid .case > span,
  .landing .case-grid .case > h3,
  .landing .case-grid .case > p {
    max-width: 100%;
  }

  .landing > .section:has(.faq) .faq {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .landing > .section:has(.faq) .faq h2 {
    max-width: 13ch;
  }

  .landing .final-cta .section-inner {
    min-height: 0;
    padding: 34px 26px;
    border-radius: 22px;
  }
}

/* LP-04 proof — keep the architectural statement on a clear reading field.
   The coloured form begins alongside the media, rather than running beneath
   the headline and its supporting copy. */
.landing.lp04 #lp04-examples::before {
  top: clamp(440px, 32vw, 540px);
  right: -8vw;
  opacity: .68;
}

.landing.lp04 #lp04-examples .section-inner {
  padding-block: clamp(64px, 7vw, 104px);
}

.landing.lp04 #lp04-examples .section-head {
  position: relative;
  z-index: 2;
  width: min(100%, 820px);
  max-width: 820px;
  margin: 0 0 clamp(32px, 3.6vw, 52px) auto;
  padding: 0 0 clamp(20px, 2vw, 28px);
  border-bottom: 1px solid rgba(59, 74, 99, .24);
  text-align: right;
}

.landing.lp04 #lp04-examples .section-head h2 {
  max-width: 14ch;
  margin-left: auto;
  color: #0d1726;
  text-wrap: balance;
}

.landing.lp04 #lp04-examples .section-head p {
  max-width: 58ch;
  margin: clamp(16px, 1.8vw, 24px) 0 0 auto;
  color: #27374e;
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 580;
  line-height: 1.48;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .landing.lp04 #lp04-examples::before {
    top: auto;
    right: -110px;
    bottom: -92px;
    opacity: .48;
  }

  .landing.lp04 #lp04-examples .section-inner {
    padding-block: 54px;
  }

  .landing.lp04 #lp04-examples .section-head,
  .landing.lp04 #lp04-examples .section-head h2,
  .landing.lp04 #lp04-examples .section-head p {
    margin-left: 0;
    text-align: left;
  }
}

/* Final CTA typography — every product shares one wide, centred reading
   column so a single Russian word is never torn apart to preserve a card. */
.landing .final-cta .section-inner {
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: center;
  justify-items: center !important;
  text-align: center !important;
}

.landing .final-cta h2 {
  max-width: min(100%, 32ch);
  margin-inline: auto;
  color: #f7f9ff;
  font-size: clamp(42px, 4.2vw, 68px);
  line-height: .99;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

.landing .final-cta .final-value {
  max-width: min(100%, 58ch);
  margin-inline: auto;
  color: #cfddf2 !important;
  text-wrap: pretty;
}

.landing .final-cta .btn {
  margin-inline: auto;
}

@media (max-width: 760px) {
  .landing .final-cta .section-inner {
    padding-inline: 18px;
  }

  .landing .final-cta h2 {
    inline-size: 100% !important;
    max-width: 100%;
    margin-inline: 0;
    justify-self: stretch !important;
    font-size: clamp(27px, 7.6vw, 48px);
    letter-spacing: -.045em;
    line-height: 1.04;
  }
}

@media (max-width: 360px) {
  .landing .final-cta .section-inner {
    padding-inline: 10px;
  }

  .landing .final-cta h2 {
    font-size: clamp(25px, 8vw, 28px);
    letter-spacing: -.055em;
  }
}

/* LP-07 presents two equal local-edit paths.  Keeping the inherited
   three-column grid created an empty, non-interactive third of the editor. */
.landing.lp07 #lp07-demo .mode-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(12px, 1.2vw, 18px);
}

.landing.lp07 #lp07-demo .mode-card {
  display: flex;
  flex-direction: column;
  min-height: clamp(236px, 17vw, 292px);
  padding: clamp(22px, 2vw, 30px);
}

.landing.lp07 #lp07-demo .mode-card > p {
  margin-top: auto !important;
}

@media (max-width: 600px) {
  .landing.lp07 #lp07-demo .mode-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* LP-07 uses a photographic proof and a single editor rail instead of a
   detached grid of generic benefit cards. */
.landing.lp07 #lp07-mask {
  background:
    radial-gradient(circle at 14% 16%, rgba(47, 122, 255, .14), transparent 31%),
    linear-gradient(135deg, #edf3fb 0%, #f8fbff 55%, #e8f1ff 100%);
}

.landing.lp07 #lp07-mask .lp07-edit-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  align-items: stretch;
}

.landing.lp07 #lp07-mask .lp07-edit-story__visual {
  display: block;
  min-inline-size: 0;
  overflow: hidden;
  border: 7px solid #101824;
  border-radius: 22px;
  background: #101824;
  box-shadow: 0 26px 58px rgba(15, 29, 53, .24);
}

.landing.lp07 #lp07-mask .lp07-edit-story__visual img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 100%;
  object-fit: cover;
}

.landing.lp07 #lp07-mask .lp07-edit-story__points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: stretch;
  gap: 0;
  min-block-size: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 174, 236, .36);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(35, 116, 235, .28), transparent 35%),
    linear-gradient(145deg, #1b2a3f 0%, #111b2b 62%, #0d1624 100%);
  box-shadow: 0 26px 58px rgba(15, 29, 53, .2);
}

.landing.lp07 #lp07-mask .lp07-edit-story__points .feature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 0;
  padding: clamp(24px, 2.55vw, 36px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.landing.lp07 #lp07-mask .lp07-edit-story__points .feature + .feature {
  border-top: 1px solid rgba(163, 194, 237, .2) !important;
}

.landing.lp07 #lp07-mask .lp07-edit-story__points .feature::before {
  content: none;
}

.landing.lp07 #lp07-mask .lp07-edit-story__points .feature > b {
  color: #72a9ff;
}

.landing.lp07 #lp07-mask .lp07-edit-story__points .feature > h3 {
  max-inline-size: 22ch;
  color: #f7f9ff;
  text-wrap: balance;
}

.landing.lp07 #lp07-mask .lp07-edit-story__points .feature > p {
  max-inline-size: 43ch;
  color: #c9d6eb;
  text-wrap: pretty;
}

.landing.lp07 > .case-strip:not(:has(.case-grid)) {
  background:
    radial-gradient(circle at 84% 26%, rgba(45, 127, 255, .14), transparent 30%),
    linear-gradient(180deg, #f7faff 0%, #eef4fc 100%);
}

.landing.lp07 > .case-strip:not(:has(.case-grid)) .section-inner > h2 {
  max-inline-size: 18ch;
  margin-block-end: clamp(26px, 3vw, 42px);
  text-wrap: balance;
}

.landing.lp07 > .case-strip:not(:has(.case-grid)) .steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(126, 174, 236, .38);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(31, 115, 236, .24), transparent 36%),
    linear-gradient(135deg, #16253a 0%, #0e1828 76%);
  box-shadow: 0 26px 58px rgba(15, 29, 53, .19);
}

.landing.lp07 > .case-strip:not(:has(.case-grid)) .step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: clamp(224px, 17vw, 276px);
  padding: clamp(28px, 2.7vw, 40px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.landing.lp07 > .case-strip:not(:has(.case-grid)) .step + .step {
  border-left: 1px solid rgba(163, 194, 237, .2) !important;
}

.landing.lp07 > .case-strip:not(:has(.case-grid)) .step::before {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  margin: 0 0 22px;
  border-radius: 12px;
  background: #1473e6;
  color: #fff;
  box-shadow: 0 10px 20px rgba(20, 115, 230, .3);
}

.landing.lp07 > .case-strip:not(:has(.case-grid)) .step > h3 {
  max-inline-size: 15ch;
  color: #f7f9ff;
  text-wrap: balance;
}

.landing.lp07 > .case-strip:not(:has(.case-grid)) .step > p {
  max-inline-size: 29ch;
  color: #c9d6eb;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .landing.lp07 #lp07-mask .lp07-edit-story {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing.lp07 #lp07-mask .lp07-edit-story__visual {
    aspect-ratio: 3 / 2;
  }
}

@media (max-width: 760px) {
  .landing.lp07 #lp07-mask .lp07-edit-story__visual,
  .landing.lp07 #lp07-mask .lp07-edit-story__points,
  .landing.lp07 > .case-strip:not(:has(.case-grid)) .steps {
    border-radius: 18px;
  }

  .landing.lp07 #lp07-mask .lp07-edit-story__points .feature {
    padding: 24px !important;
  }

  .landing.lp07 > .case-strip:not(:has(.case-grid)) .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing.lp07 > .case-strip:not(:has(.case-grid)) .step {
    min-block-size: 0;
    padding: 28px 24px !important;
  }

  .landing.lp07 > .case-strip:not(:has(.case-grid)) .step + .step {
    border-top: 1px solid rgba(163, 194, 237, .2) !important;
    border-left: 0 !important;
  }
}

/* LP02: photographic examples make the editing scope legible at a glance. */
.landing.lp02 #lp02-ideas .lp02-scope-grid {
  align-items: start;
}

.landing.lp02 #lp02-ideas .lp02-scope-card {
  min-height: 0;
  align-self: start;
}

.landing.lp02 #lp02-ideas .lp02-scope-visual,
.landing.lp02 #lp02-ideas .lp02-scope-card--object .lp02-scope-visual,
.landing.lp02 #lp02-ideas .lp02-scope-card--background .lp02-scope-visual {
  display: block;
  width: 100%;
  height: clamp(180px, 18vw, 260px);
  overflow: hidden;
  border: 1px solid rgba(102, 137, 198, .42);
  border-radius: 18px;
  background: #111827;
  box-shadow: 0 16px 34px rgba(20, 39, 75, .15);
}

.landing.lp02 #lp02-ideas .lp02-scope-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.landing.lp02 #lp02-ideas .lp02-scope-card--area .lp02-scope-visual::after {
  content: "";
  position: absolute;
  inset: 16% 22% 10%;
  border: 2px solid #61bdfc;
  border-radius: 20px;
  background: rgba(35, 128, 232, .13);
  box-shadow: 0 0 0 999px rgba(9, 18, 33, .12), inset 0 0 0 1px rgba(255, 255, 255, .28);
  pointer-events: none;
}

.landing.lp02 #lp02-ideas .lp02-scope-card > b {
  margin: 20px 0 10px;
}

@media (max-width: 760px) {
  .landing.lp02 #lp02-ideas .lp02-scope-visual,
  .landing.lp02 #lp02-ideas .lp02-scope-card--object .lp02-scope-visual,
  .landing.lp02 #lp02-ideas .lp02-scope-card--background .lp02-scope-visual {
    height: 180px;
  }
}

/* FAQ headings keep whole words together across every landing. */
.landing > .section:has(.faq) .faq {
  grid-template-columns: minmax(280px, .58fr) minmax(0, 1.42fr);
  align-items: center;
  gap: clamp(32px, 4vw, 62px);
}

.landing > .section:has(.faq) .faq > :first-child {
  align-self: center;
}

.landing > .section:has(.faq) .faq h2 {
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

@media (max-width: 900px) {
  .landing > .section:has(.faq) .faq h2 {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .landing > .section:has(.faq) .faq h2 {
    max-width: none;
  }
}

/* Centred proof headings and their supporting copy share one stable axis. */
.landing.lp03 #lp03-examples .section-head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.landing.lp03 #lp03-examples .section-head h2 {
  inline-size: min(100%, 22ch);
  margin-inline: auto;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.landing.lp03 #lp03-examples .section-head p {
  inline-size: min(100%, 64ch);
  margin: clamp(18px, 1.8vw, 26px) auto 0;
  text-align: center;
}

@media (max-width: 760px) {
  .landing.lp03 #lp03-examples .section-head {
    justify-items: start;
    text-align: left;
  }

  .landing.lp03 #lp03-examples .section-head h2,
  .landing.lp03 #lp03-examples .section-head p {
    inline-size: 100%;
    margin-inline: 0;
    text-align: left;
  }
}

/* Final cascade guard for the shared three-step component. */
.landing > .case-strip:not(:has(.case-grid)) > .section-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: clamp(34px, 3.2vw, 52px) !important;
}

.landing > .case-strip:not(:has(.case-grid)) > .section-inner > h2,
.landing > .case-strip:not(:has(.case-grid)) > .section-inner > .section-head,
.landing > .case-strip:not(:has(.case-grid)) > .section-inner > .steps {
  margin: 0 !important;
}

/* Highest-priority contrast contract for every demo explanation card. */
.landing.landing.landing > .tool-shell + .section .feature {
  background: linear-gradient(145deg, #142842, #0c1727 78%) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.landing.landing.landing > .tool-shell + .section .feature:nth-child(even) {
  background: radial-gradient(circle at 90% 8%, rgba(51, 134, 245, .28), transparent 34%), linear-gradient(145deg, #1a3150, #0c1727 78%) !important;
}
.landing.landing.landing > .tool-shell + .section .feature > b { color: #78b4ff !important; opacity: 1 !important; }
.landing.landing.landing > .tool-shell + .section .feature > h3 { color: #f8fbff !important; opacity: 1 !important; text-shadow: none !important; }
.landing.landing.landing > .tool-shell + .section .feature > p { color: #d0def2 !important; opacity: 1 !important; text-shadow: none !important; }

/* Highest-priority contrast contract for nested action cards on dark demos. */
.landing .demo.dark .mode-card {
  color: #f8fbff !important;
  background: linear-gradient(160deg, rgba(27, 53, 85, .98), rgba(13, 27, 46, .98)) !important;
  border-color: rgba(104, 174, 255, .48) !important;
}
.landing .demo.dark .mode-card > b { color: #78b4ff !important; }
.landing .demo.dark .mode-card > h3 { color: #f8fbff !important; }
.landing .demo.dark .mode-card > p { color: #d0def2 !important; }

/* Highest-priority contrast contract for light proof introductions. */
.landing .section:has(.proof-picture) .section-head {
  color: #101928 !important;
  padding: clamp(28px, 3.2vw, 48px) !important;
  background: linear-gradient(135deg, #ffffff, #eef5ff) !important;
  border: 1px solid rgba(158, 186, 222, .62) !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 48px rgba(5, 18, 36, .18) !important;
}
.landing .section:has(.proof-picture) .section-head h2 { color: #101928 !important; }
.landing .section:has(.proof-picture) .section-head p { color: #435873 !important; }

/* Highest-priority layout for the three merge scenarios. */
.landing.lp08 #lp08-demo .mode-card {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
}
.landing.lp08 #lp08-demo .mode-card__picture {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}
.landing.lp08 #lp08-demo .mode-card__picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.landing.lp08 #lp08-demo .mode-card__copy { padding: 24px 26px 28px !important; }
.landing.lp08 #lp08-demo .mode-card__copy h3 { font-size: clamp(28px, 2vw, 36px) !important; }

@media (max-width: 760px) {
  .landing.lp08 #lp08-demo .mode-card__copy h3 {
    font-size: 22px !important;
  }
}

/* Cross-breakpoint dimension guard. These rules protect whole Russian words
   without reintroducing the sparse cards or horizontal clipping seen in QA. */
@media (min-width: 761px) {
  .landing > .section:has(.faq) .faq h2 {
    font-size: clamp(32px, 2.5vw, 38px) !important;
  }
}

@media (min-width: 901px) {
  .landing.lp11 .feature h3 {
    font-size: clamp(24px, 1.7vw, 28px) !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .landing.lp08 #lp08-demo .mode-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .landing.lp08 #lp08-demo .mode-card:last-child {
    grid-column: 1 / -1;
  }

  .landing.lp08 #lp08-demo .mode-card__copy h3 {
    font-size: clamp(23px, 2.5vw, 28px) !important;
  }

  .landing.lp02 .case h3 {
    font-size: 23px !important;
  }
}

@media (max-width: 760px) {
  .landing > .section:has(.faq) .faq h2 {
    font-size: clamp(26px, 7.2vw, 28px) !important;
  }

  .landing > .case-strip:not(:has(.case-grid)) > .section-inner > h2 {
    font-size: clamp(28px, 7.6vw, 30px) !important;
  }

  .landing .step h3 {
    font-size: clamp(20px, 5.7vw, 22px) !important;
  }

  .landing.lp02 .case h3 {
    font-size: 20px !important;
  }

  .landing.lp04 #lp04-workflow-proof .section-head h2 {
    font-size: clamp(30px, 8.4vw, 34px) !important;
  }

  .landing.lp08 #lp08-demo .mode-panel {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .landing.lp08 #lp08-demo .mode-card:last-child {
    grid-column: auto;
  }
}

@media (max-width: 380px) {
  .landing.lp08 #lp08-demo .mode-card__copy h3 {
    font-size: 18px !important;
  }
}

/* Shared benefit grids remain real comparison surfaces even when a proof
   section separates them from the demo.  Without this base layout, those
   later grids fall back to block flow and leave an accidental empty field. */
.landing .section-inner > .grid-3,
.landing .section-inner > .grid-4:not(.lp02-scope-grid) {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(128, 169, 221, .35);
  border-radius: 24px;
  background: rgba(151, 188, 234, .24);
  box-shadow: 0 22px 54px rgba(18, 46, 83, .12);
}

.landing .section-inner > .grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing .section-inner > .grid-4:not(.lp02-scope-grid) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing .section-inner > :is(.grid-3, .grid-4:not(.lp02-scope-grid)) > .feature {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-block-size: clamp(242px, 20vw, 314px);
  padding: clamp(28px, 3vw, 46px);
  border: 0;
  border-radius: 0;
  background: linear-gradient(145deg, #0f1d31, #142741 78%);
  box-shadow: none;
}

.landing .section-inner > :is(.grid-3, .grid-4:not(.lp02-scope-grid)) > .feature:nth-child(even) {
  background: radial-gradient(circle at 90% 8%, rgba(46, 125, 238, .28), transparent 35%), linear-gradient(145deg, #172b47, #101d31 74%);
}

.landing .section-inner > :is(.grid-3, .grid-4:not(.lp02-scope-grid)) > .feature > b {
  display: block;
  margin: 0 0 18px !important;
  color: #77b3ff !important;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.landing .section-inner > :is(.grid-3, .grid-4:not(.lp02-scope-grid)) > .feature > h3 {
  max-inline-size: 17ch;
  margin: 0 !important;
  color: #f7faff !important;
  font-size: clamp(25px, 2.1vw, 34px);
  line-height: 1.05;
}

.landing .section-inner > :is(.grid-3, .grid-4:not(.lp02-scope-grid)) > .feature > p {
  max-inline-size: 38ch;
  margin: auto 0 0 !important;
  color: #d0def2 !important;
  font-size: clamp(16px, 1.22vw, 19px);
  line-height: 1.48;
}

@media (max-width: 900px) {
  .landing .section-inner > .grid-3,
  .landing .section-inner > .grid-4:not(.lp02-scope-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing .section-inner > .grid-3 > .feature:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .landing .section-inner > .grid-3,
  .landing .section-inner > .grid-4:not(.lp02-scope-grid) {
    grid-template-columns: 1fr;
  }

  .landing .section-inner > .grid-3 > .feature:nth-child(3) {
    grid-column: auto;
  }

  .landing .section-inner > :is(.grid-3, .grid-4:not(.lp02-scope-grid)) > .feature {
    min-block-size: 0;
    padding: 28px 24px;
  }
}

/* LP-04 examples: the editorial introduction is a full reading field above
   the evidence, not a narrow right-hand column that abandons half the stage. */
.landing.lp04 #lp04-examples .section-inner {
  padding-block: clamp(52px, 5vw, 76px);
}

.landing.lp04 #lp04-examples .section-head {
  inline-size: 100%;
  max-inline-size: none;
  margin: 0 0 clamp(28px, 3vw, 40px);
  text-align: left;
}

.landing.lp04 #lp04-examples .section-head h2 {
  max-inline-size: min(100%, 20ch);
  margin-inline: 0;
  text-align: left;
}

.landing.lp04 #lp04-examples .section-head p {
  max-inline-size: 62ch;
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  text-align: left;
}