.clayap-connect-landing {
  display: block;
  width: 100%;
  height: auto;
  --public-shell: 1240px;
  color: var(--clayap-ink);
  background: var(--clayap-warm-ivory);
  font-family: var(--font-body);
  overflow: clip;
}

.clayap-connect-landing *,
.clayap-connect-landing *::before,
.clayap-connect-landing *::after { box-sizing: border-box; }

.clayap-connect-landing .connect-hero {
  position: relative;
  min-height: calc(100svh - var(--header-height, 64px));
  min-height: calc(100dvh - var(--header-height, 64px));
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background: var(--clayap-warm-ivory);
}
.clayap-connect-landing .connect-hero__visual {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  display: block;
  width: min(96vw, 1650px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 29%);
  mask-image: linear-gradient(90deg, transparent, #000 29%);
}
.clayap-connect-landing .connect-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.clayap-connect-landing .connect-hero__grid {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: inherit;
  padding-block: clamp(4rem, 8vh, 7rem);
}
.clayap-connect-landing .connect-hero__copy { position: relative; width: min(55%, 680px); }
.clayap-connect-landing .connect-hero h1,
.clayap-connect-landing .connect-story h2,
.clayap-connect-landing .connect-overview h2,
.clayap-connect-landing .connect-closing h2 {
  font-family: var(--font-heading);
  font-weight: 780;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.clayap-connect-landing .connect-hero h1 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(3rem, 4.7vw, 5.35rem);
  line-height: 1.02;
}
.clayap-connect-landing .connect-hero h1 span { display: block; margin-top: .22em; color: var(--clayap-deep-sage); }
.clayap-connect-landing .connect-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 52px;
  margin-top: 2rem;
  padding: .85rem 1.6rem;
  border: 1px solid var(--clayap-deep-sage);
  border-radius: 999px;
  background: var(--clayap-deep-sage);
  color: var(--clayap-white);
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 12px 28px color-mix(in oklab, var(--clayap-deep-sage) 18%, transparent);
}
.clayap-connect-landing .connect-action:hover { color: var(--clayap-white); }
.clayap-connect-landing .connect-action:focus-visible { outline: 3px solid var(--clayap-burnt-clay); outline-offset: 4px; }
/* All illustrations are intentionally low-fidelity, captioned wireframe concepts. */
.clayap-connect-landing .connect-concept {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 390px;
  margin: 0;
  overflow: hidden;
  border: 1.5px dashed color-mix(in oklab, var(--clayap-deep-sage) 42%, var(--clayap-warm-stone));
  border-radius: 24px;
  background: color-mix(in oklab, var(--clayap-white) 37%, var(--clayap-warm-ivory));
}
.clayap-connect-landing .connect-concept__label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 1.2rem 1.4rem 0;
  color: var(--clayap-deep-sage);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .105em;
  line-height: 1.4;
  text-transform: uppercase;
}
.clayap-connect-landing .connect-concept__marker { flex: 0 0 7px; height: 7px; border-radius: 50%; background: var(--clayap-burnt-clay); }
.clayap-connect-landing .connect-concept__drawing { flex: 1; display: grid; place-items: center; min-width: 0; padding: 1.8rem; }
.clayap-connect-landing .connect-story { padding: clamp(3rem, 5vw, 5rem) 0; background: var(--clayap-warm-ivory); }
.clayap-connect-landing .connect-story__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(3rem, 9vw, 10rem); }
.clayap-connect-landing .connect-story__grid--reverse .connect-story__copy { order: 2; }
.clayap-connect-landing .connect-story__grid--reverse .connect-concept { order: 1; }
.clayap-connect-landing .connect-story__number { margin: 0 0 1.7rem; color: var(--clayap-burnt-clay); font-size: .69rem; font-weight: 800; letter-spacing: .17em; }
.clayap-connect-landing .connect-story h2, .clayap-connect-landing .connect-overview h2 { margin: 0; font-size: clamp(2.65rem, 4.4vw, 4.65rem); line-height: 1.04; }
.clayap-connect-landing .connect-story__text, .clayap-connect-landing .connect-overview__intro > p:not(.connect-story__number) {
  max-width: 28rem; margin: 1.5rem 0 0; color: var(--clayap-copy-grey); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.7;
}

