/* Home (C1): the cove hero and The Cleave and Moor, the facing phones, the handoff spread, the floats,
   the pricing ledger, the statement spread, the checkerboard and the two doors. Tokens and classes from the kit. */

/* ============ 0 + 1. hero ============ */
.hero {
  position: relative;
  height: calc(100vh - var(--header-h));
  min-height: 640px;
  overflow: hidden;
  background: var(--mist);
  isolation: isolate;
}
.hero__world { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__sky { position: absolute; inset: 0; background: linear-gradient(to bottom, #C9D3DE 0%, #E2E7EE 22%, #F4F3F7 36%, #F2D6E7 39.5%, #EEE7F2 41.5%, #B9C0CB 47%, #5A6576 58%, #1A2638 76%, #0A1421 100%); }
.hero__band { position: absolute; inset: 0; display: none; }
.hero__deep { position: absolute; inset: 0; background: var(--deep); opacity: var(--deepT, 0); pointer-events: none; }
.hero__poster-pic { position: absolute; inset: 0; }
.hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity var(--dur-slow) var(--ease-swell); }
.hero__canvas-host { position: absolute; inset: 0; }
.hero__canvas-host canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity var(--dur-slow) var(--ease-swell); }
.hero.is-scene-ready .hero__canvas-host canvas { opacity: 1; }
.hero.is-poster-only .hero__canvas-host { display: none; }
.hero.is-poster-only .hero__poster { opacity: 1; }

/* the loader overture: the fog veil, the meeting line, the float with a single rose flare */
.veil { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.veil__fog {
  position: absolute; inset: -20% -10% -20% -10%; opacity: .92;
  background-color: rgba(237, 240, 243, .55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.929 0 0 0 0 0.941 0 0 0 0 0.953 0 0 0 1.6 -0.25'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 900px 900px;
  animation: veil-drift 24s linear infinite;
  will-change: opacity, transform;
}
@keyframes veil-drift { to { background-position: 900px 120px; } }
/* the two halves are drawn on the hero's own water line, inside the same gutters, so where they meet IS the hero line */
.veil__line { position: absolute; top: var(--veil-y, 50%); height: 1px; width: calc(50% - var(--gutter)); background: var(--raven); opacity: .55; transform: scaleX(0); will-change: transform; }
.veil__line--l { left: var(--gutter); transform-origin: left center; }
.veil__line--r { right: var(--gutter); transform-origin: right center; }
.veil__meet { position: absolute; left: 50%; top: var(--veil-y, 50%); width: 0; height: 0; }
.veil__seam { position: absolute; left: -1px; top: -7px; width: 2px; height: 14px; background: linear-gradient(to bottom, var(--rose), var(--iris)); transform: scaleY(0); transform-origin: center; }
.veil__float { position: absolute; left: -3px; top: -16px; width: 6px; height: 6px; border-radius: 50%; background: var(--iris); transform: scale(0); }
.veil__flare { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--rose); opacity: 0; transform: scale(.4); }
.veil.is-met .veil__seam { transform: scaleY(1); transition: transform var(--dur-fast) var(--ease-slack); }
.veil.is-met .veil__float { transform: scale(1); transition: transform var(--dur-base) var(--ease-slack) .1s; }
.veil.is-met .veil__flare { animation: veil-flare .9s var(--ease-swell) .05s forwards; }
@keyframes veil-flare { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(5); } }
.veil.is-done { display: none; }
.veil__skip {
  position: absolute; right: var(--gutter); bottom: 24px; z-index: 11; border: 0; background: none; padding: 4px 0; cursor: pointer;
  color: var(--raven); font-size: 15px; opacity: 1; transition: opacity var(--dur-base);
}
.veil__skip.is-done { opacity: 0; pointer-events: none; }

/* the stage over the world */
.hero__stage { position: absolute; inset: 0; z-index: 10; padding: 0 var(--gutter) clamp(20px, 3vh, 32px); pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; }
.hero__stage a, .hero__stage button, .hero__stage [tabindex] { pointer-events: auto; }
.hero__type { position: relative; z-index: 2; width: 100%; }
.hero__h1 { color: var(--raven); margin: 0 0 clamp(10px, 1.6vh, 20px); width: 100%; text-align: center; position: relative; }
/* the H1's scrim is a low mist bank on the water: feathered above and below, thicker toward the headlands whose
   reflections lie under the ends of the line, thin over the bright mouth of the cove (AA at every scroll position) */
.hero__h1::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: -34%; bottom: -30%;
  --sc-core: calc(.36 + var(--h1-depth, 0) * 1.4); --sc-mid: calc(.58 + var(--h1-depth, 0) * .9); --sc-end: calc(.72 + var(--h1-depth, 0) * .5);
  background: linear-gradient(to right, rgba(237, 240, 243, var(--sc-end)) 0%, rgba(237, 240, 243, var(--sc-mid)) 24%, rgba(237, 240, 243, var(--sc-core)) 50%, rgba(237, 240, 243, var(--sc-mid)) 76%, rgba(237, 240, 243, var(--sc-end)) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 72%, transparent 100%);
}
.hero__h1[data-fit="one-line"] { text-align: left; }
.hero__h1 .nb { white-space: nowrap; }   /* never break at the hyphen of co-parents */
.hero__line { position: relative; height: 1px; background: var(--raven); opacity: 0; margin: 0 0 clamp(12px, 2vh, 24px); transform: scaleX(0); transform-origin: center; }
.hero__line.is-landed { opacity: .55; transform: none; transition: transform var(--dur-slow) var(--ease-slack), opacity var(--dur-base); }
.hero__line.is-landed.is-inplace { transition: none; }
.hero__line-seam { position: absolute; left: 50%; top: -6px; width: 2px; height: 13px; margin-left: -1px; background: linear-gradient(to bottom, var(--rose), var(--iris)); opacity: 0; transition: opacity var(--dur-fast) .4s; }
.hero__line.is-landed .hero__line-seam { opacity: 1; }
.hero__shores { align-items: stretch; }
.hero__plate {
  position: relative; padding: clamp(16px, 2vw, 30px) clamp(16px, 2.2vw, 34px);
  /* two moored panels of frosted mist over the deep water: lighter where the dawn catches the top edge */
  background: linear-gradient(to bottom, rgba(246, 248, 250, .84), rgba(237, 240, 243, .74) 62%, rgba(228, 233, 239, .76));
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(60, 69, 80, .3), 0 28px 60px -34px rgba(14, 24, 38, .7);
}
.hero__plate::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--raven); opacity: .55; }
/* while the arc scrubs, the live blur is swapped for a denser mist (QA loop 2026-09-28: the backdrop blur over the moving
   scene cost about 5 fps of the signature scroll); at rest, the designed first viewport keeps the frosted plates */
