/* Connect landing visual + motion preview — progressive enhancement only.
   Existing content, forms, SEO, navigation and interaction contracts remain authoritative. */

html { scroll-behavior: smooth; }
body.connect-site { overflow-x: clip; background: transparent; }

/* ---------- Brand / editorial system ---------- */
.connect-site {
  --header: 68px;
  --lp-width: 1320px;
  --lp-gutter: clamp(1.1rem, 3vw, 2.75rem);
  --lp-radius: 1.45rem;
}

.connect-site :is(h1,h2) {
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  text-wrap: balance;
}
.connect-site h1 {
  font-size: clamp(3.35rem, 5.45vw, 5.55rem);
  line-height: .98;
  font-weight: 500;
  letter-spacing: -.058em;
  max-width: 10.7ch;
}
.connect-site h2 {
  font-weight: 500;
  letter-spacing: -.045em;
}
.connect-site h3 { letter-spacing: -.025em; }

/* ---------- Compact premium header ---------- */
.connect-site .lp-header {
  height: var(--header);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 62%, transparent);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  transition: height 420ms cubic-bezier(.32,.72,0,1), box-shadow 420ms cubic-bezier(.32,.72,0,1), background 420ms ease;
}
.connect-site .lp-header.is-scrolled {
  height: 62px;
  box-shadow: 0 16px 46px rgba(39, 29, 18, .09);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.connect-site .lp-header-inner { gap: 1.15rem; }
.connect-site .lp-brand { gap: .65rem; min-height: 40px; }
.connect-site .lp-brand img { width: 34px; height: 34px; }
.connect-site .lp-brand strong { font-size: 1.18rem; letter-spacing: -.045em; }
/*  .66rem is 10.56px. 12px is the floor for secondary text. */
.connect-site .lp-brand small { font-size: .75rem; margin-top: 1px; }
.connect-site .lp-nav,
.connect-site .lp-header-actions { gap: clamp(.75rem, 1.5vw, 1.35rem); }
.connect-site .lp-nav a,
.connect-site .lp-signin { min-height: 40px; font-size: .81rem; font-weight: 620; }
.connect-site .lp-nav a { position: relative; }
.connect-site .lp-nav a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 7px;
  height: 1px;
  background: var(--accent);
  transition: left 260ms ease, right 260ms ease;
}
.connect-site .lp-nav a:hover::after { left: 0; right: 0; }
.connect-site .lp-header .lp-btn { min-height: 42px; padding: .65rem 1rem; }
.connect-site .lp-theme { width: 38px; height: 38px; }