.clayap-connect-landing .connect-flow { display: flex; width: 100%; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; }
.clayap-connect-landing .connect-flow__item { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 78px; min-height: 94px; padding: .8rem; border: 1px dashed var(--clayap-deep-sage); border-radius: 12px; color: var(--clayap-ink); font-family: var(--font-heading); font-size: .85rem; font-weight: 700; }
.clayap-connect-landing .connect-flow__item:not(:last-child)::after { content: "→"; position: absolute; left: calc(100% + .1rem); top: 37%; color: var(--clayap-burnt-clay); }
.clayap-connect-landing .connect-flow__index { margin-bottom: .7rem; color: var(--clayap-burnt-clay); font-family: var(--font-body); font-size: .63rem; letter-spacing: .1em; }
.clayap-connect-landing .connect-wire { width: min(100%, 340px); height: 310px; padding: 1rem; border: 1.5px dashed var(--clayap-deep-sage); border-radius: 18px; }
.clayap-connect-landing .connect-wire__top { display: flex; align-items: center; gap: .7rem; padding-bottom: .8rem; border-bottom: 1px dashed var(--clayap-warm-stone); }
.clayap-connect-landing .connect-wire__avatar { width: 29px; height: 29px; border: 1px dashed var(--clayap-deep-sage); border-radius: 50%; }
.clayap-connect-landing .connect-wire__line { width: 80px; height: 7px; border-radius: 5px; background: var(--clayap-sage-mist); }
.clayap-connect-landing .connect-wire__message { width: 60%; height: 38px; margin-top: 1rem; border: 1px dashed var(--clayap-warm-stone); border-radius: 12px; }
.clayap-connect-landing .connect-wire__message--right { margin-left: auto; border-color: var(--clayap-deep-sage); background: var(--clayap-sage-mist); }
.clayap-connect-landing .connect-wire__message--small { width: 43%; }
.clayap-connect-landing .connect-wire__input { height: 32px; margin-top: 1rem; border: 1px dashed var(--clayap-warm-stone); border-radius: 18px; }
.clayap-connect-landing .connect-switch { display: flex; align-items: center; width: min(100%, 440px); }
.clayap-connect-landing .connect-switch__pane { flex: 1; min-width: 0; height: 228px; padding: 1.1rem; border: 1.5px dashed var(--clayap-deep-sage); border-radius: 15px; }
.clayap-connect-landing .connect-switch__pane span, .clayap-connect-landing .connect-transition div span { display: block; margin-bottom: 1.6rem; color: var(--clayap-deep-sage); font-size: .69rem; font-weight: 800; letter-spacing: .12em; }
.clayap-connect-landing .connect-switch__pane i, .clayap-connect-landing .connect-transition div i { display: block; height: 20px; margin: .8rem 0; border: 1px dashed var(--clayap-warm-stone); border-radius: 5px; }
.clayap-connect-landing .connect-switch__pane i:nth-child(3) { width: 70%; }
.clayap-connect-landing .connect-switch__pane i:nth-child(4) { width: 85%; }
.clayap-connect-landing .connect-switch__bridge, .clayap-connect-landing .connect-transition__arrow { padding: .5rem; color: var(--clayap-burnt-clay); font-size: 2.1rem; }
.clayap-connect-landing .connect-status { display: flex; flex-direction: column; align-items: center; }
.clayap-connect-landing .connect-status__ring { display: grid; place-items: center; width: 190px; height: 190px; border: 2px dashed var(--clayap-burnt-clay); border-radius: 50%; }
.clayap-connect-landing .connect-status__ring span { width: 145px; height: 145px; border-radius: 50%; background: color-mix(in oklab, var(--clayap-burnt-clay) 14%, transparent); }
.clayap-connect-landing .connect-status__lines { margin-top: 1.5rem; }
.clayap-connect-landing .connect-status__lines i { display: block; width: 130px; height: 7px; margin: .5rem auto; border-radius: 8px; background: var(--clayap-warm-stone); }
.clayap-connect-landing .connect-status__lines i + i { width: 90px; }
.clayap-connect-landing .connect-status__time { margin-top: .75rem; color: var(--clayap-burnt-clay); font-size: .8rem; font-weight: 800; letter-spacing: .1em; }
.clayap-connect-landing .connect-folders { width: min(100%, 410px); }
.clayap-connect-landing .connect-folders__tabs { display: flex; gap: .5rem; margin-bottom: 1.8rem; }
.clayap-connect-landing .connect-folders__tabs span { padding: .55rem .7rem; border: 1px dashed var(--clayap-deep-sage); border-radius: 100px; color: var(--clayap-deep-sage); font-size: .75rem; font-weight: 700; }
.clayap-connect-landing .connect-folders__row { display: flex; align-items: center; gap: 1rem; height: 58px; border-bottom: 1px dashed var(--clayap-warm-stone); }
.clayap-connect-landing .connect-folders__row b { width: 30px; height: 30px; border: 1px dashed var(--clayap-deep-sage); border-radius: 50%; }
.clayap-connect-landing .connect-folders__row i { width: 58%; height: 8px; border-radius: 5px; background: var(--clayap-sage-mist); }
.clayap-connect-landing .connect-folders__row:nth-child(3) i { width: 43%; }
.clayap-connect-landing .connect-call { display: flex; flex-direction: column; align-items: center; }
.clayap-connect-landing .connect-call__face { width: 155px; height: 155px; border: 2px dashed var(--clayap-deep-sage); border-radius: 50%; background: var(--clayap-sage-mist); }
.clayap-connect-landing .connect-call__wave { margin: .8rem 0 1.6rem; color: var(--clayap-burnt-clay); font-size: 2rem; letter-spacing: .2em; }
.clayap-connect-landing .connect-call__modes { display: flex; gap: 1rem; }
.clayap-connect-landing .connect-call__modes span { min-width: 80px; padding: .7rem; border: 1px dashed var(--clayap-deep-sage); border-radius: 100px; color: var(--clayap-deep-sage); text-align: center; font-size: .65rem; font-weight: 800; letter-spacing: .1em; }
.clayap-connect-landing .connect-transition { display: flex; align-items: center; width: min(100%, 430px); }
.clayap-connect-landing .connect-transition div { flex: 1; min-width: 0; height: 175px; padding: 1rem; border: 1.5px dashed var(--clayap-deep-sage); border-radius: 13px; }
.clayap-connect-landing .connect-transition div:last-child { border-color: var(--clayap-burnt-clay); }
.clayap-connect-landing .connect-transition div i:nth-last-child(1) { width: 66%; }