.hero.is-scrubbing .hero__plate { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(to bottom, rgba(246, 248, 250, .93), rgba(237, 240, 243, .88) 62%, rgba(228, 233, 239, .9)); }
.hero__sub { margin: 0 0 clamp(14px, 2vh, 24px); max-width: none; }
.hero__cta { margin: 0 0 14px; }
.hero__price { margin: 0; font-size: .9375rem; }
.hero__label { margin: 0 0 6px; }
.hero__readout { font-size: clamp(2.125rem, 4.35vw, 96px); white-space: nowrap; margin: 0 0 8px; display: inline-block; }
.hero__asof { margin: 0 0 10px; font-size: .9375rem; }
.hero__note { margin: 0 0 12px; max-width: none; }
.hero__see { margin: 0; }
.hero.is-cleaving .hero__type { pointer-events: none; }

/* the designed mobile hero: the split card (under 900px only) */
.split { display: none; }

/* The Cleave: the set piece, two lines hinged at the seam, opening on the width axis to the margins */
.cleave { position: absolute; left: var(--gutter); right: var(--gutter); top: 27%; transform: translateY(-50%); opacity: 0; visibility: hidden; z-index: 3; pointer-events: none; }
.cleave.is-live { opacity: 1; visibility: visible; }
/* the same low mist bank as the H1, so the set piece keeps its contrast over the rim-lit headlands */
.cleave::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: -32%; bottom: -26%;
  background: linear-gradient(to right, rgba(237, 240, 243, .74) 0%, rgba(237, 240, 243, .6) 26%, rgba(237, 240, 243, .44) 50%, rgba(237, 240, 243, .6) 74%, rgba(237, 240, 243, .74) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 76%, transparent 100%);
}
.cleave__line { position: relative; margin: 0; height: 1.08em; font-family: var(--font-head); font-weight: 600; font-size: clamp(2.5rem, 5.6vw, 11rem); line-height: 1.02; letter-spacing: -.012em; --wdth: 75; font-variation-settings: "wdth" var(--wdth), "opsz" 96; color: var(--raven); }
.cleave__half { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.cleave__seam { position: absolute; left: 50%; top: .12em; width: 2px; height: .84em; margin-left: -1px; background: linear-gradient(to bottom, var(--rose), var(--iris)); box-shadow: 0 0 12px rgba(255, 111, 177, .55), 0 0 28px rgba(181, 107, 255, .45); transform: scaleY(0); transform-origin: center; }
.cleave__shares { display: flex; justify-content: space-between; margin-top: clamp(16px, 2.6vh, 32px); }
.cleave__share { opacity: 0; transform: translateY(10px); }
.cleave__share.is-shown { opacity: 1; transform: none; transition: opacity var(--dur-base) var(--ease-slack), transform var(--dur-base) var(--ease-slack); }
.cleave__line .cleave__half::selection { background: transparent; }

/* the DOM water line band the world hands off into */
.waterline { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(40px, 12vh, 120px); z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; color: var(--raven); transition: color var(--dur-base); }
.hero.is-deep .waterline { color: var(--mist); }
.hero.is-deep .waterline__rule, .hero.is-deep .waterline .tide::after { background: var(--water); }
.hero.is-deep .waterline .tide::before { background: var(--glow); }
.waterline.is-live { opacity: 1; visibility: visible; }
.waterline__shores { align-items: end; }
.waterline__fig { margin: 0; font-size: clamp(2rem, 4.2vw, 96px); white-space: nowrap; opacity: 0; }
.waterline__shore--b { text-align: right; }
.waterline.is-landed .waterline__fig { opacity: 1; transition: opacity var(--dur-base); }
.waterline__balance { position: relative; margin: clamp(14px, 2vh, 24px) 0 0; text-align: center; padding-top: 14px; }
.waterline__rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--raven); opacity: .55; }
.waterline__rule::after { content: ''; position: absolute; left: 50%; top: -6px; width: 2px; height: 13px; margin-left: -1px; background: linear-gradient(to bottom, var(--rose), var(--iris)); }
.waterline__rest { font-size: clamp(1rem, 1.3vw, 1.375rem); }
.waterline__ghost {
  position: fixed; z-index: 30; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: var(--paper); box-shadow: inset 0 0 0 1px rgba(18, 21, 25, .35); border-radius: 3px; color: var(--raven);
  font-size: clamp(1.5rem, 3vw, 4rem); opacity: 0; visibility: hidden; will-change: transform;
}
.waterline__ghost.is-live { opacity: 1; visibility: visible; }