/* ---------- Hero: warm gallery-like composition ---------- */
.connect-site .lp-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(3.8rem, 7vw, 6rem) clamp(1.25rem, 3vw, 3rem) 2.4rem;
  margin-top: clamp(1rem, 2vw, 1.65rem);
  border: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent);
  border-radius: clamp(1.8rem, 3.3vw, 3.4rem);
  background:
    radial-gradient(760px 470px at 78% 18%, rgba(216, 158, 91, .22), transparent 68%),
    radial-gradient(580px 440px at 18% 22%, rgba(255,255,255,.72), transparent 74%),
    linear-gradient(135deg, rgba(255,253,248,.91), rgba(238,224,205,.83));
  box-shadow: 0 36px 100px rgba(62, 44, 25, .10), inset 0 1px 0 rgba(255,255,255,.86);
  overflow: hidden;
}
html[data-theme="dark"] .connect-site .lp-hero {
  background:
    radial-gradient(760px 470px at 79% 16%, rgba(217,146,78,.16), transparent 68%),
    radial-gradient(600px 440px at 17% 24%, rgba(82,198,179,.045), transparent 76%),
    linear-gradient(135deg, rgba(21,29,34,.96), rgba(11,17,21,.98));
  box-shadow: 0 38px 110px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.045);
}
.connect-site .lp-hero::before {
  content: "";
  position: absolute;
  width: min(62vw, 880px);
  aspect-ratio: 1.4;
  right: -18vw;
  top: -10rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: .75;
  background: radial-gradient(ellipse, rgba(227, 177, 115, .30) 0%, rgba(227,177,115,.07) 38%, transparent 72%);
  filter: blur(4px);
}
.connect-site .lp-hero::after {
  content: "";
  position: absolute;
  left: -8%; right: -8%; bottom: -12%;
  height: 31%;
  pointer-events: none;
  z-index: -1;
  opacity: .58;
  background:
    radial-gradient(70% 80% at 23% 100%, rgba(190,119,45,.16), transparent 68%),
    linear-gradient(175deg, transparent 0 42%, rgba(178,121,64,.12) 44%, transparent 48% 100%);
  transform: rotate(-2deg);
}
.connect-site .lp-hero-grid {
  grid-template-columns: minmax(0,.93fr) minmax(480px,1.07fr);
  gap: clamp(3rem, 5vw, 5.5rem);
  align-items: center;
}
.connect-site .lp-intro {
  margin-bottom: 1.4rem !important;
  color: var(--accent-text);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.connect-site .lp-intro::before { width: 34px; height: 1px; background: var(--accent); }
.connect-site .lp-hero-lede {
  max-width: 43ch;
  margin-top: 1.55rem !important;
  color: color-mix(in srgb, var(--ink) 66%, var(--muted));
  font-size: clamp(1.02rem, 1.35vw, 1.17rem);
  line-height: 1.65;
}
.connect-site .lp-hero-actions { margin-top: 1.8rem; gap: .85rem; }
.connect-site .lp-btn {
  min-height: 48px;
  border-radius: .9rem;
  transition: transform 260ms cubic-bezier(.32,.72,0,1), box-shadow 260ms ease, background 260ms ease, border-color 260ms ease;
}
.connect-site .lp-btn-primary {
  background: linear-gradient(180deg, #1D2328 0%, #12171B 100%);
  color: #FFF8EE;
  box-shadow: 0 12px 28px rgba(21,25,28,.16), inset 0 1px 0 rgba(255,255,255,.1);
}
.connect-site .lp-btn-primary:hover {
  background: linear-gradient(180deg, #252C31 0%, #161B1F 100%);
  box-shadow: 0 18px 34px rgba(21,25,28,.20), 0 0 0 1px rgba(222,166,101,.18);
}
.connect-site .lp-btn-secondary {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-color: color-mix(in srgb, var(--line-strong) 74%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
.connect-site .lp-reassurance { opacity: .8; }
.connect-site .lp-hero-signoff { color: color-mix(in srgb, var(--ink) 72%, var(--muted)); }
.connect-site .lp-hero-signoff .lp-icon { color: var(--green); }

/* Product demo becomes the luminous center object, without changing its DOM. */
.connect-site .lp-demo {
  position: relative;
  padding: 1rem;
  border: 1px solid rgba(179, 120, 57, .25);
  border-radius: 2rem;
  background: linear-gradient(145deg, rgba(255,253,248,.76), rgba(236,223,204,.57));
  box-shadow: 0 30px 70px rgba(69,47,23,.15), inset 0 1px 0 rgba(255,255,255,.9);
  transform-origin: 52% 70%;
  backface-visibility: hidden;
  will-change: transform;
}
html[data-theme="dark"] .connect-site .lp-demo {
  background: linear-gradient(145deg, rgba(28,38,44,.90), rgba(12,18,22,.80));
  border-color: rgba(231,174,105,.22);
  box-shadow: 0 32px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.045);
}
.connect-site .lp-demo::before {
  content: "";
  position: absolute;
  inset: -12% -10%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at 54% 50%, rgba(230,177,112,.30), transparent 64%);
  filter: blur(18px);
}
.connect-site .lp-demo::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(224,166,94,.15), 0 32px 90px rgba(182,114,46,.18);
  opacity: .48;
  transition: opacity 600ms cubic-bezier(.32,.72,0,1);
}
.connect-site .lp-demo:hover::after { opacity: .95; }
.connect-site .lp-workspace {
  border-color: rgba(98,72,44,.18);
  box-shadow: 0 22px 54px rgba(40,30,20,.12);
}
.connect-site .lp-record {
  background: linear-gradient(135deg, #172027 0%, #0E1418 100%);
  border-bottom: 1px solid rgba(240,191,128,.14);
}
.connect-site .lp-avatar { background: #2C3439; color: #F0BF80; }
.connect-site .lp-record-tag { border-color: rgba(240,191,128,.36); color: #F6E5D0; }
.connect-site .lp-demo-tabs button[aria-selected="true"] {
  color: #8B531C;
  background: linear-gradient(180deg, #F8EBD8, #F0D7B8);
  box-shadow: inset 0 0 0 1px rgba(181,114,45,.15);
}
html[data-theme="dark"] .connect-site .lp-demo-tabs button[aria-selected="true"] {
  color: #F0BF80;
  background: rgba(217,146,78,.12);
}
.connect-site .lp-next-action>span { color: var(--green); background: var(--lp-success-soft); }

/* Hero continuity strip becomes a compact dark trust bar. */
.connect-site .lp-connection-strip {
  margin-top: 2.3rem;
  padding: 1.05rem 1.25rem;
  border: 1px solid rgba(240,191,128,.14);
  border-radius: 1.2rem;
  background: linear-gradient(135deg, #171E23, #10161A);
  box-shadow: 0 16px 40px rgba(18,22,25,.12);
  color: #FFF8EE;
}
.connect-site .lp-connection-strip p { color: #C6BEB4; }
.connect-site .lp-connection-items span { color: #F7EEE2; }
.connect-site .lp-connection-items .lp-plus { color: #D9A15F; }

/* ---------- Section rhythm + premium cards ---------- */
/*  The rhythm answers to the height of the screen as well as its width. It used
 *  to be 8vw alone, which is why a wide, short laptop - 1366x768 is the common
 *  one - got the *most* vertical padding exactly where there was the least room
 *  for it, and pushed the bottom of a composed section below the fold. Taking
 *  the smaller of a width-derived and a height-derived value keeps the generous
 *  rhythm on a tall display and gives a short one its space back. */
.connect-site .lp-section { padding-block: clamp(3rem, min(8vw, 6.5vh), 7.5rem); }
.connect-site .lp-white { background: transparent; }
.connect-site .lp-section-head { margin-bottom: clamp(1.75rem, min(5vw, 4vh), 4.5rem); }
.connect-site .lp-label {
  color: var(--accent-text);
  /*  .7rem is 11.2px, on the eyebrow above every section heading. */
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.connect-site .lp-pain-grid article,
.connect-site .lp-journey article,
.connect-site .lp-channel,
.connect-site .lp-policy,
.connect-site .lp-knowledge-map,
.connect-site .lp-why-now,
.connect-site .lp-proof-screen,
.connect-site .lp-start-steps > li {
  border: 1px solid color-mix(in srgb, var(--line-strong) 62%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--bg-2) 50%, transparent));
  box-shadow: 0 18px 46px rgba(65,46,27,.07), inset 0 1px 0 rgba(255,255,255,.68);
}
.connect-site .lp-pain-grid { gap: 1rem; }
.connect-site .lp-pain-grid article {
  padding: 1.45rem;
  border-top-width: 1px;
  border-radius: 1.35rem;
}
.connect-site .lp-pain-grid .lp-icon { color: var(--accent); }
.connect-site .lp-pain-grid .lp-resolution { color: var(--accent-text); }

.connect-site .lp-journey { gap: 1rem; }
.connect-site .lp-journey article { padding: 1.35rem; border-radius: 1.3rem; }
.connect-site .lp-journey article:not(:last-child)::after { display: none; }
.connect-site .lp-step-number {
  background: linear-gradient(180deg, #FFF8EC, #F0DABF);
  border-color: rgba(177,111,43,.25);
  color: #8B531C;
  box-shadow: 0 8px 20px rgba(102,68,33,.08);
}
html[data-theme="dark"] .connect-site .lp-step-number {
  background: rgba(217,146,78,.10);
  color: #F0BF80;
}

/* Dark cinematic channel chapter. */
.connect-site #channels {
  position: relative;
  color: #F8F0E6;
  background:
    radial-gradient(800px 420px at 68% 22%, rgba(222,166,101,.14), transparent 70%),
    radial-gradient(560px 360px at 12% 72%, rgba(82,198,179,.055), transparent 72%),
    linear-gradient(180deg, #131B20 0%, #0D1317 100%);
  border-block: 1px solid rgba(240,191,128,.10);
  overflow: clip;
}
.connect-site #channels .lp-section-head > p,
.connect-site #channels .lp-section-note { color: #BEB7AF; }
.connect-site #channels .lp-label { color: #E4AC68; }
.connect-site #channels .lp-channel {
  color: #F8F0E6;
  border-color: rgba(240,191,128,.18);
  background: linear-gradient(145deg, rgba(33,43,49,.82), rgba(17,24,28,.86));
  box-shadow: 0 26px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045);
}
.connect-site #channels .lp-channel p { color: #BEB7AF; }
.connect-site #channels .lp-channel > span:last-child { color: #D9A15F; }
.connect-site #channels .lp-channel-icon { color: #E5AD69; background: rgba(217,146,78,.10); }

.connect-site .lp-knowledge-map,
.connect-site .lp-why-now { border-radius: 1.6rem; }
.connect-site .lp-proof-screen { overflow: hidden; border-radius: 1.65rem; }
.connect-site .lp-proof-screen img { display: block; }
.connect-site .lp-start-steps > li { border-radius: 1.25rem; }

/* Control section gets the light-gallery / dark-instrument contrast from the brand mark. */
.connect-site #needs-you {
  background:
    radial-gradient(760px 340px at 88% 20%, rgba(216,158,91,.14), transparent 72%),
    linear-gradient(180deg, rgba(255,252,247,.38), rgba(234,219,199,.34));
}
html[data-theme="dark"] .connect-site #needs-you {
  background: linear-gradient(180deg, rgba(19,27,32,.75), rgba(12,18,22,.82));
}

/* Footer / final CTA: graphite finish. */
.connect-site footer {
  background: linear-gradient(180deg, #12191E, #0B1014);
  color: #F7EFE4;
  border-top: 1px solid rgba(240,191,128,.14);
}
.connect-site footer a { color: #D4CCC2; }
.connect-site footer a:hover { color: #F0BF80; }

/* ---------- Motion-only affordances ---------- */
.connect-motion-progress {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #B9732D, #F0BF80 72%, #52C6B3);
  box-shadow: 0 0 12px rgba(222,166,101,.35);
  z-index: 80;
  pointer-events: none;
}

.connect-site .lp-demo,
.connect-site .lp-pain-grid article,
.connect-site .lp-journey article,
.connect-site .lp-channel,
.connect-site .lp-policy,
.connect-site .lp-proof-screen { transform-origin: 50% 70%; backface-visibility: hidden; }

@media (min-width: 960px) {
  .connect-site #channels .lp-section-head { align-items: start; }
  .connect-site #channels .lp-channels { perspective: 1200px; }
  .connect-site #channels .lp-channel { will-change: transform, opacity; transform-style: preserve-3d; }
}

@media (hover: hover) and (pointer: fine) {
  .connect-site .lp-btn-primary,
  .connect-site .lp-btn-secondary { will-change: transform; }
  .connect-site .lp-channel,
  .connect-site .lp-pain-grid article,
  .connect-site .lp-journey article,
  .connect-site .lp-proof-screen {
    transition: transform 560ms cubic-bezier(.32,.72,0,1), box-shadow 560ms cubic-bezier(.32,.72,0,1), border-color 560ms ease;
  }
  .connect-site .lp-channel:hover,
  .connect-site .lp-pain-grid article:hover,
  .connect-site .lp-journey article:hover {
    transform: translateY(-7px);
    border-color: rgba(193,128,59,.34);
    box-shadow: 0 28px 60px rgba(74,50,24,.12), inset 0 1px 0 rgba(255,255,255,.74);
  }
  .connect-site #channels .lp-channel:hover {
    border-color: rgba(240,191,128,.36);
    box-shadow: 0 34px 70px rgba(0,0,0,.36), 0 0 0 1px rgba(231,174,105,.06) inset;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .connect-site .lp-nav { display: none; }
  .connect-site .lp-menu-toggle { display: inline-grid; }
  .connect-site .lp-hero-grid { grid-template-columns: 1fr; }
  .connect-site h1 { max-width: 12ch; }
  .connect-site .lp-demo { max-width: 760px; width: 100%; margin-inline: auto; }
}

@media (max-width: 767px) {
  .connect-site { --header: 62px; }
  .connect-site .lp-header-actions > .lp-btn-primary,
  .connect-site .lp-signin { display: none; }
  .connect-site .lp-brand img { width: 31px; height: 31px; }
  .connect-site .lp-brand strong { font-size: 1.05rem; }
  .connect-site .lp-hero {
    margin-top: .75rem;
    padding: 2.7rem 1rem 1.15rem;
    border-radius: 1.55rem;
  }
  .connect-site .lp-hero::before { width: 110vw; right: -65vw; top: -3rem; }
  .connect-site h1 { font-size: clamp(2.85rem, 14vw, 4.2rem); max-width: 10.5ch; }
  .connect-site .lp-hero-lede { font-size: 1rem; }
  .connect-site .lp-demo { border-radius: 1.45rem; padding: .65rem; }
  .connect-site .lp-connection-strip { align-items: flex-start; padding: 1rem; border-radius: 1rem; }
  .connect-site .lp-connection-items { gap: .8rem; }
  .connect-site .lp-section { padding-block: clamp(2.5rem, 5.5vh, 4.2rem); }
  .connect-site .lp-pain-grid article,
  .connect-site .lp-journey article { border-radius: 1.1rem; }
  .connect-motion-progress { height: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .connect-motion-progress { display: none; }
  .connect-site .lp-header { transition: none; }
  .connect-site .lp-demo,
  .connect-site .lp-channel,
  .connect-site .lp-pain-grid article,
  .connect-site .lp-journey article,
  .connect-site .lp-proof-screen,
  .connect-site .lp-btn { transform: none !important; transition: none !important; }
  .connect-site .lp-demo::after { display: none; }
}