.clayap-connect-landing .connect-overview { padding: clamp(3rem, 5vw, 5rem) 0; background: var(--clayap-white); }
.clayap-connect-landing .connect-overview__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 9vw, 10rem); }
.clayap-connect-landing .connect-overview .connect-concept { min-height: 120px; max-width: 330px; margin-top: 2.2rem; }
.clayap-connect-landing .connect-overview .connect-concept__drawing { padding: 1rem; }
.clayap-connect-landing .connect-overview-lines { display: flex; align-items: center; gap: .8rem; width: 85%; }
.clayap-connect-landing .connect-overview-lines i { flex: 1; height: 17px; border: 1px dashed var(--clayap-deep-sage); border-radius: 4px; }
.clayap-connect-landing .connect-overview-lines i:nth-child(2) { border-color: var(--clayap-burnt-clay); }
.clayap-connect-landing .connect-feature-groups { align-self: center; }
.clayap-connect-landing .connect-feature-group { padding: 1.4rem 0; border-top: 1px solid var(--clayap-warm-stone); }
.clayap-connect-landing .connect-feature-group:last-child { border-bottom: 1px solid var(--clayap-warm-stone); }
.clayap-connect-landing .connect-feature-group h3 { margin: 0 0 1rem; font-family: var(--font-heading); font-size: 1.35rem; letter-spacing: -.03em; }
.clayap-connect-landing .connect-feature-group p { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: .7rem 0; color: var(--clayap-copy-grey); font-size: .94rem; }
.clayap-connect-landing .connect-badge { flex: 0 0 auto; padding: .38rem .65rem; border-radius: 100px; font-size: .67rem; font-weight: 800; line-height: 1.1; }
.clayap-connect-landing .connect-badge--available { background: var(--clayap-sage-mist); color: var(--clayap-deep-sage); }
.clayap-connect-landing .connect-badge--v1 { background: var(--clayap-clay-soft); color: var(--clayap-burnt-clay); }
.clayap-connect-landing .connect-badge--planned { border: 1px solid var(--clayap-warm-stone); color: var(--clayap-copy-grey); }
.clayap-connect-landing .connect-trust { display: flex; flex-direction: column; align-items: center; }
.clayap-connect-landing .connect-trust__circle { display: grid; place-items: center; width: 180px; height: 180px; border: 2px dashed var(--clayap-deep-sage); border-radius: 50%; }
.clayap-connect-landing .connect-trust__circle span { width: 68px; height: 82px; border: 2px dashed var(--clayap-deep-sage); border-radius: 45% 45% 12px 12px; }
.clayap-connect-landing .connect-trust i { width: 140px; height: 7px; margin-top: 1.5rem; border-radius: 10px; background: var(--clayap-warm-stone); }
.clayap-connect-landing .connect-trust i + i { width: 95px; margin-top: .55rem; }
.clayap-connect-landing .connect-closing { padding: clamp(3.5rem, 6vw, 5.5rem) 0; background: var(--clayap-white); }
.clayap-connect-landing .connect-closing__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr); gap: 4rem; align-items: center; }
.clayap-connect-landing .connect-closing h2 { max-width: 900px; margin: 0; font-size: clamp(3rem, 5vw, 5.6rem); line-height: 1.03; }
.clayap-connect-landing .connect-closing h2 span { display: block; margin-top: .35em; color: var(--clayap-deep-sage); }
.clayap-connect-landing .connect-concept--closing { min-height: 270px; }
.clayap-connect-landing .connect-path { display: flex; align-items: center; gap: 1rem; width: 85%; }
.clayap-connect-landing .connect-path span { width: 42px; height: 42px; flex: 0 0 42px; border: 2px dashed var(--clayap-deep-sage); border-radius: 50%; }
.clayap-connect-landing .connect-path span + span::before { content: ""; display: block; width: 1rem; margin-left: -1.2rem; margin-top: 18px; border-top: 2px dashed var(--clayap-burnt-clay); }
.clayap-connect-landing .connect-path span:last-child { width: 78px; height: 78px; flex-basis: 78px; border-color: var(--clayap-burnt-clay); }