/* the ripple divider after the hero */
.home-ripple { color: var(--raven); margin-top: -1px; background: var(--mist); position: relative; z-index: 1; }   /* its tide edge rises into the hero's deep water */

/* ============ 2. facing phones ============ */
.phones { padding-bottom: clamp(24px, 4vw, 72px); }
.phones__stage { position: relative; }
.phones__shores { align-items: start; }
.phones__shore { display: grid; column-gap: clamp(16px, 2vw, 32px); align-items: center; }
.phones__shore--sam { grid-template-columns: 1fr 44%; }
.phones__shore--sam .phone { grid-column: 2; grid-row: 1; }
.phones__shore--sam .phones__caption { grid-column: 1; grid-row: 1; }
.phones__shore--jordan { grid-template-columns: 44% 1fr; }
.phones__shore--jordan .phone { grid-column: 1; grid-row: 1; }
.phones__shore--jordan .phones__caption { grid-column: 2; grid-row: 1; }
.phone { position: relative; container-type: inline-size; }
/* the phones face each other across the water line, as large as the pinned frame allows */
@media (min-width: 900px) {
  .phones__shores .phone { width: min(100%, calc((100vh - 336px) * .462)); }
  .phones__shore--sam .phone { justify-self: end; }
  .phones__shore--jordan .phone { justify-self: start; }
}
.phone .phone-shot { border-radius: 4.5cqw; box-shadow: 0 1px 0 rgba(18, 21, 25, .35), 0 24px 48px -28px rgba(14, 24, 38, .55); }
.phone__overlay { position: absolute; display: flex; align-items: center; background: #EDF0F3; color: var(--raven); opacity: 0; transition: opacity var(--dur-fast); font-family: var(--font-text); }
.phone__overlay.is-on { opacity: 1; }
.phone__overlay--balance { top: 20.1%; left: 4%; width: 44%; height: 5.4%; font-size: 9.4cqw; font-weight: 500; letter-spacing: -.01em; }
.phone__overlay--row { top: 67.9%; right: 4%; width: 34%; height: 3.4%; justify-content: flex-end; font-size: 3.6cqw; }
.phone__overlay--row .lantern-dot { display: none; }
.phone__overlay--dot { top: 67.4%; left: 15%; width: 6%; height: 2.4%; }
.phone__overlay--confirmed { top: 62.6%; left: 3.8%; width: 92.4%; height: 6.4%; justify-content: center; gap: 1.5cqw; font-size: 3.7cqw; font-weight: 500; border-radius: 3cqw; box-shadow: inset 0 0 0 1px var(--raven); }
.phone__overlay--confirmed .rc-ico { width: 4.6cqw; height: 4.6cqw; color: var(--iris); }
.phones__caption { min-width: 0; }
.phones__who { margin: 0 0 8px; font-size: clamp(.875rem, .95vw, 1.0625rem); }
.phones__beat { margin: 0 0 18px; font-size: clamp(1.0625rem, 1.25vw, 1.4375rem); line-height: 1.5; transition: opacity var(--dur-base) var(--ease-slack); }
.phones__beat.is-dim { opacity: .62; }   /* dimmed, never below AA: raven at 62 percent on mist is 4.8:1 */
.phones__line { margin: 0; font-size: clamp(1.375rem, 1.8vw, 2.25rem); white-space: nowrap; }
.phones__glyph { position: absolute; left: 0; top: 0; z-index: 4; width: 68px; height: 68px; margin: -34px 0 0 -34px; display: grid; place-content: center; background: var(--paper); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--raven), 0 0 0 6px rgba(255, 111, 177, .16), 0 0 34px rgba(255, 111, 177, .45); opacity: 0; will-change: transform; color: var(--raven); transition: opacity var(--dur-fast); }
.phones__glyph .rc-ico { width: 30px; height: 30px; }
/* the crossing: the entry's path between the two phones, drawn as it travels (rose to iris going, iris to rose coming back) */
.phones__trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.phones__trail path { fill: none; stroke-linecap: round; }
.phones__trail .trail__glow { stroke-width: 14; opacity: .32; filter: blur(7px); }
.phones__trail .trail__line { stroke-width: 3; }
.phones__glyph.is-on { opacity: 1; }
.phones__glyph--back { box-shadow: inset 0 0 0 1px var(--raven), 0 0 0 6px rgba(181, 107, 255, .18), 0 0 34px rgba(181, 107, 255, .5); }
.phones__glyph--back .rc-ico { color: var(--iris); }
.phones__beat3 { margin-top: clamp(16px, 2vw, 32px); padding-top: 14px; position: relative; }
.phones__beat3::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--raven); opacity: .55; }
.phones__beat3 .phones__beat { column-width: 34ch; column-gap: 3rem; }
.phones.is-static .phones__beat { opacity: 1; }
@media (max-width: 899.98px) {
  .phones__shore--sam, .phones__shore--jordan { grid-template-columns: 1fr; row-gap: 16px; }
  .phones__shore--sam .phone, .phones__shore--jordan .phone, .phones__shore--sam .phones__caption, .phones__shore--jordan .phones__caption { grid-column: 1; grid-row: auto; }
  .phones__shore--jordan { order: -1; }
  .phone { width: 72%; margin: 0 auto; }
  .phones__glyph, .phones__trail { display: none; }
  .phones__beat3 .phones__beat { column-width: auto; }
}

