/* ==========================================================================
   Krignal — v4 "Two Sides"
   Loaded after v4.css, which supplies the tokens, header, buttons and the
   shared sections. This file only owns what is particular to this edition:
   the split window whose halves scroll against each other, the meeting of
   the hands, and the both-ways diagram.
   ========================================================================== */

/* ---------- The split ------------------------------------------------------ */
.sides { position: relative; height: 640vh; }
.sides__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr 1fr; background: var(--night); color: #fff;
}
.half { position: relative; overflow: hidden; isolation: isolate; min-width: 0; min-height: 0; }
.half__art { position: absolute; inset: -8% -4%; z-index: -2; }
.half__art img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.half--you .half__art img { object-position: 76% 42%; }
.half--them .half__art img { object-position: 34% 42%; filter: saturate(1.05) hue-rotate(-8deg) brightness(.86) contrast(1.04); }
.half__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.half--you .half__veil { background: linear-gradient(90deg, rgba(4, 26, 42, .5), rgba(4, 26, 42, .12) 60%, rgba(4, 26, 42, .28)), linear-gradient(180deg, rgba(4, 26, 42, .5), rgba(4, 26, 42, 0) 30%); }
.half--them .half__veil { background: linear-gradient(270deg, rgba(20, 16, 40, .55), rgba(20, 16, 40, .14) 60%, rgba(20, 16, 40, .3)), linear-gradient(180deg, rgba(20, 16, 40, .5), rgba(20, 16, 40, 0) 30%); }
.half__label {
  position: absolute; z-index: 3; top: calc(var(--hd-h) + 18px);
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .68rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .86);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.half--you .half__label { left: max(var(--pad), 28px); }
.half--them .half__label { right: max(var(--pad), 28px); }
.half__label::before { content: ""; width: 22px; height: 1px; background: var(--gold); }

/* each half carries a track of five panels, one screen tall; the second
   half's panels are stacked in reverse, so it runs the other way */
.track { position: absolute; inset: 0; will-change: transform; }
.pnl {
  position: absolute; left: 0; right: 0; height: 100%;
  display: grid; place-items: center; padding: calc(var(--hd-h) + 56px) clamp(24px, 4vw, 56px) 110px;
}
.half--you .pnl { top: calc(var(--i) * 100%); }
.half--them .pnl { top: calc((4 - var(--i)) * 100%); }

