/* home-sections.css: the Why RXI header and card row, the Features
   card grid, the Videos carousel and the feature-video lightbox, as ported
   from the static clone on 30 Sep 2026. Loaded after founding.css on the
   front page only. */
/* ==================== WHY RXI POLISH (29 Sep 2026) ====================
   tokens mirrored as scoped vars; spacing rhythm, type metrics, hairlines.
   Reveal and hover live in GSAP (initProblemPair); only the shadow eases here */
#problem{--line:#E1E9EA;--teal:#00B2A9;--teal-l:#DBF5F4;--teal-d:#00716C}
#problem>.text-center{margin-bottom:clamp(40px,4.5vw,64px)}
#problem h2{line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
@media(min-width:640px){#problem h2 br{display:inline}} /* `sm:block` is purged from the build; restores the two-line break */
#problem .pcard h3{letter-spacing:-.02em}
#problem .pcard p{max-width:56ch}
#problem .pcard-media{border-color:var(--line)}
#problem .pcard{transition:box-shadow .5s cubic-bezier(.23,1,.32,1)}
.nx-ghost:hover{background:rgba(36,58,114,.2)}
.nx-grid3{display:grid;gap:2rem;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:1024px){.nx-grid3{grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:2.5rem}}
.nx-pcard{height:100%}
.nx-pico{display:inline-flex;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;background:var(--teal-l);border:1px solid rgba(0,178,169,.22);color:#00827B;margin-bottom:20px}
.nx-pico svg{width:22px;height:22px;stroke-width:1.75}
/* ==================== MEET REXI STAGE (29 Sep 2026) ====================
   Badges on the visuals carry the step micro-animations; their CSS is the
   finished state, so with motion off, on phones, or without GSAP they simply
   read as labels. */
.hw-frame{position:relative}
.hw-badge{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(9,15,29,.74);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em;line-height:1.2}
.hw-wave{display:inline-flex;align-items:flex-end;gap:3px;height:16px}
.hw-wave i{display:block;width:3px;height:16px;border-radius:2px;background:#7DF0E9;transform-origin:50% 100%;transform:scaleY(.35)}
.hw-draft{flex-direction:column;align-items:flex-start;gap:6px}
.hw-dl{display:block;height:3px;width:120px;border-radius:2px;background:rgba(255,255,255,.55);transform-origin:0 50%}
.hw-dl:nth-of-type(2){width:92px}.hw-dl:nth-of-type(3){width:108px}.hw-dl:nth-of-type(4){width:70px}
.hw-badge svg{width:18px;height:18px;color:#7DF0E9}
/* ==================== FEATURES, CARD GRID (30 Sep 2026) ====================
   A pill tab bar over brick rows of cards: centred flex rows of 3 / 4 /
   the rest, 260px each (a quarter of the row under 1150px, two columns
   under 1024px, one under 560px). One indicator
   slides under the active tab (GSAP moves it on x/y/width/height; without
   GSAP the active tab colours itself). Each card: white on the padding box
   over a lavender-to-violet gradient on the border box (a 1.5px transparent
   border shows it as the hairline), a 44px badge on the teal surface tint
   with its line icon in navy, a dark title, one slate line, all centred;
   the hover layer is white under the brighter hairline. GSAP draws the icon's strokes (dash offset to 0) on entrance
   and on hover; hover also lifts the card 4px and fades in a brighter
   hairline (no shadow behind the card), and a teal spotlight follows the
   pointer inside the card (below); the badge scales and tilts on hover (a
   CSS transform). Two soft radial glows sit behind the section. */
#features{--line:rgba(255,255,255,.08)}
.fx-ambient{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(58% 46% at 14% 34%,rgba(0,178,169,.12),transparent 66%),radial-gradient(46% 42% at 88% 74%,rgba(124,107,240,.1),transparent 66%),radial-gradient(60% 40% at 50% 100%,rgba(0,178,169,.05),transparent 70%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 82%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 82%,transparent)}
.fx-tabs-wrap{display:flex;justify-content:center;margin-bottom:48px}
.fx-tabs{position:relative;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:100%;padding:6px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.03);transform:translate3d(0,0,0);backface-visibility:hidden}
.fx-tab-ind{display:none;position:absolute;left:0;top:0;width:0;height:0;border-radius:9px;background:#00827B;box-shadow:0 8px 20px -10px rgba(0,178,169,.7);pointer-events:none}
.fx-tabs.is-ind .fx-tab-ind{display:block}
.fx-tab{position:relative;z-index:1;padding:9px 16px;border:0;border-radius:9px;background:none;cursor:pointer;font:inherit;font-size:14px;font-weight:700;line-height:1.3;letter-spacing:-.005em;color:rgba(255,255,255,.66);transition:color .2s ease;-webkit-tap-highlight-color:transparent}
.fx-tab:hover,.fx-tab.is-on{color:#fff}
.fx-tabs:not(.is-ind) .fx-tab.is-on{background:#00827B}
.fx-tab:focus-visible{outline:2px solid #7DF0E9;outline-offset:2px}
@media(max-width:559px){.fx-tabs{gap:4px;padding:5px}.fx-tab{padding:8px 12px;font-size:13.5px}}
.fx-stage{position:relative;display:grid}
.fx-panel{grid-area:1/1;width:100%;text-align:center;transform:translate3d(0,0,0);backface-visibility:hidden}
.fx-row{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.fx-row+.fx-row{margin-top:18px}
.fx-panel[hidden]{display:none}
@media(max-width:1149px){.fx-row>.fx-card{width:calc(25% - 13.5px)}}
@media(max-width:1023px){.fx-row>.fx-card{width:calc(50% - 9px)}}
@media(max-width:559px){.fx-row>.fx-card{width:100%}.fx-row{gap:12px}.fx-row+.fx-row{margin-top:12px}}
.fx-card{position:relative;flex:0 0 auto;width:260px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 18px;border:1.5px solid transparent;border-radius:20px;background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,linear-gradient(135deg,rgba(165,155,225,.75) 0%,rgba(125,115,190,.45) 100%) border-box;box-shadow:0 14px 34px -18px rgba(9,15,29,.6);transform:translate3d(0,0,0);backface-visibility:hidden}
.fx-shadow{position:absolute;inset:-1.5px;border-radius:inherit;border:1.5px solid transparent;background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,linear-gradient(135deg,rgba(195,185,255,1) 0%,rgba(145,135,220,.8) 50%,rgba(105,95,175,.5) 100%) border-box;opacity:0;pointer-events:none}
/* Spotlight: one radial gradient centred on the pointer, clipped by the
   card's radius. --mouse-x/-y are written once per frame, for the hovered
   card only; the only transition is the opacity. */
.fx-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(350px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(24,195,195,.16),transparent 70%)}
.fx-card.is-glow::before{opacity:1}
.fx-ico{position:relative;flex:none;width:44px;height:44px;margin-bottom:14px;border-radius:12px;display:grid;place-items:center;background:#DBF5F4;box-shadow:inset 0 0 0 1px rgba(0,178,169,.18);color:#243A72;transition:transform .3s ease}
.fx-ico svg{width:22px;height:22px}
@media(hover:hover){.fx-card:hover .fx-ico{transform:scale(1.12) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.fx-ico,.fx-tab{transition:none}}
.fx-t{position:relative;margin:0 0 6px;font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:#16273F}
.fx-c{position:relative;margin:0;font-size:13.5px;line-height:1.5;color:#5E7186}
/* ==================== FOUNDING WALL ADDITIONS (1 Oct 2026) ====================
   Cards added after founding.css was frozen: the slot's place in the stage, its tilt and its
   phone rule. The card itself takes everything else (radius, float, hover) from the wall's rules. */
.fnd-f12 { left: 68.6%; right: auto; top: 77%; width: 13%; transform: rotate(-3deg); z-index: 5; }
@media (max-width: 560px) { .fnd-f12 { display: none; } }

/* ==================== FOUNDING PLANS (4 Oct 2026) ====================
   Two founding cards side by side. From 1200px the copy column narrows so two ~390px cards
   fit, each on a compact scale; 700-1199px the pair sits under the copy at full width;
   below 700px they stack. Everything else is the card's own rules. */
.fnd-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; max-width: none; margin-left: 0; }
/* equal heights: the body is a column and the CTA foot sits at its end, so both "Book a demo" buttons align */
.fnd-plans .fnd-card { display: flex; flex-direction: column; }
.fnd-plans .fnd-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.fnd-plans .fnd-row-foot { margin-top: auto; }
@media (max-width: 1199px) {
  .fnd-layout--plans { grid-template-columns: 1fr; gap: 40px; }
  .fnd-layout--plans .fnd-copy { max-width: 640px; }
}
@media (min-width: 1200px) {
  .fnd-layout--plans { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
  .fnd-plans .fnd-card-top { padding: 13px 18px 12px; }
  .fnd-plans .fnd-row-seats, .fnd-plans .fnd-row-price, .fnd-plans .fnd-row-capacity, .fnd-plans .fnd-row-includes, .fnd-plans .fnd-row-foot { padding-left: 18px; padding-right: 18px; }
  .fnd-plans .fnd-seats-big { font-size: 1.9rem; }
  .fnd-plans .fnd-price-now { font-size: 2.2rem; }
  .fnd-plans .fnd-spec-item { padding: 9px 10px 10px; }
}
@media (min-width: 700px) and (max-width: 1199px) {
  /* two-up under the copy: the Basic card's longer title must not wrap, or its rows sit lower than card 1's */
  .fnd-plans .fnd-card-top { padding-left: 18px; padding-right: 18px; }
  .fnd-plans .fnd-card-title { font-size: 14px; white-space: nowrap; }
  .fnd-plans .fnd-card-logo { height: 18px; }
}
@media (max-width: 699px) { .fnd-plans { grid-template-columns: 1fr; } }

/* ==================== VIDEOS HIGHLIGHTS (30 Sep 2026) ====================
   One large rounded card holds the six slides -- the poster in a centred
   inset frame on the dark card, a three-line headline top-left, the play
   disc over the frame (dark glass, opens the lightbox), the language chip. Under it a floating pill: the active dot
   stretches into a bar (a width transition inside the pill, nothing else
   moves) whose fill runs the slide's turn as a scaleX; a Pause/Play disc
   beside it. A switch crosses two slides on opacity and a 6% slide. */
.vx-seg{position:relative;display:inline-flex;padding:4px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.vx-seg button{position:relative;z-index:1;width:96px;padding:8px 0;border:0;border-radius:8px;background:none;color:rgba(255,255,255,.7);font:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:color .3s}
.vx-seg button[aria-pressed="true"]{color:#243A72}
.vx-seg button:focus-visible{outline:2px solid #7DF0E9;outline-offset:2px}
.vx-seg-thumb{position:absolute;left:4px;top:4px;bottom:4px;width:96px;border-radius:8px;background:#fff;box-shadow:0 2px 8px rgba(9,15,29,.35)}
/* one viewport: the section is 100vh with the sticky header allowed for, the box is sized by
   the viewport height as well as the width, and the pill sits closer */
#videos{min-height:100vh;box-sizing:border-box;padding-top:92px;padding-bottom:24px;display:flex;flex-direction:column;justify-content:center}
#videos>[class*="max-w-"]{width:100%}  /* a flex item with auto margins is not stretched; without this it is fit-content (four slides wide) */
#videos .fd-eyebrow{margin-bottom:6px}
#videos .vh-head h2{font-size:clamp(1.55rem,2.6vw,2.4rem);line-height:1.1}
.vh-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;margin-bottom:16px;text-align:left}
.vh-head h2{margin:0}
.vh-head-r{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:6px}
.vh-all{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:#7DF0E9;text-decoration:none;white-space:nowrap}
.vh-all span{display:inline-block;transition:transform .3s ease}
.vh-all:hover{color:#fff}
.vh-all:hover span{transform:translateX(3px)}
.vh-all:focus-visible{outline:2px solid #7DF0E9;outline-offset:3px;border-radius:4px}
.vc{position:relative;text-align:left}
.vc-track{display:flex;align-items:center}
.vc-slide{flex:0 0 auto;padding-right:clamp(20px,4vw,80px)}
.vc-box{position:relative;width:min(70vw,1000px,calc((100vh - 300px) * 1.7778));aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#0E1622;box-shadow:0 2px 8px rgba(9,15,29,.35),0 34px 70px -30px rgba(9,15,29,.8)}
@media(max-width:639px){.vc-box{width:min(88vw,calc((100vh - 430px) * 0.8));aspect-ratio:4/5;border-radius:20px}}
.vc-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0E1622}
.vc-screen video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.vc-copy{position:absolute;z-index:1;top:clamp(20px,3.6vw,48px);left:5%;margin:0;max-width:34ch;text-shadow:0 2px 14px rgba(9,15,29,.6)}
.vc-copy p{margin:0;font-size:clamp(16px,1.8vw,22px);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:#fff}
.vc-copy[lang="hi"] p{line-height:1.45;letter-spacing:0}
.vc-ctl{position:relative;display:flex;justify-content:center;align-items:center;margin-top:20px}
.vc-pill{display:flex;align-items:center;padding:16px 24px;border-radius:999px;background:rgba(255,255,255,.12)}
.vc-dot{position:relative;flex:none;width:12px;height:12px;margin:0 8px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.35);cursor:pointer;overflow:hidden}
.vc-dot:focus-visible{outline:2px solid #7DF0E9;outline-offset:3px}
.vc-fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;background:#fff}
.vc-btn{flex:none;margin-left:14px;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background-color .3s}
.vc-btn:hover{background:rgba(255,255,255,.18)}
.vc-btn:focus-visible{outline:2px solid #7DF0E9;outline-offset:3px}
.vc-btn svg{grid-area:1/1;width:20px;height:20px;display:none}
.vc-btn[data-state="play"] .i-play{display:block;margin-left:2px}
.vc-btn[data-state="pause"] .i-pause{display:block}
.vc-btn[data-state="replay"] .i-replay{display:block}
.nx-modal{position:fixed;inset:0;z-index:9999;background:rgba(9,15,29,.82);display:none;align-items:center;justify-content:center;padding:20px}
.nx-modal.on{display:flex}
.nx-mbox{width:100%;max-width:820px;border-radius:12px;overflow:hidden;background:#0d1526;border:1px solid rgba(255,255,255,.12)}
.nx-mframe{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);font-size:14px;text-align:center;padding:0;background:linear-gradient(140deg,#0d1526,#243A72)}
.nx-mbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;color:#fff;font-weight:700;font-size:14px}
.nx-mframe video{display:block}
.nx-mbar button{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1}
a.fnd-cta-btn,a.faq-cta{text-decoration:none}