/* ============ 3. the handoff spread ============ */
.handoff .band__head { padding-inline-start: var(--gutter); }   /* the bleed-left shores drop the band's left padding; the heading keeps its gutter */
.handoff__media { min-height: min(78vh, 760px); }
.handoff__media .loop { position: absolute; }
.handoff__copy { padding-bottom: 8px; }
.handoff__shot { margin: 0 0 clamp(20px, 2.4vw, 36px); padding: clamp(10px, 1vw, 16px); }
.handoff__shot img { width: 100%; height: auto; }
.handoff__prose p { color: var(--mist); }
@media (max-width: 899.98px) { .handoff__media { min-height: 56vw; } }

/* ============ 4. the floats ============ */
.floats { overflow: hidden; }
.floats__head { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 64px); align-items: end; }
.floats__teaser { margin: 0; }
.floats__water { position: relative; height: clamp(420px, 56vh, 620px); touch-action: pan-y; }
.floats__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.floats__shore-label { position: absolute; top: 18px; margin: 0; z-index: 2; pointer-events: none; }
.floats__shore-label--a { left: var(--gutter); }
.floats__shore-label--b { right: var(--gutter); }
.floats__water::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--raven); opacity: .55; z-index: 1; }
.floats__list { position: absolute; inset: 0; z-index: 3; }
.float {
  position: absolute; left: 0; top: 0; display: grid; gap: 2px; padding: 10px 14px 10px 16px; width: max-content; max-width: 260px;
  background: var(--paper); color: var(--raven); border-radius: 999px 0 0 999px; box-shadow: inset 0 0 0 1px rgba(18, 21, 25, .35), 0 10px 24px -18px rgba(14, 24, 38, .6);
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; will-change: transform;
  transition: box-shadow var(--dur-fast);
}
.float:active { cursor: grabbing; }
.float:hover { box-shadow: inset 0 0 0 1px var(--raven), 0 14px 28px -18px rgba(14, 24, 38, .7); }
.float:focus-visible { outline: 2px solid var(--iris-tint); outline-offset: 3px; box-shadow: 0 0 0 6px var(--iris); }
.float__name { font-family: var(--font-head); font-weight: 500; font-size: 15px; line-height: 1.15; }
.float__meta { font-size: 13px; color: var(--slate); }
.float.is-dragging { z-index: 5; box-shadow: inset 0 0 0 1px var(--raven), 0 24px 40px -20px rgba(14, 24, 38, .8); }
.float.is-landed { cursor: pointer; }
.float.is-landed--a { background: var(--mist); box-shadow: inset 0 0 0 1px var(--iris); }
.float.is-landed--b { background: var(--paper); opacity: .92; }
.float__tap { display: none; gap: 6px; margin-top: 6px; }
.float__tap button { border: 1px solid var(--raven); background: var(--mist); border-radius: 999px 0 0 999px; padding: 4px 10px; font-size: 12px; font-family: var(--font-head); }
@media (pointer: coarse) { .float__tap { display: flex; } .float { max-width: 220px; } }
.floats__result { position: absolute; bottom: 18px; margin: 0; z-index: 2; font-size: .9375rem; max-width: 42%; pointer-events: none; }
.floats__result--a { left: var(--gutter); }
.floats__result--b { right: var(--gutter); text-align: right; }
.floats__result:empty { display: none; }
.floats__result .fig { font-weight: 500; }
.floats__foot { margin-top: clamp(20px, 3vw, 40px); align-items: center; }
.floats__tally { margin: 0; display: grid; gap: 4px; }
.floats__tally-empty { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.125rem, 1.4vw, 1.5rem); }
.floats__tally-live { display: grid; gap: 4px; }
.floats__cta { display: flex; justify-content: flex-end; }
@media (max-width: 899.98px) {
  .floats__head { grid-template-columns: 1fr; row-gap: 12px; }
  .floats__water { height: 560px; }
  .float { max-width: calc(50vw - 22px); padding: 8px 12px 8px 14px; }
  .float__name { font-size: 14px; }
  .float__meta { font-size: 12px; }
  /* the two shore labels stay on their own sides of the water line */
  .floats__shore-label { max-width: calc(50% - var(--gutter) - 12px); }
  .floats__cta { justify-content: flex-start; }
  .floats__result { max-width: 46%; font-size: .8125rem; }
}