@media (max-width: 900px) {
  .clayap-connect-landing .connect-hero { align-items: stretch; }
  .clayap-connect-landing .connect-hero__grid {
    align-items: flex-start;
    padding-block: clamp(2rem, 5vh, 3.5rem) clamp(19rem, 50vw, 29rem);
  }
  .clayap-connect-landing .connect-hero__copy { width: min(100%, 780px); }
  .clayap-connect-landing .connect-hero h1 { max-width: 780px; font-size: clamp(3rem, 7vw, 5rem); }
  .clayap-connect-landing .connect-hero__visual {
    inset: auto 0 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%);
    mask-image: linear-gradient(to bottom, transparent, #000 25%);
  }
  .clayap-connect-landing .connect-hero__visual img {
    object-fit: contain;
    object-position: center bottom;
  }
  .clayap-connect-landing .connect-story__grid, .clayap-connect-landing .connect-overview__layout, .clayap-connect-landing .connect-closing__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .clayap-connect-landing .connect-story__grid--reverse .connect-story__copy, .clayap-connect-landing .connect-story__grid--reverse .connect-concept { order: initial; }
  .clayap-connect-landing .connect-story { padding: 3.5rem 0; }
  .clayap-connect-landing .connect-story .connect-concept { min-height: 340px; }
  .clayap-connect-landing .connect-closing .connect-concept { max-width: 500px; }
}
@media (max-width: 600px) {
  .clayap-connect-landing .clayap-public-shell { width: calc(100% - 2rem); }
  .clayap-connect-landing .connect-hero__grid { padding-block: 2.5rem clamp(13rem, 65vw, 19rem); }
  .clayap-connect-landing .connect-hero h1 { font-size: clamp(2.5rem, 10vw, 3.1rem); }
  .clayap-connect-landing .connect-action { width: 100%; }
  .clayap-connect-landing .connect-concept__label { padding: 1rem 1rem 0; font-size: .59rem; }
  .clayap-connect-landing .connect-concept__drawing { padding: 1rem; }
  .clayap-connect-landing .connect-story { padding: 2.5rem 0; }
  .clayap-connect-landing .connect-story h2, .clayap-connect-landing .connect-overview h2 { font-size: clamp(2.5rem, 10.4vw, 3.7rem); }
  .clayap-connect-landing .connect-story .connect-concept { min-height: 300px; }
  .clayap-connect-landing .connect-flow { gap: .3rem; }
  .clayap-connect-landing .connect-flow__item { min-width: 55px; min-height: 75px; padding: .4rem; font-size: .62rem; }
  .clayap-connect-landing .connect-flow__index { font-size: .54rem; }
  .clayap-connect-landing .connect-flow__item:not(:last-child)::after { left: calc(100% + .03rem); font-size: .75rem; }
  .clayap-connect-landing .connect-overview { padding: 2.5rem 0; }
  .clayap-connect-landing .connect-feature-group p { font-size: .83rem; }
  .clayap-connect-landing .connect-closing { padding: 3rem 0; }
  .clayap-connect-landing .connect-closing h2 { font-size: clamp(2.7rem, 10.5vw, 4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .clayap-connect-landing .connect-action { transition: none; }
  .clayap-connect-landing .connect-action:hover, .clayap-connect-landing .connect-action:active { transform: none; }
}
.clayap-connect-landing .connect-stories{width:100%}.clayap-connect-landing .connect-story{color:var(--color-text,var(--clayap-ink,#12151b));overflow:clip}.clayap-connect-landing .connect-story--tone-1{background:color-mix(in srgb,var(--clayap-warm-ivory,#f6f2ea) 82%,#e8f1ee 18%)}.clayap-connect-landing .connect-story--tone-2{background:var(--clayap-warm-ivory,#f6f2ea)}.clayap-connect-landing .connect-story--tone-3{background:color-mix(in srgb,var(--clayap-warm-ivory,#f6f2ea) 88%,#f1dfdc 12%)}
.clayap-connect-landing .connect-story__shell{width:min(1320px,calc(100% - clamp(36px,8vw,128px)));min-height:min(850px,86svh);margin:0 auto;padding:clamp(88px,9vw,150px) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.88fr);gap:clamp(48px,8vw,132px);align-items:center}.clayap-connect-landing .connect-story--image-left .connect-story__copy{order:2}.clayap-connect-landing .connect-story--image-left .connect-story__visual{order:1}.clayap-connect-landing .connect-story__copy{max-width:620px}.clayap-connect-landing .connect-story__kicker{margin:0 0 clamp(18px,2vw,28px);color:var(--clayap-burnt-clay,#a9553f);font-size:.78rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.clayap-connect-landing .connect-story__title{margin:0;font-size:clamp(2.75rem,4.5vw,5.25rem);line-height:.96;letter-spacing:-.052em;font-weight:770;text-wrap:balance;hyphens:none;word-break:normal}.clayap-connect-landing .connect-story__body{margin:clamp(24px,2.8vw,38px) 0 0;max-width:560px;font-size:clamp(1.05rem,1.45vw,1.34rem);line-height:1.48;color:color-mix(in srgb,var(--color-text,#12151b) 72%,transparent);text-wrap:pretty}.clayap-connect-landing .connect-story__visual{width:min(100%,455px);justify-self:center;transform-origin:50% 58%;filter:drop-shadow(0 26px 34px rgba(24,31,29,.13));will-change:transform}.clayap-connect-landing .connect-story__visual--right{transform:rotate(1.6deg)}.clayap-connect-landing .connect-story__visual--left{transform:rotate(-1.6deg)}.clayap-connect-landing .connect-story__visual img{display:block;width:100%;height:auto}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.clayap-connect-landing .connect-story__visual{transition:transform 280ms cubic-bezier(.2,.8,.2,1),filter 280ms ease}.clayap-connect-landing .connect-story__visual:hover{transform:translateY(-7px) rotate(.2deg) scale(1.012);filter:drop-shadow(0 34px 44px rgba(24,31,29,.17))}}
@media(max-width:1100px){.clayap-connect-landing .connect-story__shell{grid-template-columns:minmax(0,1fr) minmax(310px,.82fr);gap:clamp(34px,5vw,70px);min-height:auto}.clayap-connect-landing .connect-story__title{font-size:clamp(2.6rem,5vw,4rem)}.clayap-connect-landing .connect-story__visual{width:min(100%,410px)}}
@media(max-width:760px){.clayap-connect-landing .connect-story__shell{width:min(100% - 28px,620px);padding:72px 0 84px;grid-template-columns:1fr;gap:38px}.clayap-connect-landing .connect-story__copy,.clayap-connect-landing .connect-story--image-left .connect-story__copy{order:1}.clayap-connect-landing .connect-story__visual,.clayap-connect-landing .connect-story--image-left .connect-story__visual{order:2}.clayap-connect-landing .connect-story__title{font-size:clamp(2.5rem,12vw,4rem)}.clayap-connect-landing .connect-story__body{margin-top:20px;font-size:1.06rem}.clayap-connect-landing .connect-story__visual{width:min(86vw,420px)}.clayap-connect-landing .connect-story__visual--right{transform:rotate(1.1deg)}.clayap-connect-landing .connect-story__visual--left{transform:rotate(-1.1deg)}}@media(prefers-reduced-motion:reduce){.clayap-connect-landing .connect-story__visual{transform:none}}

.clayap-connect-landing .connect-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.clayap-connect-landing .connect-hero-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:center right}.clayap-connect-landing .connect-hero-content,.clayap-connect-landing .connect-hero__content{position:relative;z-index:1}@media(max-width:760px){.clayap-connect-landing .connect-hero-media img{object-position:64% center}}@media(max-width:767px){.clayap-connect-landing .connect-hero-media{background:#f6f2ea}.clayap-connect-landing .connect-hero-media img{object-fit:contain;object-position:center bottom}}