:root {
  --ink: #101117;
  --muted: #646976;
  --line: rgba(16, 17, 23, .11);
  --paper: #fbfbf8;
  --white: #fff;
  --blue: #2388f2;
  --blue-deep: #1267c6;
  --blue-soft: #e5f2ff;
  --lime: #dfff68;
  --lavender: #ddd7ff;
  --red-soft: #fff1ee;
  --radius: 24px;
  --max: 1240px;
  --shadow: 0 28px 80px rgba(29, 43, 68, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { max-width: 100%; display: block; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: white;
  transform: translateY(-150%);
  transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 100;
  top: 14px;
  left: 50%;
  width: min(calc(100% - 32px), 1240px);
  min-height: 64px;
  padding: 10px 10px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: 18px;
  transform: translateX(-50%);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.site-header.is-scrolled {
  border-color: rgba(16, 17, 23, .08);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 10px 40px rgba(20, 27, 45, .08);
  backdrop-filter: blur(18px);
}
.brand { height: 44px; display: flex; align-items: center; }
.brand img { width: 126px; height: auto; transform: translateY(3px); }
.desktop-nav { display: flex; gap: 28px; margin-left: 48px; }
.desktop-nav a,
.lang-link,
.login-link {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.desktop-nav a::after,
.lang-link::after,
.login-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transition: right .22s;
}
.desktop-nav a:hover::after,
.lang-link:hover::after,
.login-link:hover::after { right: 0; }
.lang-link { letter-spacing: .06em; opacity: .72; }
.lang-link:hover { opacity: 1; }
.header-actions { display: flex; align-items: center; gap: 22px; }

/* Legacy anchors (#features, #how-it-works) kept alive for old external links. */
.anchor-alias { display: block; height: 0; scroll-margin-top: 96px; }

.button {
  min-height: 52px;
  padding: 0 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  color: white;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 20px rgba(16,17,23,.12);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 13px 28px rgba(16,17,23,.18);
}
.button:active { transform: translateY(0); }
.button:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(35,136,242,.35);
  outline-offset: 3px;
}
.button-small { min-height: 44px; padding: 0 20px; border-radius: 10px; font-size: 13px; }
.button-large { min-height: 58px; padding: 0 28px; font-size: 15px; }
.button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.button-light { border-color: white; background: white; color: var(--ink); }
.button-outline { background: transparent; color: var(--ink); box-shadow: none; }
.button-blue { border-color: var(--blue); background: var(--blue); }
.menu-toggle,
.mobile-nav { display: none; }

.eyebrow {
  margin: 0 0 24px;
  color: var(--blue-deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow-light { color: #86c3ff; }
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 124px 24px;
}
.section-heading { max-width: 930px; margin: 0 auto 70px; text-align: center; }
.section-heading-left { max-width: 980px; margin-left: 0; text-align: left; }
.section-heading h2,
.pricing-heading h2,
.mentor-copy h2,
.faq-heading h2,
.final-content h2 {
  margin: 0;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -.055em;
  font-weight: 650;
}
.section-heading > p:last-child {
  max-width: 690px;
  margin: 25px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.68;
}
.section-heading-left > p:last-child { margin-left: 0; }

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 155px 24px 78px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(rgba(16,17,23,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,17,23,.035) 1px, transparent 1px);
  background-size: 68px 68px;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(to bottom, var(--paper) 0%, transparent 23%, transparent 77%, var(--paper) 100%);
  pointer-events: none;
}
.hero-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(10px); opacity: .75; }
.hero-glow-left { width: 510px; height: 510px; top: 180px; left: -300px; background: radial-gradient(circle, #b9e2ff, transparent 70%); }
.hero-glow-right { width: 560px; height: 560px; top: 110px; right: -320px; background: radial-gradient(circle, #e3d9ff, transparent 70%); }
.hero-copy { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; }
.hero h1 {
  max-width: 1080px;
  margin: 0 auto;
  font-size: clamp(50px, 6.35vw, 94px);
  line-height: .99;
  letter-spacing: -.066em;
  font-weight: 650;
}
.hero h1 span { color: var(--blue); }
.hero-lead { max-width: 740px; margin: 31px auto 0; color: var(--muted); font-size: 18px; line-height: 1.62; }
.hero-actions { margin-top: 31px; display: flex; justify-content: center; align-items: center; gap: 28px; }
.text-link { font-size: 14px; font-weight: 750; text-decoration: none; }
.text-link span { display: inline-block; margin-left: 5px; transition: transform .2s; }
.text-link:hover span { transform: translateY(4px); }
.hero-note { margin: 12px 0 0; color: #8a8d94; font-size: 11px; }
.hero-item { opacity: 0; transform: translateY(20px); animation: hero-in .7s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-copy .hero-item:nth-child(1) { animation-delay: .08s; }
.hero-copy .hero-item:nth-child(2) { animation-delay: .16s; }
.hero-copy .hero-item:nth-child(3) { animation-delay: .24s; }
.hero-copy .hero-item:nth-child(4) { animation-delay: .32s; }
.hero-copy .hero-item:nth-child(5) { animation-delay: .38s; }
.product-stage.hero-item { animation-delay: .45s; }
@keyframes hero-in { to { opacity: 1; transform: translateY(0); } }

.product-stage { position: relative; z-index: 2; width: min(1120px, 92vw); margin: 76px auto 0; perspective: 1200px; }
.stage-halo {
  position: absolute;
  inset: -80px -120px;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(35,136,242,.25), rgba(214,202,255,.17) 38%, transparent 68%);
}
.browser-frame {
  position: relative;
  overflow: visible;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 24px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 38px 90px rgba(51,69,97,.23), 0 3px 10px rgba(24,31,48,.12);
  backdrop-filter: blur(16px);
  transform: rotateX(1.5deg);
}
.browser-bar {
  height: 46px;
  padding: 0 15px;
  display: grid;
  grid-template-columns: 1fr 1.7fr 1fr;
  align-items: center;
  border-radius: 16px 16px 8px 8px;
  background: rgba(255,255,255,.92);
}
.browser-dots { display: flex; gap: 7px; }
.browser-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d4d6da; }
.browser-dots i:first-child { background: #ff8374; }
.browser-dots i:nth-child(2) { background: #ffd46a; }
.browser-dots i:nth-child(3) { background: #6bd79b; }
.browser-address { padding: 7px 20px; border-radius: 8px; background: #f3f4f5; color: #7e828b; font-size: 10px; text-align: center; }
.browser-status { justify-self: end; display: flex; align-items: center; gap: 6px; color: #777b83; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.browser-status span { width: 6px; height: 6px; border-radius: 50%; background: #47c789; box-shadow: 0 0 0 4px rgba(71,199,137,.12); }
.screen-window { overflow: hidden; aspect-ratio: 1.76; border-radius: 7px 7px 16px 16px; background: white; }
.screen-window img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.insight-toast {
  position: absolute;
  right: -38px;
  bottom: 50px;
  padding: 14px 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 44px rgba(20,31,50,.18);
  text-align: left;
  backdrop-filter: blur(12px);
  animation: float 4s ease-in-out infinite;
}
.insight-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--blue); color: white; }
.insight-toast b,
.insight-toast small { display: block; }
.insight-toast b { font-size: 11px; }
.insight-toast small { margin-top: 3px; color: var(--muted); font-size: 9px; }
@keyframes float { 50% { transform: translateY(-7px); } }

/* Stats */
.signal-bar {
  max-width: var(--max);
  margin: 0 auto;
  padding: 34px 24px 90px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.signal-item {
  min-height: 112px;
  padding: 0 44px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-right: 1px solid var(--line);
}
.signal-item:first-child { padding-left: 0; }
.signal-item:last-child { padding-right: 0; border-right: 0; }
.signal-item strong { color: var(--blue); font-size: clamp(38px, 4vw, 58px); line-height: 1; letter-spacing: -.06em; }
.signal-item span { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Problems */
.problems { padding-top: 110px; }
.problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.problem-card {
  position: relative;
  min-height: 340px;
  padding: 38px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: white;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.problem-card:hover { transform: translateY(-5px); border-color: rgba(35,136,242,.24); box-shadow: var(--shadow); }
.problem-index { color: #9ca0a8; font-size: 10px; font-weight: 800; }
.problem-icon {
  width: 50px;
  height: 50px;
  margin-top: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 23px;
  font-weight: 700;
}
.problem-card:nth-child(2) .problem-icon { background: #f0edff; color: #6957e5; }
.problem-card:nth-child(3) .problem-icon { background: #eff8e7; color: #58a423; }
.problem-card:nth-child(4) .problem-icon { background: #fff1e9; color: #e76d25; }
.problem-card h3 { margin: auto 0 14px; font-size: 26px; line-height: 1.15; letter-spacing: -.04em; }
.problem-card p { max-width: 480px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.68; }

/* Solution context */
.solution-band { background: #111216; color: white; }
.solution-inner { max-width: 1360px; }
.solution-inner .section-heading > p:last-child { color: #aeb1ba; }
.context-map {
  position: relative;
  min-height: 690px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 50%, rgba(35,136,242,.23), transparent 30%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    #16181d;
  background-size: auto, 64px 64px, 64px 64px, auto;
  box-shadow: 0 35px 100px rgba(0,0,0,.28);
}
.context-node {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.085);
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
}
.context-node-main {
  top: 50%;
  left: 50%;
  width: min(420px, 42%);
  padding: 38px;
  border-radius: 26px;
  transform: translate(-50%, -50%);
}
.context-node-main span { color: #86c3ff; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.context-node-main strong { display: block; margin-top: 24px; font-size: 28px; line-height: 1.15; letter-spacing: -.04em; }
.context-node-main p { margin: 15px 0 0; color: #aeb1ba; font-size: 13px; line-height: 1.6; }
.context-node-small { width: 210px; padding: 22px; border-radius: 18px; }
.context-node-small span { color: #86c3ff; font-size: 9px; font-weight: 800; }
.context-node-small strong { display: block; margin-top: 12px; font-size: 16px; }
.context-node-small small { display: block; margin-top: 7px; color: #9b9fa9; font-size: 10px; }
.node-market { top: 12%; left: 8%; transform: rotate(-2deg); }
.node-persona { top: 13%; right: 8%; transform: rotate(2deg); }
.node-position { bottom: 11%; left: 9%; transform: rotate(2deg); }
.node-plan { right: 9%; bottom: 11%; transform: rotate(-2deg); }
.context-line {
  position: absolute;
  z-index: 1;
  width: 31%;
  height: 1px;
  background: linear-gradient(90deg, rgba(35,136,242,.15), rgba(83,172,255,.85), rgba(35,136,242,.15));
  transform-origin: center;
}
.context-line-one { top: 35%; left: 24%; transform: rotate(24deg); }
.context-line-two { top: 35%; right: 24%; transform: rotate(-24deg); }
.context-line-three { bottom: 34%; left: 24%; transform: rotate(-24deg); }
.context-line-four { right: 24%; bottom: 34%; transform: rotate(24deg); }

/* Capabilities */
.capabilities { max-width: 1360px; }
.tools-shell {
  /* No min-height: it was sized for the old 590px desktop screenshot frame and
     now just leaves dead space under the phone gallery. */
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
}
.tool-tabs {
  padding: 10px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: white;
}
.tool-tab {
  min-height: 77px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #777b84;
  text-align: left;
  cursor: pointer;
  transition: color .2s, background .2s, border-radius .2s;
}
.tool-tab:last-child { border-bottom-color: transparent; }
.tool-tab span { font-size: 9px; font-weight: 800; }
.tool-tab b { font-size: 13px; font-weight: 750; }
.tool-tab.is-active { border-bottom-color: transparent; border-radius: 15px; background: var(--blue); color: white; }
.tool-stage {
  min-width: 0;
  padding: 42px 42px 0;
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 42px;
  overflow: hidden;
  border-radius: 30px;
  background: var(--blue);
  color: white;
}
.tool-copy { padding: 10px 0 42px; }
.tool-kicker { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .68; }
.tool-copy h3 { margin: 30px 0 18px; font-size: clamp(32px, 3.5vw, 52px); line-height: 1.05; letter-spacing: -.05em; }
.tool-copy > p { margin: 0; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; }
.tool-copy ul { margin: 35px 0 0; padding: 0; list-style: none; }
.tool-copy li { padding: 13px 0; border-top: 1px solid rgba(255,255,255,.17); font-size: 12px; line-height: 1.4; }
.tool-copy li::before { content: "✓"; margin-right: 10px; color: var(--lime); font-weight: 900; }
.tool-visual {
  align-self: end;
  min-width: 0;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background: white;
  box-shadow: 0 -16px 55px rgba(9,70,132,.32);
}
.tool-browser-bar {
  height: 43px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f6f7f8;
}
.tool-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d4d6da; }
.tool-browser-bar i:first-child { background: #ff8374; }
.tool-browser-bar i:nth-child(2) { background: #ffd46a; }
.tool-browser-bar i:nth-child(3) { background: #6bd79b; }
.tool-browser-bar span { margin-left: auto; margin-right: auto; color: #9498a1; font-size: 9px; transform: translateX(-18px); }
.tool-image-frame { height: 590px; overflow: hidden; background: white; }
.tool-image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: opacity .18s, transform .42s cubic-bezier(.2,.8,.2,1); }
.tool-image-frame img.is-changing { opacity: .15; transform: scale(.985); }

/* Workflow */
.workflow-section { background: #f0f0ec; }
.workflow-shell { display: grid; grid-template-columns: 300px 1fr; gap: 34px; }
.workflow-tabs { display: flex; flex-direction: column; }
.workflow-tab {
  min-height: 116px;
  padding: 23px 4px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-content: center;
  column-gap: 14px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: #858991;
  text-align: left;
  cursor: pointer;
  transition: color .2s, padding-left .2s;
}
.workflow-tab:last-child { border-bottom: 1px solid var(--line); }
.workflow-tab span { grid-row: 1 / span 2; color: #999ca2; font-size: 9px; font-weight: 800; }
.workflow-tab b { font-size: 14px; }
.workflow-tab small { margin-top: 6px; color: #a0a3aa; font-size: 9px; }
.workflow-tab.is-active { padding-left: 12px; color: var(--ink); }
.workflow-tab.is-active span { color: var(--blue); }
.workflow-media {
  min-width: 0;
  padding: 28px 28px 0;
  overflow: hidden;
  border-radius: 28px;
  background: var(--blue);
  color: white;
}
.workflow-caption {
  min-height: 112px;
  padding: 0 2px 22px;
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: start;
}
.caption-index { padding-top: 7px; font-size: 10px; font-weight: 750; opacity: .72; }
.workflow-caption h3 { margin: 0 0 8px; font-size: 28px; line-height: 1.12; letter-spacing: -.04em; }
.workflow-caption p { max-width: 650px; margin: 0; font-size: 13px; line-height: 1.55; opacity: .8; }
.workflow-image-frame { height: 445px; overflow: hidden; border-radius: 17px 17px 0 0; background: white; box-shadow: 0 -10px 40px rgba(9,70,132,.25); }
.workflow-image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: opacity .2s, transform .45s cubic-bezier(.2,.8,.2,1); }
.workflow-image-frame img.is-changing { opacity: .15; transform: scale(.985); }

/* Mentor */
.mentor { max-width: 1360px; }
.mentor-shell {
  position: relative;
  min-height: 650px;
  padding: 92px 7%;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 8%;
  overflow: hidden;
  border-radius: 36px;
  background: #111216;
  color: white;
}
.mentor-shell::before { content: ""; position: absolute; width: 600px; height: 600px; right: -150px; top: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(35,136,242,.38), transparent 65%); }
.mentor-copy { position: relative; z-index: 2; }
.mentor-copy h2 { font-size: clamp(40px,4.4vw,62px); }
.mentor-copy > p:not(.eyebrow) { margin: 25px 0 34px; color: #adafb7; font-size: 15px; line-height: 1.7; }
.chat-demo { position: relative; z-index: 2; width: 100%; padding: 27px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: rgba(255,255,255,.075); box-shadow: 0 30px 80px rgba(0,0,0,.3); backdrop-filter: blur(12px); }
.chat-top { display: flex; align-items: center; gap: 10px; }
.mentor-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--blue); font-weight: 800; }
.chat-top b,
.chat-top small { display: block; }
.chat-top b { font-size: 12px; }
.chat-top small { margin-top: 3px; color: #9699a3; font-size: 9px; }
.chat-top i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #64d99b; }
.message { margin-top: 22px; padding: 14px 17px; font-size: 12px; line-height: 1.6; }
.message-user { width: fit-content; max-width: 75%; margin-left: auto; border-radius: 14px 14px 3px 14px; background: white; color: var(--ink); }
.message-ai { display: flex; gap: 11px; padding-left: 0; color: #d4d5da; }
.message-ai > span { color: #79bbff; }
.message-ai p { margin: 0; }
.mentor-actions { margin-left: 25px; display: flex; gap: 8px; flex-wrap: wrap; }
.mentor-actions span { padding: 9px 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; color: #c1c3ca; font-size: 9px; }
.chat-input { margin-top: 28px; padding: 14px 15px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; color: #777b85; font-size: 10px; }
.chat-input span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: var(--blue); color: white; font-size: 14px; }

/* Comparison */
.comparison .section-heading h2 span { color: var(--blue); }
.comparison-shell { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.comparison-column { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: white; }
.comparison-after { border-color: rgba(35,136,242,.26); background: #f4f9ff; box-shadow: var(--shadow); }
.comparison-label { padding: 28px 32px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 800; }
.comparison-label span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #f1f2f3; color: #999da4; }
.comparison-after .comparison-label span { background: var(--blue); color: white; }
.comparison-column ul { margin: 0; padding: 0; list-style: none; }
.comparison-column li { min-height: 96px; padding: 23px 32px; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--line); }
.comparison-column li:last-child { border-bottom: 0; }
.comparison-column strong { font-size: 14px; }
.comparison-column li span { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.45; }

/* Community */
.community-band { padding: 32px 24px 112px; }
.community-inner {
  max-width: 1312px;
  min-height: 660px;
  margin: 0 auto;
  padding: 92px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 38px;
  background:
    radial-gradient(circle at 12% 18%, rgba(117,190,255,.3), transparent 26%),
    radial-gradient(circle at 88% 82%, rgba(218,211,255,.55), transparent 28%),
    #e7f3ff;
  text-align: center;
}
.community-count { color: var(--blue); font-size: clamp(104px, 14vw, 190px); line-height: .85; letter-spacing: -.08em; }
.community-inner h2 { margin: 35px 0 0; font-size: clamp(34px, 4vw, 58px); line-height: 1.06; letter-spacing: -.05em; }
.community-inner > p:not(.eyebrow) { max-width: 790px; margin: 28px auto 34px; color: var(--muted); font-size: 17px; line-height: 1.65; }

/* Pricing */
.pricing-heading { margin-bottom: 42px; display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 52px; }
.pricing-heading > p { margin: 0 0 5px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.price-plan { position: relative; min-height: 430px; padding: 28px 26px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; background: white; }
.price-plan-featured { border-color: var(--ink); box-shadow: 0 25px 70px rgba(22,28,42,.1); }
.popular { position: absolute; top: 14px; right: 14px; padding: 6px 8px; border-radius: 8px; background: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.plan-name { margin: 0; font-size: 17px; font-weight: 800; }
.price-plan > div > p { min-height: 36px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.price { margin: 34px 0 22px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.price strong { font-size: clamp(31px, 2.8vw, 40px); letter-spacing: -.045em; }
.price strong small { margin-left: 5px; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.price span { color: var(--muted); font-size: 10px; }
.price-plan ul { margin: 0 0 24px; padding: 0; list-style: none; }
.price-plan li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.42; }
.price-plan li::before { content: "✓"; margin-right: 8px; color: var(--blue); font-weight: 800; }
.price-plan .button { min-height: 44px; margin-top: auto; padding: 0 12px; font-size: 12px; }
.pricing-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; text-align: center; }

/* FAQ */
.faq { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; align-items: start; }
.faq-heading { position: sticky; top: 120px; }
.faq-heading > p:not(.eyebrow) { max-width: 380px; margin: 25px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.faq-heading a { color: var(--blue-deep); font-weight: 700; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 88px; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 25px; list-style: none; cursor: pointer; font-size: 17px; font-weight: 750; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { position: relative; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; }
.faq-list summary i::before,
.faq-list summary i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .2s; }
.faq-list summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-list details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq-list details p { max-width: 720px; margin: -2px 54px 27px 0; color: var(--muted); font-size: 14px; line-height: 1.72; }

/* Final CTA */
.final-cta {
  position: relative;
  min-height: 680px;
  margin: 30px 24px 0;
  padding: 100px 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 38px;
  background: #e3f1ff;
  text-align: center;
}
.final-cta::before { content: ""; position: absolute; width: 700px; height: 700px; border: 1px solid rgba(35,136,242,.18); border-radius: 50%; }
.final-cta::after { content: ""; position: absolute; width: 1020px; height: 1020px; border: 1px solid rgba(35,136,242,.1); border-radius: 50%; }
.final-orb { position: absolute; border-radius: 50%; filter: blur(3px); }
.final-orb-one { width: 320px; height: 320px; left: -90px; bottom: -100px; background: radial-gradient(circle at 65% 35%, var(--lavender), transparent 66%); }
.final-orb-two { width: 360px; height: 360px; right: -120px; top: -110px; background: radial-gradient(circle at 35% 65%, #a7d7ff, transparent 66%); }
.final-content { position: relative; z-index: 3; }
.final-content h2 { font-size: clamp(52px,7vw,92px); }
.final-content h2 span { color: var(--blue); }
.final-content > p:not(.eyebrow) { max-width: 680px; margin: 27px auto 32px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.final-content .button { margin: 0 auto; }
.final-content small { display: block; margin-top: 13px; color: #7d8189; font-size: 10px; }

/* Footer */
.site-footer { max-width: var(--max); margin: 0 auto; padding: 65px 24px 45px; display: grid; grid-template-columns: minmax(260px, 1.65fr) repeat(3, minmax(130px, .7fr)); gap: 42px; align-items: start; }
.footer-brand img { width: 126px; }
.footer-brand p { max-width: 340px; margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.footer-col { display: grid; align-content: start; gap: 10px; }
.footer-col h2 { margin: 0 0 6px; color: #858990; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.footer-col a { color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1.35; text-decoration: none; transition: color .18s ease; }
.footer-col a:hover,
.footer-col a:focus-visible { color: var(--blue); }
.footer-meta { grid-column: 1/-1; padding-top: 25px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: #858990; font-size: 11px; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .desktop-nav { gap: 20px; margin-left: 20px; }
  .tools-shell { grid-template-columns: 240px 1fr; }
  .tool-stage { padding: 32px 30px 0; grid-template-columns: .82fr 1.18fr; gap: 26px; }
  .tool-image-frame { height: 540px; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .price-plan { min-height: 440px; padding: 36px; border-radius: 26px; }
  .popular { top: 20px; right: 20px; padding: 7px 10px; font-size: 9px; }
  .plan-name { font-size: 19px; }
  .price-plan > div > p { min-height: 36px; font-size: 12px; }
  .price { margin: 46px 0 28px; gap: 8px; }
  .price strong { font-size: 42px; }
  .price strong small { font-size: 15px; }
  .price span { font-size: 11px; }
  .price-plan ul { margin-bottom: 32px; }
  .price-plan li { padding: 11px 0; font-size: 12px; }
}

@media (max-width: 900px) {
  .desktop-nav,
  .lang-link,
  .login-link,
  .header-actions > .button { display: none; }
  .site-header { top: 8px; width: calc(100% - 16px); min-height: 58px; padding: 7px 8px 7px 16px; }
  .brand img { width: 112px; }
  .menu-toggle { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; border: 0; border-radius: 11px; background: var(--ink); cursor: pointer; }
  .menu-toggle span { width: 18px; height: 1px; background: white; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .mobile-nav {
    position: fixed;
    z-index: 99;
    top: 76px;
    left: 8px;
    right: 8px;
    padding: 18px;
    display: grid;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 25px 80px rgba(20,27,45,.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .2s, transform .2s;
  }
  .mobile-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mobile-nav a { padding: 13px 12px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; text-decoration: none; }
  .mobile-nav .button { margin-top: 8px; border-bottom: 0; }

  .section { padding: 96px 20px; }
  .section-heading { margin-bottom: 52px; }
  .hero { min-height: auto; padding: 130px 20px 60px; }
  .hero h1 { font-size: clamp(47px, 10vw, 74px); }
  .hero-lead { font-size: 16px; }
  .product-stage { width: 100%; margin-top: 58px; }
  .insight-toast { right: 12px; bottom: 18px; }
  .signal-bar { padding: 28px 20px 70px; }
  .signal-item { padding: 0 22px; gap: 14px; }
  .signal-item strong { font-size: 42px; }
  .signal-item span { font-size: 10px; }

  .problem-card { min-height: 310px; padding: 30px; }
  .problem-icon { margin-top: 34px; }

  .context-map { min-height: 620px; }
  .context-node-main { width: 48%; }
  .context-node-small { width: 180px; padding: 18px; }
  .node-market { left: 4%; }
  .node-persona { right: 4%; }
  .node-position { left: 4%; }
  .node-plan { right: 4%; }

  .tools-shell { grid-template-columns: 1fr; min-height: auto; }
  .tool-tabs { padding: 8px; flex-direction: row; overflow-x: auto; border-radius: 20px; scrollbar-width: none; }
  .tool-tabs::-webkit-scrollbar { display: none; }
  .tool-tab { min-width: 170px; min-height: 62px; border-right: 1px solid var(--line); border-bottom: 0; }
  .tool-stage { min-height: 670px; grid-template-columns: .85fr 1.15fr; }
  .tool-image-frame { height: 520px; }

  .workflow-shell { grid-template-columns: 1fr; gap: 20px; }
  .workflow-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .workflow-tabs::-webkit-scrollbar { display: none; }
  .workflow-tab { min-width: 245px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .workflow-media { padding: 24px 24px 0; }
  .workflow-caption { grid-template-columns: 70px 1fr; }

  .mentor-shell { padding: 70px 6%; grid-template-columns: 1fr; gap: 55px; }
  .mentor-copy { max-width: 650px; }
  .chat-demo { max-width: 680px; }

  .faq { grid-template-columns: 1fr; gap: 45px; }
  .faq-heading { position: static; }

  .site-footer { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-brand { grid-column: 1/-1; }
}

@media (max-width: 680px) {
  .eyebrow { margin-bottom: 18px; font-size: 9px; }
  .section { padding: 78px 16px; }
  .section-heading h2,
  .pricing-heading h2,
  .mentor-copy h2,
  .faq-heading h2 { font-size: clamp(37px, 11vw, 52px); }
  .section-heading > p:last-child { font-size: 15px; }

  .hero { padding: 114px 16px 50px; background-size: 46px 46px; }
  .hero h1 { font-size: clamp(43px, 13vw, 60px); line-height: 1; }
  .hero h1 br { display: none; }
  .hero-lead { margin-top: 24px; font-size: 15px; }
  .hero-actions { flex-direction: column; gap: 18px; }
  .hero-actions .button { width: 100%; max-width: 360px; }
  .product-stage { margin-top: 48px; }
  .browser-frame { padding: 5px; border-radius: 17px; }
  .browser-bar { height: 34px; padding: 0 9px; grid-template-columns: 1fr 2fr 1fr; }
  .browser-dots { gap: 4px; }
  .browser-dots i { width: 5px; height: 5px; }
  .browser-address { padding: 5px 7px; font-size: 7px; }
  .browser-status { font-size: 6px; }
  .screen-window { border-radius: 5px 5px 12px 12px; }
  .insight-toast { display: none; }

  .signal-bar { grid-template-columns: 1fr; padding: 18px 16px 60px; }
  .signal-item { min-height: 98px; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .signal-item:last-child { border-bottom: 0; }
  .signal-item strong { min-width: 104px; font-size: 45px; }
  .signal-item span { font-size: 11px; }

  .problem-grid { grid-template-columns: 1fr; }
  .problem-card { min-height: 300px; border-radius: 23px; }
  .problem-card h3 { font-size: 24px; }

  .solution-inner { padding-left: 12px; padding-right: 12px; }
  .context-map { min-height: 760px; border-radius: 28px; }
  .context-node-main { top: 50%; width: calc(100% - 64px); padding: 27px; }
  .context-node-main strong { font-size: 23px; }
  .context-node-small { width: 150px; padding: 15px; }
  .context-node-small strong { font-size: 13px; }
  .context-node-small small { font-size: 8px; }
  .node-market { top: 7%; left: 6%; }
  .node-persona { top: 21%; right: 6%; }
  .node-position { bottom: 21%; left: 6%; }
  .node-plan { right: 6%; bottom: 7%; }
  .context-line-one { top: 34%; left: 14%; width: 42%; transform: rotate(56deg); }
  .context-line-two { top: 39%; right: 13%; width: 37%; transform: rotate(-52deg); }
  .context-line-three { bottom: 38%; left: 13%; width: 37%; transform: rotate(-52deg); }
  .context-line-four { right: 14%; bottom: 33%; width: 42%; transform: rotate(56deg); }

  .capabilities { padding-left: 12px; padding-right: 12px; }
  .capabilities .section-heading { padding: 0 4px; }
  .tool-tab { min-width: 155px; grid-template-columns: 30px 1fr; }
  .tool-tab b { font-size: 11px; }
  .tool-stage { min-height: auto; padding: 28px 20px 0; grid-template-columns: 1fr; gap: 18px; border-radius: 24px; }
  .tool-copy { padding: 0 0 10px; }
  .tool-copy h3 { margin: 22px 0 14px; font-size: 38px; }
  .tool-copy > p { font-size: 13px; }
  .tool-copy ul { margin-top: 24px; }
  .tool-copy li { font-size: 11px; }
  .tool-image-frame { height: 340px; }

  .workflow-section .section { padding-left: 12px; padding-right: 12px; }
  .workflow-section .section-heading { padding: 0 4px; }
  .workflow-tab { min-width: 220px; min-height: 96px; padding: 18px 4px; }
  .workflow-media { padding: 20px 18px 0; border-radius: 23px; }
  .workflow-caption { min-height: auto; padding-bottom: 18px; grid-template-columns: 1fr; gap: 8px; }
  .caption-index { padding-top: 0; }
  .workflow-caption h3 { font-size: 23px; }
  .workflow-caption p { font-size: 11px; }
  .workflow-image-frame { height: 280px; }

  .mentor { padding-left: 12px; padding-right: 12px; }
  .mentor-shell { padding: 58px 22px; border-radius: 28px; }
  .mentor-copy > p:not(.eyebrow) { font-size: 14px; }
  .message-user { max-width: 90%; }
  .chat-demo { padding: 19px; }

  .comparison-shell { grid-template-columns: 1fr; }
  .comparison-label { padding: 23px; }
  .comparison-column li { min-height: 86px; padding: 20px 23px; }

  .community-band { padding: 12px 12px 80px; }
  .community-inner { min-height: 570px; padding: 70px 20px; border-radius: 28px; }
  .community-count { font-size: 112px; }
  .community-inner h2 { font-size: 37px; }
  .community-inner > p:not(.eyebrow) { font-size: 14px; }
  .community-inner .button { width: 100%; max-width: 340px; }

  .pricing-heading { grid-template-columns: 1fr; gap: 24px; }
  .pricing-heading > p { font-size: 14px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-plan { min-height: 410px; padding: 28px; }

  .faq-list summary { min-height: 76px; font-size: 14px; }
  .faq-list details p { margin-right: 0; font-size: 13px; }

  .final-cta { min-height: 590px; margin: 12px 12px 0; padding: 80px 20px; border-radius: 28px; }
  .final-content h2 { font-size: clamp(47px, 13vw, 64px); }
  .final-content > p:not(.eyebrow) { font-size: 14px; }
  .final-content .button { width: 100%; max-width: 370px; }

  .site-footer { padding: 56px 20px 36px; grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .footer-brand { grid-column: 1/-1; }
  .footer-meta { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-item, .reveal { opacity: 1; transform: none; }
}

/* 2026 conversion revision: current product screenshots and eight-step journey */
.problem-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.problem-card {
  min-height: 310px;
}
.problem-icon-lavender { background: #eee9ff; color: #7157ff; }
.problem-icon-lime { background: #efffc7; color: #456600; }

.context-node-main {
  width: min(500px, 48%);
  padding: 48px;
  text-align: center;
}
.context-node-main strong {
  margin: 0;
  font-size: clamp(42px, 5vw, 72px);
  line-height: .98;
  letter-spacing: -.065em;
}
.context-node-main p {
  max-width: 340px;
  margin: 22px auto 0;
  font-size: 14px;
}

.product-stage .screen-window img,
.tool-image-frame img {
  object-fit: cover;
  object-position: top left;
}

.workflow-section {
  background: #f0f0ec;
}
.workflow-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255,255,255,.42);
}
.workflow-step-card {
  min-height: 270px;
  padding: 34px 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.74);
}
.workflow-step-card span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
}
.workflow-step-card h3 {
  margin: 58px 0 15px;
  font-size: 23px;
  line-height: 1.08;
  letter-spacing: -.04em;
}
.workflow-step-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
.workflow-cta {
  margin-top: 38px;
  display: flex;
  justify-content: center;
}

@media (max-width: 1100px) {
  .problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .workflow-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .problem-grid {
    grid-template-columns: 1fr;
  }
  .context-node-main {
    width: calc(100% - 48px);
    padding: 34px 24px;
  }
  .context-node-main strong {
    font-size: clamp(44px, 14vw, 66px);
  }
  .workflow-steps-grid {
    grid-template-columns: 1fr;
    border-radius: 23px;
  }
  .workflow-step-card {
    min-height: 230px;
    padding: 28px 24px;
  }
  .workflow-step-card h3 {
    margin-top: 42px;
    font-size: 24px;
  }
  .workflow-cta .button {
    width: 100%;
    max-width: 360px;
  }
}



/* 2026-07 responsive polish: requested hero composition, source emoji and full-view tool screenshots */
.hero h1 .hero-line {
  display: block;
  color: var(--ink);
  white-space: nowrap;
}
.hero h1 .hero-line-accent { color: var(--blue); }

.problem-icon,
.problem-card:nth-child(2) .problem-icon,
.problem-card:nth-child(3) .problem-icon,
.problem-card:nth-child(4) .problem-icon {
  width: auto;
  height: auto;
  margin-top: 46px;
  display: block;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
}

.tool-stage {
  grid-template-columns: minmax(290px, .86fr) minmax(0, 1.14fr);
  align-items: end;
}
.tool-visual {
  width: min(100%, 700px);
  justify-self: end;
  align-self: end;
  margin-bottom: 28px;
  border-radius: 20px;
}
.tool-picture { display: block; width: 100%; height: 100%; }
.tool-image-frame {
  height: auto;
  aspect-ratio: 16 / 9;
  padding: 10px;
  background: #eef1f5;
}
.tool-image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center top !important;
  border-radius: 0 0 12px 12px;
  background: white;
}

@media (max-width: 900px) {
  .hero h1 { font-size: clamp(45px, 9.2vw, 72px); }
  .tool-stage {
    min-height: auto;
    padding-bottom: 24px;
    grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
    gap: 26px;
  }
  .tool-visual { width: 100%; margin-bottom: 0; }
}

@media (max-width: 680px) {
  .hero h1 {
    font-size: clamp(37px, 11.1vw, 52px);
    line-height: 1.01;
  }
  .hero h1 .hero-line {
    white-space: normal;
  }
  .hero h1 .hero-line:nth-child(2) {
    white-space: nowrap;
  }
  .problem-icon { margin-top: 32px; font-size: 34px; }
  .tool-stage {
    padding: 28px 18px 20px;
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .tool-copy { padding-bottom: 0; }
  .tool-visual {
    width: min(100%, 520px);
    justify-self: center;
    border-radius: 18px;
  }
  .tool-browser-bar { height: 34px; }
  .tool-image-frame {
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 7px;
  }
  .tool-image-frame img { border-radius: 0 0 9px 9px; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: clamp(35px, 10.6vw, 43px); }
}

@media (max-width: 480px) {
  .hero h1 .hero-line:nth-child(2) { white-space: normal; }
}

/* Clean horizontal mobile-screen carousel inside "Что вы получите". */
.site-header .brand img {
  width: 138px;
  height: auto;
  transform: none;
}

.capabilities .tool-stage {
  min-height: 0;
  padding-bottom: 42px;
  align-items: center;
}

.capabilities .tool-visual {
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  align-self: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tool-gallery {
  width: 100%;
  min-width: 0;
  padding: 10px 18px 18px;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  transition: opacity .16s ease, transform .22s ease;
}

.tool-gallery::-webkit-scrollbar {
  display: none;
}

/* `safe` keeps the first shot reachable when the row overflows the track —
   plain `center` pushes the overflow past the scroll origin. */
.tool-gallery {
  justify-content: safe center;
}

/* English landing: one wide desktop screenshot per tool instead of phone shots. */
.tool-gallery--wide {
  align-items: center;
}

.tool-gallery--wide .tool-shot,
.tool-gallery--wide .tool-shot.is-active,
.tool-gallery--wide .tool-shot:not(.is-active) {
  flex: 0 0 100%;
  max-width: none;
}

.tool-gallery--wide .tool-shot img {
  object-position: center;
}

.tools-shell.is-changing .tool-gallery {
  opacity: .2;
  transform: translateY(4px);
}

.tool-shot,
.tool-shot.is-active,
.tool-shot:not(.is-active) {
  position: relative;
  inset: auto;
  z-index: 1;
  /* Fluid, capped: with at most two shots per tool they always fit the track,
     so the row never overflows and there is nothing to scroll to. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 248px;
  width: auto;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  align-content: start;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
  scroll-snap-align: center;
  transition: transform .2s ease, opacity .2s ease;
}

.tool-shot:first-child {
  scroll-snap-align: start;
}

.tool-shot img {
  display: block;
  width: 100%;
  height: auto;
  /* No `aspect-ratio` here on purpose: declaring it drops the UA's
     `aspect-ratio: auto <width> / <height>`, and the box would collapse to zero
     height until the image loads. The width/height attributes reserve it. */
  object-fit: contain;
  object-position: center top;
  overflow: hidden;
  border: 1px solid rgba(16, 17, 23, .12);
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 20px 44px rgba(18, 36, 62, .14),
    0 3px 10px rgba(18, 36, 62, .08);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.tool-shot span,
.tool-shot.is-active span {
  position: static;
  padding: 0 4px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.74);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
  backdrop-filter: none;
}

.tool-shot.is-active img {
  border-color: rgba(255,255,255,.78);
}


@media (max-width: 1100px) and (min-width: 681px) {
  .capabilities .tool-stage {
    min-height: 0;
    grid-template-columns: minmax(250px, .86fr) minmax(0, 1.14fr);
  }

  .tool-shot,
  .tool-shot.is-active,
  .tool-shot:not(.is-active) {
    max-width: 228px;
  }
}

@media (max-width: 900px) {
  .site-header .brand img {
    width: 122px;
  }
}

@media (max-width: 680px) {
  .capabilities .tool-stage {
    min-height: 0;
    padding: 28px 18px 24px;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .capabilities .tool-visual {
    width: calc(100% + 18px);
    margin-right: -18px;
  }


  .tool-gallery,
  .tool-gallery[data-count="1"],
  .tool-gallery[data-count="2"] {
    padding: 8px 18px 18px 18px;
    gap: 14px;
    justify-content: flex-start;
    scroll-padding-inline: 18px;
  }

  /* On a phone the two shots cannot sit side by side — the track scrolls with
     snap instead, which is a natural gesture there. */
  .tool-shot,
  .tool-shot.is-active,
  .tool-shot:not(.is-active) {
    flex: 0 0 min(72vw, 286px);
    max-width: none;
  }

  .tool-shot span,
  .tool-shot.is-active span {
    color: rgba(255,255,255,.72);
    font-size: 9px;
  }

}

@media (max-width: 420px) {
  .tool-shot,
  .tool-shot.is-active,
  .tool-shot:not(.is-active) {
    flex-basis: min(76vw, 272px);
  }
}