/* ============ 5. the pricing ledger ============ */
/* the heading is one statement across the whole width: home.js fits it to two balanced lines edge to edge */
.plans__head { margin-bottom: clamp(18px, 2.2vw, 32px); }
.plans__h2 { max-width: none; width: 100%; }
.ledger { position: relative; }
/* the toggle is the float sliding on the water line */
.ledger__toggle-row { display: flex; justify-content: center; margin-bottom: 0; padding-bottom: clamp(22px, 2.4vw, 40px); position: relative; }
.ledger__toggle-row::before { content: ''; position: absolute; left: 0; right: 0; top: calc(100% - clamp(22px, 2.4vw, 40px)); height: 1px; background: var(--mist); opacity: .3; }
.plans .period-toggle { font-size: clamp(1.0625rem, 1.2vw, 1.375rem); }
.plans .period-toggle button { color: var(--muted-deep); padding: 10px clamp(22px, 2.4vw, 40px) 14px; transition: color var(--dur-fast) var(--ease-slack), transform var(--dur-base) var(--ease-slack); }
.plans .period-toggle button[aria-pressed="true"] { color: var(--mist); }
.plans .period-toggle button:hover { color: #fff; }
.plans .period-toggle__float { bottom: -5px; transition: left .7s var(--ease-slack); }
.plans .period-toggle__float::before { width: 10px; height: 10px; left: -2px; top: -2px; background: var(--iris); box-shadow: 0 0 0 4px rgba(181, 107, 255, .22), 0 0 18px rgba(181, 107, 255, .55); }
.plans .period-toggle__float::after { background: var(--glow); }

/* the pool: a deeper panel under its own tide edge, where the two prices are the set piece */
.ledger__pool { position: relative; background: var(--deep-2); margin-inline: calc(-1 * var(--gutter)); padding: clamp(30px, 3.2vw, 60px) var(--gutter) clamp(34px, 3.6vw, 64px); }
.ledger__pool > .tide-edge { background: var(--deep-2); }
.ledger__tops { align-items: stretch; }
.ledger__top { position: relative; padding: 0; isolation: isolate; }
/* a lantern's light on the water behind each price, breathing on the six second cycle (light only) */
.ledger__top::before {
  content: ''; position: absolute; z-index: -1; left: -6%; top: 18%; width: 62%; height: 110%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(181, 107, 255, .2), rgba(90, 63, 216, .07) 55%, transparent);
  animation: rc-lantern-breathe 6s var(--ease-swell) infinite;
}
.ledger__top[data-plan="harbor"]::before { animation-delay: -2.2s; }
@keyframes rc-lantern-breathe { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.ledger__name { margin: 0 0 6px; font-size: clamp(1.75rem, 2.6vw, 3.25rem); }
.ledger__who { margin: 0 0 clamp(18px, 2vw, 32px); font-size: clamp(1rem, 1.1vw, 1.1875rem); }
.ledger__deal { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.ledger__price { margin: 0; display: flex; align-items: baseline; gap: 14px; }
/* the figure sits in a clip on its tide mark: on a period change the old price sinks under it and the new one surfaces */
.ledger__fig { display: inline-block; overflow: hidden; padding-top: 6px; margin-top: -6px; vertical-align: baseline; }
.ledger__price .fig { display: inline-block; font-size: var(--fig-lg); line-height: 1; letter-spacing: -.02em; will-change: transform; }
.ledger__period { font-size: clamp(1.0625rem, 1.2vw, 1.3125rem); color: var(--muted-deep); }
.ledger__charge { margin: 0; font-size: .9375rem; }
.ledger__buy { margin: 0 0 6px; }
.btn--lg { height: 56px; padding: 0 36px 0 38px; font-size: 17px; }
.ledger__top:hover .tide::before { height: 11px; }
.ledger__top:hover .btn { box-shadow: 0 0 0 5px rgba(181, 107, 255, .16); }

.ledger__rows { --row-rule: var(--rule-deep); margin-top: clamp(22px, 2.4vw, 40px); }
.ledger__row { display: grid; grid-template-columns: 1fr minmax(170px, 16%) 1fr; column-gap: clamp(16px, 2vw, 40px); align-items: start; min-height: 32px; padding: 13px 0; position: relative; transition: background-color var(--dur-fast); }
.ledger__row::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--mist); opacity: .38; transform: translateX(-.5px); }
.ledger__row:hover { background: rgba(237, 240, 243, .035); }
/* each row label sits on a small capsule in the band's own colour that masks the ledger's centre line */
.ledger__label { position: relative; z-index: 1; justify-self: center; text-align: center; padding: 3px 14px; border-radius: 999px; background: var(--deep); font-family: var(--font-head); font-weight: 500; font-size: .9375rem; color: var(--mist); transition: box-shadow var(--dur-base) var(--ease-slack); }
.ledger__row:hover .ledger__label { box-shadow: 0 0 0 1px rgba(181, 107, 255, .6), 0 0 14px rgba(181, 107, 255, .3); }
.ledger__val { font-size: .9375rem; line-height: 1.45; color: var(--mist); }
.ledger__val--a { text-align: left; }
.ledger__val--b { text-align: left; }
.ledger__terms { margin: clamp(20px, 2.4vw, 36px) 0 0; font-size: .9375rem; color: var(--muted-deep); max-width: none; }
@media (min-width: 1900px) { .ledger__val, .ledger__label { font-size: 1.0625rem; } .ledger__terms { font-size: 1.0625rem; } }
@media (max-width: 899.98px) {
  .ledger__pool { padding-block: 28px 32px; }
  .ledger__tops { row-gap: 40px; }
  .ledger__deal { align-items: flex-start; flex-direction: column; }
  .ledger__buy, .ledger__buy .btn { width: 100%; }
  .ledger__row { grid-template-columns: 1fr; row-gap: 6px; padding: 12px 0; }
  .ledger__row::before { display: none; }
  .ledger__label { justify-self: start; padding: 0; order: -1; }   /* on phones the label leads its row */
  .ledger__val::before { content: attr(data-plan) ': '; font-family: var(--font-head); font-weight: 500; color: var(--muted-deep); }
}
@media (prefers-reduced-motion: reduce) { .ledger__top::before { animation: none; } }
html.rc-reduced .ledger__top::before { animation: none; }