.card {
  width: min(440px, 100%); padding: 24px 26px 26px; border-radius: 22px; color: var(--ink);
  background: rgba(252, 250, 244, .95); border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .12);
  transform: scale(.94); opacity: .55; transition: transform .7s var(--ease), opacity .7s var(--ease);
}
.pnl.is-on .card { transform: none; opacity: 1; }
.card__who { display: flex; align-items: center; gap: 12px; }
.card__who > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.card__who b { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; }
.card__who small { font-size: .78rem; color: var(--ink-3); }
.card__quote { margin-top: 16px; font-family: var(--serif); font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.32; }
.card__k { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.card__req { margin-top: 12px; font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.28; }
.card__chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.card .chip { opacity: 1; transform: none; }
.pnl .card__chips .chip { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.pnl.is-on .card__chips .chip { opacity: 1; transform: none; }
.pnl.is-on .card__chips .chip:nth-child(2) { transition-delay: .12s; }
.pnl.is-on .card__chips .chip:nth-child(3) { transition-delay: .24s; }
.card__status { margin-top: 16px; display: flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 600; color: var(--gold-dk); }
.card__offers { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.card__offers .mchip { opacity: 1; transform: none; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
.pnl .card__offers .mchip { opacity: 0; transform: translateX(-10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.pnl.is-on .card__offers .mchip { opacity: 1; transform: none; }
.pnl.is-on .card__offers .mchip:nth-child(2) { transition-delay: .12s; }
.pnl.is-on .card__offers .mchip:nth-child(3) { transition-delay: .24s; }
.card__foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-2); display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--ink-2); }
.card__foot svg { color: var(--gold-dk); flex: none; }
.card__ai { display: inline-flex; align-items: center; gap: 9px; }
.checks { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.checks li {
  display: grid; grid-template-columns: auto 1fr auto 18px; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px; background: var(--canvas); border: 1px solid var(--line);
  font-size: .84rem;
}
.checks li > span:first-child { font-weight: 600; }
.checks li > span:nth-child(3) { color: var(--ink-2); }
.checks i { height: 2px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.checks i::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-dk), var(--gold));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease);
}
.checks svg { color: var(--gold-dk); opacity: 0; transform: scale(.6); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.pnl.is-on .checks li:nth-child(1) i::after { transform: none; transition-delay: .2s; }
.pnl.is-on .checks li:nth-child(1) svg { opacity: 1; transform: none; transition-delay: 1s; }
.pnl.is-on .checks li:nth-child(2) i::after { transform: none; transition-delay: 1.1s; }
.pnl.is-on .checks li:nth-child(2) svg { opacity: 1; transform: none; transition-delay: 1.9s; }
.card--found .card__req { margin-top: 14px; }
.card__why { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.card__why li { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.card__why svg { color: var(--gold-dk); flex: none; }
.card__btns { margin-top: 18px; display: flex; justify-content: flex-end; gap: 8px; }
.yesbtn { display: inline-flex; align-items: center; gap: 6px; }
.yesbtn svg { width: 0; opacity: 0; transition: width .35s var(--ease), opacity .35s var(--ease); }
.pnl.is-on .yesbtn { box-shadow: 0 0 0 4px rgba(223, 191, 115, .28); transition: box-shadow .4s var(--ease) .9s; }
.pnl.is-on .yesbtn svg { width: 12px; opacity: 1; transition-delay: .9s; }

/* the seam, and Krignal in it */
.seam { position: absolute; z-index: 4; top: 0; bottom: 0; left: 50%; width: 0; pointer-events: none; }
.seam__line {
  position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: linear-gradient(180deg, rgba(223, 191, 115, 0), rgba(223, 191, 115, .85) 22%, rgba(223, 191, 115, .85) 78%, rgba(223, 191, 115, 0));
  box-shadow: 0 0 18px rgba(223, 191, 115, .5);
}
.seam__node {
  position: absolute; top: 50%; left: 0; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%;
  display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #1b4252, var(--night));
  border: 1px solid var(--gold); box-shadow: 0 0 0 8px rgba(223, 191, 115, .12), 0 0 40px rgba(223, 191, 115, .45);
  transition: box-shadow .6s var(--ease), transform .6s var(--ease);
}
.seam__node img { width: 22px; height: 25px; object-fit: contain; }
.seam__arr {
  position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; opacity: 0;
  border-top: 2px solid var(--gold); border-right: 2px solid var(--gold);
}
.seam__arr--l { left: -26px; transform: rotate(-135deg); }
.seam__arr--r { right: -26px; transform: rotate(45deg); }
.seam[data-step="3"] .seam__arr { animation: reach 1.3s var(--ease) infinite; }
.seam[data-step="3"] .seam__arr--r { animation-delay: .65s; }
@keyframes reach { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.seam[data-step="3"] .seam__arr--l { --dx: -12px; }
.seam[data-step="4"] .seam__node { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(223, 191, 115, .22), 0 0 70px rgba(223, 191, 115, .8); }

.sides__intro {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--hd-h) var(--pad) 40px;
  background: radial-gradient(ellipse 58% 62% at 50% 52%, rgba(6, 22, 36, .78), rgba(6, 22, 36, .35) 70%, rgba(6, 22, 36, .2));
  will-change: opacity, transform;
}
.sides__h {
  margin-top: 24px; max-width: 15ch;
  font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 5.8vw, 4.9rem); line-height: 1.02; letter-spacing: -.025em;
  text-wrap: balance; text-shadow: 0 2px 40px rgba(0, 0, 0, .45);
}
.sides__h em { font-style: italic; color: var(--gold-lt); }
.sides__lede { margin-top: 20px; max-width: 48ch; font-size: clamp(1rem, 1.35vw, 1.14rem); color: rgba(255, 255, 255, .88); }
.sides__cta { margin-top: 28px; }
.sides__scroll {
  margin-top: 26px; display: inline-flex; align-items: center; gap: 10px;
  font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.sides__scroll svg { transform: rotate(90deg); animation: nudge 2.2s ease-in-out infinite; }

.sides__cap {
  position: absolute; z-index: 5; left: 50%; bottom: 26px; transform: translate(-50%, 10px);
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px;
  background: rgba(8, 24, 36, .7); border: 1px solid rgba(240, 220, 171, .28); color: #fff;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); white-space: nowrap;
  font-size: .86rem; opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.sides.is-started .sides__cap { opacity: 1; transform: translate(-50%, 0); }
.sides__cap b {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-family: var(--serif); font-weight: 500; font-size: .86rem; color: #2a1c05;
  background: linear-gradient(140deg, var(--gold-lt), var(--gold));
}

/* ---------- The meeting ------------------------------------------------------ */
.meet { position: relative; height: 230vh; }
.meet__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: var(--sky-deep); color: #fff; }
.meet__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 30, 50, .45) 0%, rgba(4, 30, 50, 0) 35%, rgba(4, 30, 50, .2) 62%, rgba(4, 30, 50, .78) 100%);
}
.hands { position: absolute; z-index: 3; left: 50%; top: 40%; width: 0; height: 0; }
.hand { position: absolute; max-width: none; height: auto; will-change: transform; filter: drop-shadow(0 20px 30px rgba(0, 20, 40, .35)); }
.hands__spark {
  position: absolute; left: 0; top: 0; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 250, 230, .95), rgba(255, 232, 170, .45) 32%, rgba(255, 220, 150, 0) 72%);
  mix-blend-mode: screen; opacity: 0; pointer-events: none;
}
.meet__copy {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(40px, 9vh, 90px); padding: 0 var(--pad);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.meet__copy.is-in { opacity: 1; transform: none; }
.meet__copy .h2 { margin-top: 14px; font-size: clamp(2.2rem, 5vw, 3.8rem); text-shadow: 0 2px 30px rgba(0, 0, 0, .4); }
.meet__copy > p:not(.eyebrow) { margin-top: 12px; max-width: 46ch; color: rgba(255, 255, 255, .88); }

/* ---------- Both ways ---------------------------------------------------------- */
.both { background: var(--canvas); padding: clamp(90px, 11vw, 140px) 0; }
.both__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.both__copy .h2 { margin-top: 18px; }
.both__copy > p:not(.eyebrow) { margin-top: 18px; color: var(--ink-2); max-width: 50ch; }
.xdia {
  position: relative; display: grid; grid-template-columns: 1fr minmax(60px, .6fr) 1fr; align-items: stretch;
  padding: clamp(22px, 3vw, 34px); border-radius: 24px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
.xdia__col { display: flex; flex-direction: column; gap: 14px; }
.xdia__h { font-family: var(--serif); font-size: 1.3rem; }
.xdia__col--r .xdia__h { text-align: right; }
.xbox { padding: 14px 16px; border-radius: 14px; background: var(--canvas); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-height: 84px; justify-content: center; }
.xbox small { font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.xbox b { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; line-height: 1.25; }
.xbox--offer { background: #fbf6e8; border-color: rgba(156, 122, 38, .26); }
.xbox--offer small { color: var(--gold-dk); }
.xdia__col--r .xbox { text-align: right; }
.xdia__x { width: 100%; height: calc(100% - 44px); align-self: end; overflow: visible; }
.xdia__x path { fill: none; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.xdia.is-in .xdia__x path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease) .4s; }
.xdia.is-in .xdia__x path:nth-child(2) { transition-delay: .9s; }

/* ---------- Rows, for narrow screens ---------------------------------------- */
.sides.is-rows .sides__stage { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; padding-top: var(--hd-h); }
.sides.is-rows .half__label { top: 12px; }
.sides.is-rows .half--you .pnl { top: 0; left: calc(var(--i) * 100%); width: 100%; }
.sides.is-rows .half--them .pnl { top: 0; left: calc((4 - var(--i)) * 100%); width: 100%; }
.sides.is-rows .pnl { padding: 38px 18px 16px; right: auto; }
.sides.is-rows .half--them .pnl { padding: 16px 18px 38px; }
.sides.is-rows .half--them .half__label { top: auto; bottom: 12px; }
.sides.is-rows .seam { top: calc(var(--hd-h) + (100% - var(--hd-h)) / 2); bottom: auto; left: 0; right: 0; width: auto; height: 0; }
.sides.is-rows .seam__line {
  top: -1px; bottom: auto; left: 0; right: 0; width: auto; height: 2px;
  background: linear-gradient(90deg, rgba(223, 191, 115, 0), rgba(223, 191, 115, .85) 18%, rgba(223, 191, 115, .85) 82%, rgba(223, 191, 115, 0));
}
.sides.is-rows .seam__node { left: 40px; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.sides.is-rows .seam__node img { width: 16px; height: 18px; }
.sides.is-rows .seam__arr--l { left: 18px; top: -16px; transform: rotate(-45deg); }
.sides.is-rows .seam__arr--r { left: 18px; right: auto; top: auto; bottom: -22px; transform: rotate(135deg); }
.sides.is-rows .sides__cap {
  bottom: auto; top: calc(var(--hd-h) + (100% - var(--hd-h)) / 2); left: 74px; transform: translate(0, -50%);
  max-width: calc(100% - 90px); font-size: .74rem; padding: 6px 12px 6px 6px; gap: 8px;
}
.sides.is-rows.is-started .sides__cap { transform: translate(0, -50%); }
.sides.is-rows .sides__cap b { width: 24px; height: 24px; font-size: .74rem; }
.sides.is-rows .card { padding: 16px 18px 18px; border-radius: 18px; }
.sides.is-rows .card__quote { font-size: 1.08rem; margin-top: 12px; }
.sides.is-rows .card__req { font-size: 1.12rem; margin-top: 8px; }
.sides.is-rows .card__chips { margin-top: 10px; }
.sides.is-rows .card__status, .sides.is-rows .card__foot { margin-top: 10px; }
.sides.is-rows .card__foot { padding-top: 8px; font-size: .72rem; }
.sides.is-rows .card__offers { margin-top: 10px; gap: 6px; }
.sides.is-rows .card__offers .mchip { padding: 7px 10px; font-size: .76rem; }
.sides.is-rows .checks { margin-top: 10px; gap: 7px; }
.sides.is-rows .checks li { padding: 8px 10px; font-size: .74rem; gap: 7px; }
.sides.is-rows .card__why li { font-size: .78rem; }
.sides.is-rows .card__btns { margin-top: 10px; }
.sides.is-rows .half--you .half__art img { object-position: 70% 38%; }
.sides.is-rows .half--them .half__art img { object-position: 50% 40%; }

@media (max-width: 860px) {
  .both__grid { grid-template-columns: 1fr; }
  .sides__h { font-size: clamp(2.1rem, 9vw, 3rem); }
}
@media (max-width: 520px) {
  .xdia { grid-template-columns: 1fr 34px 1fr; padding: 16px; }
  .xbox { padding: 10px 11px; min-height: 92px; }
  .xbox b { font-size: .88rem; }
  .xdia__h { font-size: 1.1rem; }
  .sides.is-rows .card__who small { font-size: .72rem; }
  .sides.is-rows .card__quote { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .xdia__x path { stroke-dashoffset: 0; }
}