/* Spyon public components and designer adjustments, 2026-11-04.
   Scoped to the marketing landing. No internal application CSS is changed. */
.landing-designer {
  --spyon-text:#12223E;
  --spyon-text-subtle:#90A3BF;
  --spyon-action:linear-gradient(112deg,#24BDE8 0%,#1469DC 100%);
  --spyon-tag-bg:linear-gradient(100deg,#ECF7FF 0%,#DFF6FC 100%);
  --spyon-gap:16px;
}
.landing-designer .site-button,
.landing-designer .hero-actions .text-link,
.landing-designer .product-command-actions button {
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:2px;min-height:36px;height:36px;width:max-content;max-width:100%;
  padding:6px 12px;border-radius:8px;vertical-align:middle;
  font-family:"Golos Text","Inter Tight",sans-serif;font-size:14px;
  font-weight:600;line-height:20px;text-decoration:none;white-space:nowrap;
  overflow:hidden;isolation:isolate;box-shadow:none;
  transition:background-color .18s ease,filter .18s ease,transform .18s ease;
}
.landing-designer .site-button .button-label,
.landing-designer .site-button > span:not(.button-icon) {padding-inline:4px}
.landing-designer .site-button:has(.button-icon) {padding-inline:8px}
.landing-designer .site-button .button-icon {
  display:inline-flex;width:20px;height:20px;flex:0 0 20px;
  align-items:center;justify-content:center;font-size:17px;line-height:20px;
}
.landing-designer .site-button .button-icon img {display:block;width:16px;height:16px;object-fit:contain}
.landing-designer .site-button.primary {border:0;background:var(--spyon-action);color:#fff}
.landing-designer .site-button.secondary {
  border:1px solid #cbd8e6;background:#f9fcff;color:var(--spyon-text);
}
.landing-designer .site-button:hover,
.landing-designer .hero-actions .text-link:hover {filter:brightness(1.04);transform:translateY(-1px)}
.landing-designer .site-button:active {transform:translateY(0)}
/* A native CSS sweep, inspired by the reference motion: no Tilda/jQuery dependency. */
.landing-designer .site-button::after,
.landing-designer .hero-actions .text-link::after {
  content:"";pointer-events:none;position:absolute;z-index:1;
  top:-75%;left:-75%;width:32%;height:250%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05) 26%,rgba(255,255,255,.5) 56%,transparent);
  transform:translateX(-160%) skewX(-24deg);
  opacity:0;
  animation:none;
}
.landing-designer .site-button.secondary::after,
.landing-designer .hero-actions .text-link::after {
  background:linear-gradient(90deg,transparent,rgba(36,189,232,.12),rgba(36,189,232,.35),transparent);
}
/* The sheen is idle by default. Replay once only when a real pointer hovers. */
@media (hover:hover) and (pointer:fine) {
  .landing-designer .site-button:hover::after,
  .landing-designer .hero-actions .text-link:hover::after {
    opacity:1;
    animation:spyon-btn-flash .85s cubic-bezier(.2,.7,.3,1) 1 both;
  }
}
@keyframes spyon-btn-flash {
  from {transform:translateX(-160%) skewX(-24deg)}
  to {transform:translateX(670%) skewX(-24deg)}
}
.landing-designer .site-button:focus-visible,
.landing-designer .hero-actions .text-link:focus-visible {outline:2px solid #24bde8;outline-offset:3px}
.landing-designer .hero-actions .text-link {border:1px solid #90a3bf;background:transparent;color:#fff}
.landing-designer .spyon-tag {
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  flex:0 0 auto;min-height:20px;height:20px;max-width:100%;width:max-content;
  padding:2px 8px;border:0;border-radius:8px;background:var(--spyon-tag-bg);
  box-shadow:none;font:400 12px/16px "Inter Tight",sans-serif;
  letter-spacing:0;color:#12223E;white-space:nowrap;
}
/* Language picker retains the real select and its existing keyboard-operable popover. */
.landing-designer .language-select.is-enhanced {width:107px;flex:0 0 107px}
.landing-designer .language-trigger {
  justify-content:flex-start;width:107px;height:40px;gap:4px;
  padding:0 16px;border:0;border-radius:8px;background:transparent;
  font:600 14px/20px "Inter Tight",sans-serif;color:#12223E;
}
.landing-designer .language-globe {display:block;width:24px;height:24px;flex:0 0 24px;object-fit:contain}
.landing-designer .language-trigger .language-chevron {
  width:9px;height:9px;flex:0 0 9px;margin-left:auto;
  border-right:2px solid #24BDE8;border-bottom:2px solid #24BDE8;
}
.landing-designer .language-trigger:hover,
.landing-designer .language-trigger[aria-expanded="true"] {background:#ECF7FF;border-color:transparent}
.landing-designer .language-popover {z-index:50}
/* Marketplace tiles: retain existing grid and icon asset, reinstate context. */
.landing-designer .channels .v2-wrap>div {gap:16px}
.landing-designer .channels .v2-wrap>div>.channel-card {
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  min-height:162px;padding:76px 32px 24px;border-radius:8px;position:relative;
  background:#fff;color:var(--spyon-text);font-size:24px;line-height:28px;
}
.landing-designer .channels .channel-card strong {
  display:block;font-family:Onest,sans-serif;font-weight:600;font-size:24px;line-height:28px;
  letter-spacing:-.025em;
}
.landing-designer .channels .channel-card small {
  display:block;margin:4px 0 0;max-width:none;font:400 12px/16px "Inter Tight",sans-serif;
  color:var(--spyon-text-subtle);
}
.landing-designer .channels .channel-index {
  position:absolute;top:23px;right:24px;font:400 12px/16px "Inter Tight",sans-serif;
  color:#90A3BF;letter-spacing:0;
}
.landing-designer .channels .v2-wrap>div>.channel-card::before {top:26px;left:32px;width:40px;height:34px}
/* Flow cards: top label, large value, contextual caption. */
.landing-designer .decision-flow {gap:28px}
.landing-designer .decision-flow article {
  display:flex;flex-direction:column;justify-content:flex-start;min-width:0;gap:0;
  min-height:222px;padding:30px 28px;
}
.landing-designer .decision-flow article b {order:-2;font:500 12px/20px "Inter Tight",sans-serif;text-transform:uppercase}
.landing-designer .decision-flow article>span {order:-1;align-self:flex-end;margin-top:-20px;font-size:12px;color:#90A3BF}
.landing-designer .decision-flow article p {
  font:400 clamp(23px,2.3vw,31px)/1.12 Onest,sans-serif;
  letter-spacing:-.025em;margin:auto 0 2px;color:#fff;
}
.landing-designer .decision-flow article:last-child p {font-size:clamp(20px,2.05vw,28px)}
.landing-designer .decision-flow .flow-caption {
  display:block;margin:2px 0 0;max-width:100%;
  font:400 12px/16px "Inter Tight",sans-serif;color:#b8cadb;
}
.landing-designer .decision-flow article:last-child .flow-caption {color:#fff}
/* Schedule has accessible column headers and real-looking but clearly demonstrative status. */
.landing-designer .automation .split {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:54px}
.landing-designer .schedule-summary {display:grid;justify-items:start;gap:4px;margin-top:26px}
.landing-designer .schedule-status-row {display:flex;flex-wrap:wrap;gap:4px}
.landing-designer .automation .schedule-demo {background:transparent;border:0;box-shadow:0;overflow:hidden}
.landing-designer .schedule-demo li {
  display:grid;grid-template-columns:114px minmax(0,1fr) 110px;
  gap:14px;align-items:center;padding:14px 16px;min-height:64px;
  border-bottom:1px solid #dce9f2;background:rgba(255,255,255,.97);
  font:400 14px/20px "Inter Tight",sans-serif;color:#12223e;
}
.landing-designer .schedule-demo li:first-child {border-radius:8px 8px 0 0}
.landing-designer .schedule-demo li:last-child {border-radius:0 0 8px 8px}
.landing-designer .schedule-demo .schedule-head {
  min-height:48px;background:#eff7fb;color:#12223E;font-size:13px;font-weight:600;
}
.landing-designer .schedule-demo .schedule-head strong {font-weight:600}
.landing-designer .schedule-demo li b {display:flex;flex-direction:column;font-weight:600}
.landing-designer .schedule-demo li b small {margin-top:2px;color:#90a3bf;font:400 11px/16px "Inter Tight",sans-serif}
.landing-designer .schedule-demo li>.spyon-tag {justify-self:start}
.landing-designer .schedule-summary .spyon-tag {white-space:normal;height:auto;min-height:20px}
/* Re-grouped immersive integrations in a 2/3 : 1/3, four stages, three-footer rhythm. */
.landing-designer .integration .integration-layout {display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.landing-designer .integration-heading {
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:24px;align-items:start;margin-bottom:56px;
}
.landing-designer .integration-heading h2 {
  max-width:none;margin:0;color:#fff;letter-spacing:-.025em;font-weight:400;
}
.landing-designer .integration-heading p {font-size:14px;line-height:20px;margin:0;text-align:right;color:#d4ddeb}
.landing-designer .integration-map {min-width:0;border-top:0}
.landing-designer .integration-map .pipeline-label {display:none}
.landing-designer .pipeline-stages {grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.landing-designer .pipeline-stages .pipeline-stage {
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  gap:20px;min-height:170px;padding:24px 26px;border:1px solid #90A3BF55;
  border-radius:8px;background:#06152b88;transition:background .2s ease,border-color .2s ease;
}
.landing-designer .pipeline-stages .pipeline-stage.is-active {
  border-color:#24BDE8;background:var(--spyon-action);
}
.landing-designer .pipeline-stages .pipeline-stage b {
  margin:0;font:600 12px/18px "Inter Tight",sans-serif;text-transform:uppercase;
  color:#E6F4FF;
}
.landing-designer .pipeline-stages .pipeline-stage small {
  color:#fff;font:400 25px/1.15 Onest,sans-serif;letter-spacing:-.02em;
}
.landing-designer .integration-footer {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;gap:16px;margin-top:28px;
}
.landing-designer .integration-footer p {
  grid-column:3;max-width:100%;font:400 12px/16px "Inter Tight",sans-serif;
  color:#d8e0ed;margin:0;
}
/* Pricing keeps server-rendered tariffs, prices and invoice flow. */
.landing-designer .pricing-heading-row {
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  align-items:start;gap:24px;
}
.landing-designer .pricing-heading-row h2 {max-width:none;margin:0}
.landing-designer .pricing .pricing-lead {margin:0;max-width:none;text-align:right;font-size:14px;line-height:20px}
.landing-designer .pricing-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:64px}
.landing-designer .pricing-card {position:relative;gap:0;min-height:315px;padding:28px 24px;border:0;border-radius:8px}
.landing-designer .pricing-card h3 {margin:0 0 22px;font:600 14px/20px "Inter Tight",sans-serif;text-transform:uppercase}
.landing-designer .pricing-card>b {order:0;font:400 30px/1.15 Onest,sans-serif}
.landing-designer .pricing-card>p {max-width:none;margin:12px 0;color:#637a92;font-size:12px;line-height:16px}
.landing-designer .pricing-card>small {font-size:12px}
.landing-designer .pricing-card ul {
  flex:1;margin:28px 0 16px;padding:16px 0 0 20px;border-top:1px solid #24BDE8;
  color:#90A3BF;font:400 12px/18px "Inter Tight",sans-serif;
}
.landing-designer .pricing-card .site-button {
  margin-top:auto;align-self:flex-start;border:1px solid #90A3BF;
}
.landing-designer .pricing-card.recommended {background:var(--spyon-action);color:#fff}
.landing-designer .pricing-card.recommended :is(h3,p,small,ul){color:#fff}
.landing-designer .pricing-card.recommended .site-button {background:#fff;color:#12223E;border-color:transparent}
.landing-designer .pricing-card.recommended ul {border-top-color:#ffffff55}
.landing-designer .pricing-note {margin-top:50px}
/* Leadership and FAQ: restore 1/3 narrative vs 2/3 content hierarchy. */
.landing-designer .audience .v2-wrap {
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start;
  gap:16px;
}
.landing-designer .audience .audience-intro {display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0}
.landing-designer .audience .audience-intro .kicker {margin:0 0 20px}
.landing-designer .audience .audience-intro h2 {
  font-size:clamp(36px,3.55vw,56px);line-height:1.03;margin:0 0 34px;
  overflow-wrap:break-word;
}
.landing-designer .audience .audience-lead {
  max-width:380px;font:400 14px/20px "Inter Tight",sans-serif;color:#90A3BF;margin:0 0 18px;
}
.landing-designer .audience .problem-grid {margin:0}
.landing-designer .audience article {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:18px;padding:26px 0}
.landing-designer .audience article h3 {font:600 clamp(19px,2vw,26px)/1 Onest,sans-serif;margin:0}
.landing-designer .audience article p {margin:0;font:400 14px/20px "Inter Tight",sans-serif;color:#90A3BF}
.landing-designer .faq .v2-wrap {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px}
.landing-designer .faq .faq-aside {min-width:0}
.landing-designer .faq .faq-body {min-width:0}
.landing-designer .faq .faq-body h2 {margin:0;font-size:clamp(36px,3.8vw,56px)}
.landing-designer .faq .faq-description {margin:16px 0 0;max-width:750px;font:400 14px/20px "Inter Tight",sans-serif;color:#90A3BF}
.landing-designer .faq .faq-list {margin-top:60px}
.landing-designer .faq details {padding:26px 0}
.landing-designer .faq summary {
  display:flex;align-items:center;min-height:36px;padding-left:0;padding-right:40px;
}
.landing-designer .faq summary h3 {
  margin:0;font:600 26px/1.15 Onest,sans-serif;color:#12223E;
  letter-spacing:-.025em;
}
.landing-designer .faq summary::before {
  position:static;display:inline-flex;align-items:center;justify-content:start;
  flex:0 0 72px;font:400 23px/1 Onest,sans-serif;
}
.landing-designer .faq details p {margin:12px 32px 0 72px;color:#60758f;font:400 14px/20px "Inter Tight",sans-serif}
/* Hero and feature typography. */
.landing-designer .feature-grid article:has([data-li18n="feat_2"]) h3 {max-width:14ch;text-wrap:pretty}
.landing-designer .feature-grid article h3 {overflow-wrap:normal}
.landing-designer .site-footer {
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;
  gap:36px 28px;align-items:start;
}
.landing-designer .site-footer .footer-to-top {
  justify-self:end;align-self:start;border:1px solid #90A3BF;
  background:transparent;color:#fff;
}
.landing-designer .site-footer .footer-to-top .button-icon {color:#24BDE8}
.landing-designer .site-footer .footer-copyright {
  grid-column:1/-1;justify-self:start;align-self:end;
  margin-top:72px;color:#90A3BF;
}
/* Responsive: preserve the layout grid without hardcoded heights or clipped text. */
@media(max-width:1080px) {
  .landing-designer .decision-flow {gap:12px}
  .landing-designer .decision-flow article {padding:20px;min-height:210px}
  .landing-designer .schedule-demo li {grid-template-columns:86px minmax(0,1fr) 82px;gap:8px;padding:12px}
  .landing-designer .pricing-card {padding:22px 18px}
  .landing-designer .pricing-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px) {
  .landing-designer .integration-heading,.landing-designer .pricing-heading-row {grid-template-columns:minmax(0,1fr)}
  .landing-designer .integration-heading p,.landing-designer .pricing .pricing-lead {text-align:left}
  .landing-designer .automation .split {grid-template-columns:1fr}
  .landing-designer .audience .v2-wrap,.landing-designer .faq .v2-wrap {grid-template-columns:1fr}
  .landing-designer .audience .audience-intro {max-width:680px}
  .landing-designer .decision-flow {grid-template-columns:repeat(2,minmax(0,1fr))}
  .landing-designer .pipeline-stages {grid-template-columns:repeat(2,minmax(0,1fr))}
  .landing-designer .integration-footer {grid-template-columns:repeat(3,minmax(0,1fr))}
  .landing-designer .site-footer {grid-template-columns:1fr auto}
  .landing-designer .site-footer nav {grid-column:1/-1;grid-row:2}
  .landing-designer .site-footer .footer-to-top {grid-column:2;grid-row:1}
}
@media(max-width:700px) {
  .landing-designer .language-select.is-enhanced {width:94px;flex:0 0 94px}
  .landing-designer .language-trigger {width:94px;padding:0 9px;gap:4px}
  .landing-designer .channels .v2-wrap>div {grid-template-columns:repeat(2,minmax(0,1fr))}
  .landing-designer .channels .v2-wrap>div>.channel-card {min-height:145px;padding:66px 14px 16px}
  .landing-designer .channels .v2-wrap>div>.channel-card::before {left:14px;top:18px;width:32px;height:30px}
  .landing-designer .channels .channel-index {right:12px;top:16px;font-size:10px}
  .landing-designer .channels .channel-card strong {font-size:18px;line-height:21px}
  .landing-designer .channels .channel-card small {font-size:11px;line-height:15px}
  .landing-designer .schedule-demo li {grid-template-columns:74px minmax(0,1fr) auto;gap:8px;min-height:62px;padding:12px 9px}
  .landing-designer .schedule-demo li>.spyon-tag {font-size:10px;padding-inline:5px}
  .landing-designer .schedule-demo li b small {font-size:10px}
  .landing-designer .schedule-demo .schedule-head {grid-template-columns:74px minmax(0,1fr) auto;font-size:11px}
  .landing-designer .pipeline-stages .pipeline-stage {min-height:145px;padding:16px}
  .landing-designer .pipeline-stages .pipeline-stage small {font-size:19px}
  .landing-designer .integration-footer p {grid-column:1/-1}
  .landing-designer .pricing-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .landing-designer .pricing-card {min-height:300px;padding:20px 14px}
  .landing-designer .pricing-card>b {font-size:25px}
  .landing-designer .pricing-card .site-button {font-size:12px}
  .landing-designer .audience article {gap:12px}
  .landing-designer .faq summary h3 {font-size:22px}
  .landing-designer .faq summary::before {flex-basis:52px;font-size:19px}
  .landing-designer .faq details p {margin-left:52px}
  .landing-designer .site-footer {gap:25px 14px}
  .landing-designer .site-footer .footer-copyright {margin-top:36px}
}
@media(max-width:430px) {
  .landing-designer .pricing-grid {grid-template-columns:1fr}
  .landing-designer .channels .v2-wrap>div>.channel-card {min-height:132px}
  .landing-designer .decision-flow {gap:10px}
  .landing-designer .decision-flow article {min-height:190px;padding:15px}
  .landing-designer .decision-flow article p {font-size:22px}
  .landing-designer .decision-flow article:last-child p {font-size:19px}
  .landing-designer .decision-flow .flow-caption {font-size:11px}
  .landing-designer .schedule-demo li {grid-template-columns:64px minmax(0,1fr) auto;font-size:12px}
}
@media(prefers-reduced-motion:reduce) {
  .landing-designer .site-button::after,.landing-designer .hero-actions .text-link::after {animation:none;display:none}
  .landing-designer .site-button,.landing-designer .hero-actions .text-link {transition:none}
}


/* Legal/trademark disclaimer belongs to the footer middle column. */
.landing-designer .site-footer .footer-middle {
  grid-column:2;min-width:0;max-width:100%;
}
.landing-designer .site-footer .footer-middle .trademark-note {
  max-width:710px;margin:0 0 24px;padding:0;border:0;
  color:#C8D9EA;background:transparent;
  font:400 12px/16px "Inter Tight",sans-serif;
}
.landing-designer .site-footer .footer-middle nav {display:grid;gap:14px}
@media(max-width:800px) {
  .landing-designer .site-footer .footer-middle {grid-column:1/-1;grid-row:2}
}


/* Pricing visual hierarchy: label, price, period, VAT and description,
   then dynamic feature limits and a real registration CTA. */
.landing-designer .pricing-card > h3 {order:0}
.landing-designer .pricing-card > b {order:1}
.landing-designer .pricing-card > .pricing-period {order:2;margin:3px 0 0;color:inherit;font-size:12px;font-weight:400}
.landing-designer .pricing-card > .pricing-tax {order:3;margin:3px 0 0;font-size:12px}
.landing-designer .pricing-card > p {order:4;margin:14px 0 0;color:#60758f}
.landing-designer .pricing-card > ul {order:5}
.landing-designer .pricing-card > .site-button {order:6}
.landing-designer .pricing-card.recommended > p {color:#fff}
.landing-designer .pricing-card.recommended > .pricing-period {color:#fff}