/* ============ 6. the statement spread ============ */
.statement__shores { align-items: start; }
.statement__sticky { position: sticky; top: calc(var(--header-h) + 24px); }
.statement__sheet { margin: 0; position: relative; perspective: 1600px; }
.unfold__panels { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; pointer-events: none; }
.unfold__panel { position: absolute; top: 0; bottom: 0; width: 33.4%; background-image: url(/assets/prod-statement-1440.webp); background-size: 300% 100%; background-repeat: no-repeat; backface-visibility: hidden; transform-style: preserve-3d; box-shadow: 0 0 0 1px rgba(18, 21, 25, .25); }
.unfold__panel--1 { left: 0; background-position: 0% 0; }
.unfold__panel--2 { left: 33.3%; background-position: 50% 0; transform-origin: left center; transform: rotateY(-152deg); transition: transform .6s var(--ease-swell); }
.unfold__panel--3 { left: 66.6%; background-position: 100% 0; transform-origin: left center; transform: rotateY(-152deg); transition: transform .6s var(--ease-swell) .15s; }
.unfold__panel::after { content: ''; position: absolute; inset: 0; background: var(--paper); transform: rotateY(180deg); backface-visibility: hidden; }
.statement__img { aspect-ratio: 2880 / 1800; width: 100%; height: auto; opacity: 0; transition: opacity .2s linear .72s; box-shadow: 0 0 0 1px rgba(18, 21, 25, .25); }
.unfold.is-in .unfold__panel--2, .unfold.is-in .unfold__panel--3 { transform: rotateY(0deg); }
.unfold.is-in .statement__img { opacity: 1; }
.unfold.is-open .unfold__panels { display: none; }
.no-js .statement__img { opacity: 1; } .no-js .unfold__panels { display: none; }
.statement__caption { margin-top: 14px; font-size: .9375rem; color: var(--slate); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(16px, 2vw, 32px); }
.tile { position: relative; padding: 16px 0 18px; border-top: 1px solid var(--rule); }
.tile .rc-ico { color: var(--raven); margin-bottom: 8px; }
.tile__title { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.125rem, 1.4vw, 1.5rem); margin: 0 0 4px; line-height: 1.15; }
.tile__desc { margin: 0; font-size: .9375rem; color: var(--slate); }
.statement__pro { margin-top: clamp(28px, 3vw, 48px); padding-top: 20px; border-top: 1px solid var(--rule); }
.statement__level { width: 240px; height: 40px; margin-bottom: 14px; }
.statement__pro-text { column-width: 34ch; column-gap: 3rem; margin: 0; }
@media (max-width: 899.98px) { .statement__sticky { position: static; } .tiles { grid-template-columns: 1fr; } }

/* ============ 7. the checkerboard ============ */
.checker { background: var(--deep); padding-inline: 0; }
.checker__head { padding: clamp(48px, 6vw, 112px) var(--gutter) clamp(24px, 3vw, 48px); background: var(--mist); }
.checker__grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(min(62vh, 640px), auto); background: var(--deep); }
.checker__cell { position: relative; min-width: 0; }
.checker__cell--photo { overflow: hidden; }
.checker__cell--copy { background: var(--deep); color: var(--mist); display: flex; align-items: center; padding: clamp(32px, 4vw, 72px) clamp(24px, 3.4vw, 64px); }
.checker__copy { width: 100%; }
.checker__copy p { margin: 0; column-width: 26ch; column-gap: 3rem; column-fill: balance; font-size: clamp(1.125rem, 1.45vw, 1.5rem); line-height: 1.45; }
.checker__cell--copy + .checker__cell--copy { box-shadow: inset 1px 0 0 rgba(237, 240, 243, .28); }
@media (max-width: 899.98px) {
  .checker__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .checker__cell--photo { min-height: 64vw; }
  .checker__copy p { column-width: auto; }
}

/* ============ 8. the two doors ============ */
.doors { background: var(--deep); padding-inline: 0; }
.doors__head { padding: clamp(48px, 6vw, 112px) var(--gutter) clamp(24px, 3vw, 48px); background: var(--mist); position: relative; }
.doors__gate { display: grid; grid-template-columns: 1fr 1fr; height: calc(100vh - var(--header-h)); min-height: 560px; background: var(--deep); position: relative; }
.doors__half { position: relative; overflow: hidden; }
.doors__half picture, .doors__half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.doors__quote { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 3; background: rgba(237, 240, 243, .94); padding: clamp(24px, 3vw, 48px) var(--gutter); text-align: center; color: var(--raven); }
.doors__quote::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--raven); opacity: .55; }
.doors__quote::after { content: ''; position: absolute; left: 50%; top: -6px; width: 2px; height: 13px; margin-left: -1px; background: linear-gradient(to bottom, var(--rose), var(--iris)); }
.doors__sentence { margin: 0 auto 14px; max-width: none; }
.doors__link { margin: 0; }
@media (max-width: 899.98px) {
  .doors__gate { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .doors__half { height: 70vw; }
  .doors__quote { position: relative; top: auto; transform: none; }
}

/* ============ mobile hero: the split card on the water band ============ */
@media (max-width: 899.98px) {
  .hero { height: auto; min-height: calc(100vh - var(--header-h)); }
  .hero__poster-pic, .hero__canvas-host, .veil, .veil__skip, .cleave, .waterline { display: none !important; }
  .hero__band { display: block; }
  /* the two lanterns stand on the horizon at the shores (home.js sets --m-hz), electric cores in wide halos */
  .hero__world::before, .hero__world::after { content: ''; position: absolute; top: calc(var(--m-hz, 46%) - 62px); width: 116px; height: 116px; border-radius: 50%; background: radial-gradient(closest-side, #F7F2FF 0 5%, rgba(164, 109, 255, .9) 9%, rgba(154, 98, 255, .42) 28%, rgba(110, 79, 234, .16) 52%, transparent 72%); z-index: 1; pointer-events: none; animation: lantern-breathe 6s var(--ease-swell) infinite; }
  .hero__world::before { left: -52px; }
  .hero__world::after { right: -52px; animation-delay: -3s; }
  .hero__stage { position: relative; inset: auto; display: flex; flex-direction: column; padding: 24px var(--gutter) 32px; gap: 16px; pointer-events: auto; }
  .hero__type, .hero__shores { display: contents; }
  .hero__type::before { display: none; }
  .hero__h1 { order: 1; font-size: 12vw; text-align: left; white-space: normal; margin: 0; }
  .hero__line { order: 2; margin: 0; opacity: .55; transform: none; }
  .hero__line-seam { opacity: 1; }
  .hero__plate--left { order: 3; }
  .split { order: 4; display: block; }
  .hero__plate--right { order: 5; }
  .hero__cta .btn { width: 100%; display: flex; }
  .hero__readout { font-size: clamp(1.75rem, 8.6vw, 2.5rem); white-space: normal; }

  .split { position: relative; padding: 22px 0 8px; }
  .split__card { position: relative; height: 120px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .split__half { position: relative; height: 96px; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(18, 21, 25, .4); border-radius: 3px; padding: 12px 12px; min-width: 0; display: grid; align-content: center; gap: 2px; will-change: transform; animation: split-bob 2.9s ease-in-out infinite; }
  .split__half--a { margin-right: -1px; border-radius: 3px 0 0 3px; }
  .split__half--b { margin-left: -1px; border-radius: 0 3px 3px 0; animation-delay: -.2s; }
  .split__entry { font-family: var(--font-head); font-weight: 500; font-size: 15px; }
  .split__meta { font-size: 13px; color: var(--slate); }
  .split__share { font-size: clamp(17px, 5.4vw, 22px); white-space: nowrap; opacity: 0; height: 0; overflow: hidden; transition: opacity var(--dur-base) var(--ease-slack), height var(--dur-base) var(--ease-slack); }
  .split__seam { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 44px; margin-left: -22px; background: none; border: 0; padding: 0; z-index: 2; cursor: grab; touch-action: pan-y; }
  .split__seam::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(to bottom, var(--rose), var(--iris)); box-shadow: 0 0 10px rgba(255, 111, 177, .5); animation: seam-pulse 6s var(--ease-swell) infinite; }
  .split__caption { margin: 12px 0 0; text-align: center; font-family: var(--font-head); font-weight: 500; color: var(--mist); opacity: 0; transition: opacity var(--dur-base) var(--ease-slack); }
  .split[data-state="split"] .split__caption { opacity: 1; }
  .split[data-state="split"] .split__half { animation: none; }
  .split[data-state="split"] .split__half--a { transform: translateX(calc(-1 * var(--split-travel, 20px))); }
  .split[data-state="split"] .split__half--b { transform: translateX(var(--split-travel, 20px)); }
  .split[data-state="split"] .split__share { opacity: 1; height: 1.2em; }
  .split[data-state="split"] .split__seam::before { animation: none; opacity: .5; }
  .split[data-state="split"] .split__half--a .split__meta, .split[data-state="split"] .split__half--b .split__meta { display: none; }
  @keyframes split-bob { 50% { transform: translateY(-3px); } }
  @keyframes seam-pulse { 0%, 80% { opacity: .55; box-shadow: 0 0 6px rgba(255, 111, 177, .25); } 90% { opacity: 1; box-shadow: 0 0 14px rgba(255, 111, 177, .75), 0 0 24px rgba(181, 107, 255, .6); } 100% { opacity: .55; } }
  @keyframes lantern-breathe { 50% { opacity: .55; transform: scale(1.12); } }
}
@media (prefers-reduced-motion: reduce) {
  .split__half, .split__seam::before, .hero__world::before, .hero__world::after, .veil__fog { animation: none !important; }
  .unfold__panel--2, .unfold__panel--3 { transform: none !important; transition: none !important; }
  .statement__img { opacity: 1 !important; transition: none !important; }
  .cleave__share, .waterline__fig { opacity: 1 !important; transform: none !important; }
}
html.rc-reduced .split__half, html.rc-reduced .split__seam::before, html.rc-reduced .veil__fog { animation: none !important; }
html.rc-reduced .unfold__panel--2, html.rc-reduced .unfold__panel--3 { transform: none !important; transition: none !important; }
html.rc-reduced .statement__img { opacity: 1 !important; transition: none !important; }