/* ============================================================
   SaveDate home — header + roomy banner + bespoke event blocks.
   Blocks start half below the fold; when their bottom meets the
   screen bottom they pin and vertical scroll scrubs sideways.
   ============================================================ */
@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/intertight-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/jakarta-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #1a1a1a;
  --muted: #6f6f7a;
  --line: #ececf0;
  --rose: #ed5f78;
  --lav: #cfc9f6;
  --yellow: #ffd159;
  --ease: cubic-bezier(.22, .8, .36, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background: #ffffff; color: var(--ink);
  line-height: 1.6; overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* EXACT dashboard background */
.bgcolor-wrapper { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #ffffff; }
.bgcolor-wrapper i { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(10px); }
.bgcolor-wrapper .bg-rose {
  top: -140px; left: 14%; opacity: .5;
  background: radial-gradient(50% 50% at 50% 50%, var(--lav) 0%, rgba(255, 255, 255, 0) 70%);
  animation: bgDriftX 9s ease-in-out infinite alternate;
}
.bgcolor-wrapper .bg-yellow {
  bottom: -6%; left: -80px; opacity: .35;
  background: radial-gradient(50% 50% at 50% 50%, var(--yellow) 0%, rgba(255, 255, 255, 0) 70%);
  animation: bgDriftY 8s ease-in-out infinite alternate;
}
.bgcolor-wrapper .bg-teal {
  bottom: 42%; right: -140px; opacity: .35;
  background: radial-gradient(50% 50% at 50% 50%, #9fdcc8 0%, rgba(255, 255, 255, 0) 70%);
  animation: bgDriftY2 10s ease-in-out infinite alternate;
}
@keyframes bgDriftX  { to { transform: translateX(30vw); } }
@keyframes bgDriftY  { to { transform: translateY(-34vh); } }
@keyframes bgDriftY2 { to { transform: translateY(26vh); } }

/* ============================================================
   HEADER — big logo bar → floating glassy pill (kept)
   ============================================================ */
.nx-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem;
  max-width: 100%;
  margin: 0 auto;
  padding: .6rem clamp(1.2rem, 4vw, 3rem);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  transition:
    max-width .5s var(--ease), margin .5s var(--ease), padding .5s var(--ease),
    background .5s var(--ease), border-radius .5s var(--ease),
    box-shadow .5s var(--ease), border-color .5s var(--ease), top .5s var(--ease);
}
/* the 10px nudge lives on a transform, so it never grows the header row */
.nx-brand {
  display: flex; align-items: center; justify-self: start; text-decoration: none;
  transform: translateY(10px); transition: transform .5s var(--ease);
}
.nx-head.pill .nx-brand { transform: translateY(0); }
.nx-logo-full {
  height: 120px; width: auto;
  transform-origin: 50% 62%;
  animation: nxRock 7s ease-in-out infinite;
  transition: height .45s var(--ease), opacity .25s var(--ease);
}
@keyframes nxRock {
  0% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
  100% { transform: rotate(-12deg); }
}
.nx-logo-mini { display: none; }
.nx-nav { display: flex; justify-content: center; gap: clamp(.3rem, 1vw, .7rem); }
.nx-nav a {
  text-decoration: none; font-weight: 500; font-size: .93rem; color: var(--ink);
  padding: .45rem 1rem; border-radius: 999px;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.nx-nav a:hover {
  background: rgba(237, 95, 120, .1); color: var(--rose);
  transform: translateY(-1px);
}
.nx-cta-wrap { justify-self: end; position: relative; }
/* hand-drawn "create for free" nudge under the signup button (one self-aligned svg) */
.nx-cta-note {
  position: absolute; top: 34px; right: calc(100% - 22px);
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.nx-cta-arrow { animation: nxNudge 1.6s ease-in-out infinite; }
@keyframes nxNudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -5px); } }
/* the text glows to the brand rose and back on a smooth beat */
.nx-cta-txt { animation: nxNoteBlink 2.4s ease-in-out infinite; }
@keyframes nxNoteBlink { 0%, 100% { fill: #8a8a8a; } 40%, 60% { fill: var(--rose); } }
.nx-head.pill .nx-cta-note { opacity: 0; }
.nx-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.45rem; border-radius: 999px;
  background: var(--rose); color: #fff; font-weight: 700; font-size: .9rem;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(237, 95, 120, .32);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), min-height .5s var(--ease), padding .5s var(--ease);
}
.nx-cta-btn:hover {
  transform: translateY(-2px);
  background: var(--yellow); color: #1a1a1a;
  box-shadow: 0 12px 28px rgba(255, 209, 89, .5);
}

.nx-head.pill {
  top: 12px;
  max-width: min(720px, calc(100vw - 2rem));
  padding: .45rem .6rem .45rem 1rem;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, .8);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(26, 26, 26, .14);
}
.nx-head.pill .nx-logo-full { height: 34px; width: 0; opacity: 0; }
.nx-head.pill .nx-logo-mini { display: block; animation: nxPop .35s var(--ease) both; animation-delay: .15s; }
.nx-head.pill .nx-nav a { font-size: .88rem; }
.nx-head.pill .nx-cta-btn { min-height: 38px; padding: 0 1.15rem; font-size: .85rem; }
@keyframes nxPop { from { opacity: 0; transform: scale(.6) rotate(-10deg); } }

/* ============================================================
   BANNER — normal flow, generous air above & below, typing word
   ============================================================ */
.nx-banner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: clamp(8.5rem, 19vh, 11rem) clamp(1rem, 4vw, 3rem) 40px;
}
.nx-banner h1 {
  font-family: 'Inter Tight', 'Plus Jakarta Sans', sans-serif;
  font-weight: 300; letter-spacing: -.03em; line-height: 1.1;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
}
.nx-rot { white-space: nowrap; }
#nx-rot { font-weight: 800; }
.nx-caret {
  display: inline-block; width: 3px; height: .8em; background: currentColor;
  margin-left: 3px; vertical-align: -.05em; opacity: .85;
  animation: nxBlink 1s steps(1) infinite;
}
@keyframes nxBlink { 50% { opacity: 0; } }
.nx-banner p {
  font-family: 'Inter Tight', 'Plus Jakarta Sans', sans-serif;
  color: var(--muted); line-height: 1.6; letter-spacing: -.01em;
  margin: 1.4rem 0 2rem; max-width: 46rem;
}
.nx-sub-l1, .nx-sub-l2 { font-size: 1.08rem; font-weight: 400; }
@media (max-width: 760px) {
  .nx-sub-l1, .nx-sub-l2 { font-size: .92rem; }
  .nx-banner p br { display: none; }
}

/* core-feature highlights under the CTA */
.nx-feats {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: .7rem 1.7rem; margin-top: 120px; padding: 0;
}
/* random eye-catcher zing on one icon at a time */
.nx-feat-ic.zing { animation: nxZing .7s var(--ease); }
@keyframes nxZing {
  0%   { transform: scale(1) rotate(0); filter: saturate(1); }
  30%  { transform: scale(1.35) rotate(-10deg); filter: saturate(1.8) brightness(1.05); }
  55%  { transform: scale(1.15) rotate(8deg); }
  75%  { transform: scale(1.28) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); filter: saturate(1); }
}
.nx-feats li {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .86rem; font-weight: 600; color: #4a4a54;
}
.nx-feat-ic {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
}
.nx-fi-rose  { background: #fdeef1; color: #ed5f78; }
.nx-fi-teal  { background: #e7f3f2; color: #3e948c; }
.nx-fi-amber { background: #fff3d6; color: #b07d10; }
.nx-fi-lilac { background: #edeafb; color: #5b6fbf; }
.nx-pill-dark {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 2.1rem; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 700; font-size: .98rem;
  text-decoration: none; position: relative; overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.nx-pill-dark:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(26, 26, 26, .28); }
.nx-pill-dark::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  animation: nxShine 4.2s var(--ease) infinite;
}
@keyframes nxShine { 0%, 60% { left: -55%; } 90%, 100% { left: 130%; } }

/* ============================================================
   EVENT BLOCKS — pin + horizontal scrub
   ============================================================ */
.nx-stage { height: 430svh; position: relative; }
/* the pin is 100svh but the strip only fills its bottom 73svh — pull the
   whole stage up by the dead 27svh so the boxes start 45px under the feats.
   The overlapping empty area must not swallow clicks meant for the banner. */
@media (min-width: 761px) {
  .nx-stage { margin-top: calc(5px - 27svh); pointer-events: none; }
  .nx-stage .nx-strip { pointer-events: auto; }
}
.nx-pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end;
  padding-bottom: 5svh;
}
.nx-strip {
  display: flex; align-items: stretch; gap: 1.1rem;
  height: 68svh;
  padding: 0 clamp(1.2rem, 4vw, 3rem);
  will-change: transform;
}

/* shared block bones */
.nx-block {
  flex: none; height: 100%;
  border-radius: 30px;
  padding: clamp(1.7rem, 2.4vw, 2.5rem);
  display: flex; flex-direction: column; gap: .9rem;
  font-family: 'Inter Tight', 'Plus Jakarta Sans', sans-serif;
  transition: transform .25s var(--ease);
  position: relative; overflow: hidden;
}
.nx-block:hover { transform: translateY(-6px); }
.nx-block h2 { font-weight: 650; letter-spacing: -.025em; line-height: 1.12; margin: .15rem 0 .1rem; }
.nx-block p { font-size: clamp(.85rem, 1.2vw, .98rem); line-height: 1.6; max-width: 36ch; opacity: .8; margin-bottom: .3rem; }
.nx-tag {
  align-self: flex-start;
  background: #fff; color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .42rem 1rem; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(26, 26, 26, .1);
}
.nx-bbtn {
  margin-top: auto; align-self: flex-start; margin-bottom: .1rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 1.6rem; border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: .9rem; text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.nx-bbtn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(26, 26, 26, .22); }
.nxb-img { overflow: hidden; border-radius: 20px; }
.nxb-img img { width: 100%; height: 100%; object-fit: cover; }

/* per-box heading sizes */
.nx-b1 h2 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
.nx-b1 p { font-size: 1.08rem; }
.nx-b1 .nxb-img img { will-change: transform; transition: transform .1s linear; }
/* wedding heading swap-word */
.nx-wed-word { display: inline-block; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.nx-wed-word.out { opacity: 0; transform: translateY(.4em); }
/* wedding button hover — deeper wine, matching the box */
.nx-b1 .nx-bbtn:hover { background: #5e1e30; color: #ffe9ee; box-shadow: 0 12px 26px rgba(94, 30, 48, .38); }
/* floating hearts rising through the box (spawned by JS) */
.nx-b1 .nxb-copy, .nx-b1 .nxb-img { position: relative; z-index: 1; }
.nx-heart {
  position: absolute; bottom: -28px; z-index: 0; pointer-events: none;
  animation: nxHeartUp var(--dur, 6s) linear forwards;
  opacity: 0;
}
@keyframes nxHeartUp {
  0%   { transform: translateY(0) translateX(0) rotate(-8deg) scale(.7); opacity: 0; }
  12%  { opacity: .85; }
  55%  { transform: translateY(calc(var(--travel, 400px) * -.55)) translateX(var(--dx, 14px)) rotate(6deg) scale(1); opacity: .7; }
  100% { transform: translateY(calc(var(--travel, 400px) * -1.1)) translateX(calc(var(--dx, 14px) * -1)) rotate(-6deg) scale(.85); opacity: 0; }
}
/* wedding tag: wine text + tiny heart-in-circle, echoing the banner icons */
.nx-tag-wed { color: #7c2d43; display: inline-flex; align-items: center; gap: .45rem; padding-left: .5rem; }
.nx-tag-ic {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: #fbdce3; color: #c2496a;
}
.nx-b2 h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.nx-b3 h2 { font-size: clamp(1.7rem, 2.5vw, 2.3rem); }
.nx-b4 h2 { font-size: clamp(1.45rem, 2vw, 1.9rem); }
.nx-b5 h2 { font-size: clamp(1.55rem, 2.2vw, 2.1rem); }
.nx-b6 h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.nx-b7 h2 { font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
.nx-b8 h2 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }

/* 1 · WEDDING — elegant blush, copy | image */
.nx-b1 { width: 52vw; background: #f6d3da; color: #7c2d43; flex-direction: row; gap: 1.8rem; }
.nx-b1 .nxb-copy { flex: 1; display: flex; flex-direction: column; gap: .7rem; justify-content: center; }
.nx-b1 .nxb-img { flex: 1; }
.nx-b1 .nx-bbtn { background: #7c2d43; color: #ffe9ee; }

/* 2 · ENGAGEMENT — vibrant lavender + floating mini card */
.nx-b2 { width: 32vw; background: #b9a8f5; color: #33246e; }
.nx-b2 h2 { font-size: clamp(1.9rem, 2.8vw, 2.7rem); margin-top: -.5rem; }
/* right-aligned tag with ring icon, same language as the wedding tag */
.nx-tag-eng {
  align-self: flex-end;
  color: #4b32a8; display: inline-flex; align-items: center; gap: .45rem; padding-left: .5rem;
}
.nx-tag-eng .nx-tag-ic { background: #e6defb; color: #6b4fd8; }
.nx-b2 .nx-bbtn:hover { background: #33246e; color: #e6defb; box-shadow: 0 12px 26px rgba(51, 36, 110, .4); }
.nxb-mini {
  background: #fff; border-radius: 18px; padding: .8rem .8rem 1rem;
  box-shadow: 0 18px 40px rgba(51, 36, 110, .28);
  margin: .6rem auto .4rem; width: min(85%, 300px);
  transform-origin: 50% 18%;
  animation: nxMiniRock 5.5s ease-in-out infinite;
}
@keyframes nxMiniRock {
  0%, 100% { transform: rotate(-3.5deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-9px); }
}
.nx-eng-spark { display: inline-block; animation: nxSparkPulse 2.2s ease-in-out infinite; }
@keyframes nxSparkPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35) rotate(18deg); opacity: .7; } }
.nxb-mini img { border-radius: 12px; width: 100%; height: auto; }
.nxb-mini b { display: block; text-align: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .85rem; font-weight: 800; color: #33246e; margin-top: .6rem; }
.nx-b2 .nx-bbtn { background: #fff; color: #4b32a8; }

/* 3 · BIRTHDAY — vibrant orange, centred heading + scattered feature pills */
.nx-b3 { width: 44vw; background: #f58b4e; color: #5c2506; }
/* top row: tag left, button right — like the mock */
.nxb-toprow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nx-tag-bday {
  color: #b34a12; display: inline-flex; align-items: center; gap: .45rem; padding-left: .5rem;
}
.nx-tag-bday .nx-tag-ic { background: #ffe4d2; color: #d95f1e; }
.nx-b3 .nxb-btn-top { margin-top: 0; background: #fff; color: #b34a12; }
.nx-b3 .nxb-btn-top:hover { background: #5c2506; color: #ffe4d2; box-shadow: 0 12px 26px rgba(92, 37, 6, .4); }
.nx-b3 h2.nxb-center { text-align: center; font-size: clamp(2rem, 3.1vw, 3rem); margin-top: .8rem; }
.nx-b3 p.nxb-center-p { text-align: center; font-size: 1.08rem; align-self: center; line-height: 1.55; max-width: none; }
.nxb-pills {
  flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: .9rem 1rem; padding: .8rem .5rem;
}
.nxb-pills i {
  display: inline-flex; align-items: center; gap: .45rem;
  font-style: normal; font-family: 'Plus Jakarta Sans', sans-serif;
  background: #fff; color: #7a3410; font-weight: 700; font-size: clamp(.78rem, 1.1vw, .95rem);
  padding: .6rem 1.15rem; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(92, 37, 6, .22);
  transform: rotate(var(--r, 0deg));
  transition: transform .25s var(--ease);
}
.nxb-pills i svg { color: #d95f1e; flex: none; }
.nxb-pills i:hover { transform: rotate(0deg) scale(1.06); }
.nxb-pills i.pop { animation: nxPillPop .65s var(--ease); }
@keyframes nxPillPop {
  0%   { transform: rotate(var(--r, 0deg)) scale(1); }
  35%  { transform: rotate(0deg) scale(1.16); }
  65%  { transform: rotate(calc(var(--r, 0deg) * -1)) scale(1.05); }
  100% { transform: rotate(var(--r, 0deg)) scale(1); }
}

/* 4 · NAMING CEREMONY — light green, centred name-reveal demo */
.nx-b4 { width: 33vw; background: #cfe3a8; color: #3c531a; align-items: center; text-align: center; }
.nx-b4 h2 { font-size: clamp(1.9rem, 2.8vw, 2.7rem); margin-top: 1.2rem; }
.nx-b4 p.nxb-name-p { font-size: 1.08rem; max-width: none; line-height: 1.55; }
.nx-tag-name { display: inline-flex; align-items: center; gap: .45rem; padding-left: .5rem; color: #5c7a26; }
.nx-tag-name .nx-tag-ic { background: #e9f3d2; color: #87a83c; }
.nx-b4 .nx-bbtn { background: #3c531a; color: #e8f3d3; align-self: center; }
.nx-b4 .nx-bbtn:hover { background: #1f2e0c; color: #e8f3d3; box-shadow: 0 12px 26px rgba(31, 46, 12, .4); }
/* the reveal demo */
.nxb-reveal { flex: 1; min-height: 0; display: grid; place-items: center; width: 100%; }
.nxb-cd { display: flex; gap: .55rem; }
/* the hidden attribute must always win over the flex display */
.nxb-cd[hidden], .nxb-name[hidden] { display: none !important; }
.nxb-cd .cdt {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  background: #fff; border-radius: 20px; padding: 1.2rem 1rem .95rem;
  box-shadow: 0 12px 28px rgba(60, 83, 26, .18);
  min-width: clamp(76px, 6.6vw, 106px);
}
.nxb-cd .cdt b { font-size: clamp(2.1rem, 2.7vw, 3.1rem); font-weight: 800; line-height: 1; color: #3c531a; font-variant-numeric: tabular-nums; }
.nxb-cd .cdt span { font-size: .74rem; font-weight: 700; color: #87a83c; }
.nxb-name { position: relative; }
.nxb-name b {
  display: inline-block;
  font-family: 'Inter Tight', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(2.4rem, 3.4vw, 3.4rem); color: #3c531a;
  animation: nxNamePop .7s var(--ease) both;
}
@keyframes nxNamePop {
  0%   { transform: scale(.2) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.nc-bursts { position: absolute; inset: 0; pointer-events: none; }
.nc-bursts i {
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 10px; border-radius: 2px;
  animation: nxBurstFly .8s var(--ease) both;
}
@keyframes nxBurstFly {
  0%   { transform: translate(-50%, -50%) scale(.6) rotate(0); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--bx, 40px)), calc(-50% + var(--by, -40px))) scale(1) rotate(220deg); opacity: 0; }
}

/* 5 · BAPTISM — soft lilac, self-drawing line art */
.nx-b5 { width: 24vw; background: #d8ccf6; color: #46367c; }
/* ---- BAPTISM WAVES (removable block) ---- */
.nx-b5 > *:not(.nxb-waves) { position: relative; z-index: 1; }
.nxb-waves {
  position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  z-index: 0; pointer-events: none;
}
.nxb-waves .wv { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; }
.nxb-waves .wv-1 { fill: #c7b7f1; opacity: .65; animation: nxWave 13s linear infinite; }
.nxb-waves .wv-2 { fill: #b09ae9; opacity: .75; animation: nxWave 9s linear infinite reverse; height: 84%; }
.nxb-waves .wv-3 { fill: #8f74d8; opacity: .9; animation: nxWave 7s linear infinite; height: 62%; }
@keyframes nxWave { to { transform: translateX(-50%); } }
/* ---- end BAPTISM WAVES ---- */
.nx-b5 .nx-bbtn { background: #46367c; color: #eee8ff; }
.nx-b5 .nx-bbtn:hover { background: #322558; color: #e6defb; box-shadow: 0 12px 26px rgba(50, 37, 88, .4); }
.nx-tag-bap { color: #5a45a8; display: inline-flex; align-items: center; gap: .45rem; padding-left: .5rem; }
.nx-tag-bap .nx-tag-ic { background: #e9e1fb; color: #6a52c8; }
.nxb-lineart { flex: 1; min-height: 0; width: 80%; margin: .4rem auto; opacity: .55; }
.nxb-bap { flex: 1; min-height: 0; width: 72%; margin: .5rem auto; color: #46367c; }
/* the drawing loop: each stroke paints itself in, rests, then flows away */
.nxb-bap circle, .nxb-bap path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: nxDraw 7s var(--ease) infinite;
}
.nxb-bap :nth-child(1) { animation-delay: 0s; }
.nxb-bap :nth-child(2) { animation-delay: .25s; }
.nxb-bap :nth-child(3) { animation-delay: .45s; }
.nxb-bap :nth-child(4) { animation-delay: .6s; }
.nxb-bap :nth-child(5) { animation-delay: .85s; }
.nxb-bap :nth-child(6) { animation-delay: 1.15s; }
.nxb-bap :nth-child(7) { animation-delay: 1.3s; }
.nxb-bap :nth-child(8) { animation-delay: 1.5s; }
.nxb-bap :nth-child(9) { animation-delay: 1.65s; }
@keyframes nxDraw {
  0%        { stroke-dashoffset: 1; }
  32%, 72%  { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: -1; }
}

/* 6 · ANNIVERSARY — white card, deep teal border, shuffling photo deck */
.nx-b6 {
  width: 34vw; background: #fff; border: 2px solid #075e55; color: #075e55;
  align-items: center; text-align: center;
}
.nx-b6 h2 { font-size: clamp(2rem, 3vw, 2.9rem); }
.nx-b6 p.nxb-anni-p { color: #6f6f7a; font-size: 1.08rem; max-width: none; line-height: 1.55; }
.nx-tag-anni {
  background: #fff; border: 1.5px solid #075e55; box-shadow: none; color: #075e55;
  display: inline-flex; align-items: center; gap: .45rem; padding-left: .5rem;
}
.nx-tag-anni .nx-tag-ic { background: #dcefec; color: #075e55; }
.nx-b6 .nx-bbtn { background: #075e55; color: #eafaf7; align-self: center; }
.nx-b6 .nx-bbtn:hover { background: #04443d; color: #eafaf7; box-shadow: 0 12px 26px rgba(7, 94, 85, .4); }
/* the shuffling deck */
.nxb-deck { position: relative; flex: none; width: min(250px, 74%); height: 168px; margin: .9rem auto 2.2rem; }
.deck-card {
  position: absolute; inset: 0;
  background: #fff; border-radius: 16px; padding: 7px;
  border: 1.5px solid #dcefec;
  box-shadow: 0 14px 34px rgba(7, 94, 85, .22);
  transition: transform .6s cubic-bezier(.34, 1.45, .5, 1);
}
.deck-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
.deck-card.slot0 { transform: rotate(-4deg); z-index: 3; }
.deck-card.slot1 { transform: rotate(5deg) translate(14px, 6px) scale(.95); z-index: 2; }
.deck-card.slot2 { transform: rotate(-9deg) translate(-14px, 10px) scale(.9); z-index: 1; }
/* phase 1 of the shuffle: top photo shrinks fully behind the stack before layers swap */
.deck-card.tuck { transition: transform .38s ease-in; transform: rotate(-6deg) translate(0, 3%) scale(.78); }

/* 7 · HOUSEWARMING — warm butter, animated route map to the new home */
.nx-b7 { width: 28vw; background: #ffe2a4; color: #6b4708; align-items: center; text-align: center; }
.nx-b7 .nxb-map { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: .4rem; }
.nx-b7 .nxb-map svg { width: 100%; height: 100%; }
/* burst container is a point at the house, not a full overlay */
.nx-hw-bursts { inset: auto; width: 0; height: 0; }
.nx-tag-house { color: #6b4708; display: inline-flex; align-items: center; gap: .45rem; padding-left: .5rem; }
.nx-tag-house .nx-tag-ic { background: #6b4708; color: #ffe2a4; }
.nx-b7 p.nxb-house-p { font-size: 1.08rem; max-width: none; line-height: 1.55; }
.nx-b7 .nx-bbtn { background: #6b4708; color: #ffedc4; align-self: center; }
.nx-b7 .nx-bbtn:hover { background: #452c04; color: #ffedc4; box-shadow: 0 12px 26px rgba(69, 44, 4, .4); }

/* 8 · INAUGURATION — deep maroon, bold contrast */
.nx-b8 { width: 46vw; background: #7a2440; color: #ffdbe6; flex-direction: row; gap: 1.6rem; }
.nx-b8 .nxb-copy { flex: 1; display: flex; flex-direction: column; gap: .7rem; justify-content: center; }
.nx-b8 .nxb-img { flex: .95; }
.nx-b8 .nx-tag { background: #ffdbe6; color: #7a2440; }
.nx-tag-inaug { display: inline-flex; align-items: center; gap: .45rem; padding-left: .5rem; }
.nx-tag-inaug .nx-tag-ic { background: #7a2440; color: #ffc9d8; }
.nx-b8 .nx-bbtn { background: #fff; color: #7a2440; }
.nx-b8 .nx-bbtn:hover { background: #ffc9d8; color: #5c1830; box-shadow: 0 12px 26px rgba(0, 0, 0, .3); }
.nx-b8 p { font-size: 1.08rem; max-width: none; }
/* confetti drifting down through the inauguration box */
.nx-b8 .nxb-copy, .nx-b8 .nxb-img { position: relative; z-index: 1; }
.nx-confetti {
  position: absolute; top: -24px; z-index: 0; pointer-events: none;
  border-radius: 2px;
  animation: nxConfettiFall var(--dur, 6s) linear forwards;
  opacity: 0;
}
@keyframes nxConfettiFall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10%  { opacity: .9; }
  50%  { transform: translateY(calc(var(--travel, 400px) * .55)) translateX(var(--dx, 20px)) rotate(400deg); opacity: .85; }
  100% { transform: translateY(calc(var(--travel, 400px) * 1.15)) translateX(calc(var(--dx, 20px) * -1)) rotate(760deg); opacity: 0; }
}

/* below — next sections on your instruction */
/* ============================================================
   LOWER SECTIONS — shared shell
   ============================================================ */
.nx-sec { position: relative; padding: 6rem clamp(1.2rem, 4vw, 3rem); scroll-margin-top: 90px; }
.nx-wrap { max-width: 1200px; margin: 0 auto; }
.nx-stag-row { text-align: center; margin-bottom: 1.2rem; }
.nx-stag {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; color: var(--ink);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .42rem 1.1rem .42rem .5rem; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(26, 26, 26, .1);
  transition: background .7s var(--ease), color .7s var(--ease), box-shadow .7s var(--ease);
}
body.nx-dark .nx-stag { background: #1d2027; color: #e8eaf0; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.nx-stag-ic { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.stag-rose   { background: #fbdce3; color: #c2496a; }
.stag-lav    { background: #e6defb; color: #6b4fd8; }
.stag-yellow { background: #ffe8b0; color: #b0730a; }
.stag-teal   { background: #dcefec; color: #075e55; }
.stag-sky    { background: #cfe6f8; color: #3d7fae; }
.nx-sh {
  font-family: 'Inter Tight', 'Plus Jakarta Sans', sans-serif;
  font-weight: 300; letter-spacing: -.02em; line-height: 1.12;
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  text-align: center; color: var(--ink);
  transition: color .7s var(--ease);
}
.nx-sh b { font-weight: 600; }
.nx-sh .w-rose { color: var(--rose); }
.nx-sh-xl { font-size: clamp(2.6rem, 4.6vw, 4.1rem); }
.nx-ssub {
  text-align: center; color: var(--muted); font-size: 1.08rem; line-height: 1.6;
  max-width: 58ch; margin: 1.1rem auto 0;
  transition: color .7s var(--ease);
}

/* ---- FEATURES bento ---- */
#features .nx-wrap { max-width: none; }
.nx-feat-grid {
  margin-top: 3.2rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem;
}
.nx-ft {
  border-radius: 26px; padding: 2.1rem 1.9rem 2rem; min-height: 240px;
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nx-ft:hover { transform: translateY(-5px); }
.nx-ft p { transition: color .3s var(--ease), opacity .3s var(--ease); }
.nx-ft:hover .nx-ft-ic { transform: rotateY(360deg); }
/* colour-filled tiles turn white on hover; the colour moves into the icon circle */
.nx-ft:not(.ftw) { border: 1.5px solid transparent; }
.nx-ft:not(.ftw):hover { background: #fff; color: var(--ink); border-color: #e7e7ee; }
.nx-ft:not(.ftw):hover p { color: var(--muted); opacity: 1; }
.ft-rose:hover .nx-ft-ic   { background: #fbdce3; }
.ft-sky:hover .nx-ft-ic    { background: #cfe6f8; }
.ft-mint:hover .nx-ft-ic   { background: #d9f0c8; }
.ft-peach:hover .nx-ft-ic  { background: #ffe4d2; }
.ft-ink:hover .nx-ft-ic    { background: #fbdce3; }
.ft-butter:hover .nx-ft-ic { background: #ffe2a4; }
/* hover shadow tinted to each tile's own colour */
.ft-rose:hover   { box-shadow: 0 14px 30px rgba(194, 73, 106, .18); }
.ft-sky:hover { box-shadow: 0 14px 30px rgba(61, 127, 174, .18); }
.ft-mint:hover   { box-shadow: 0 14px 30px rgba(135, 168, 60, .18); }
.ft-peach:hover  { box-shadow: 0 14px 30px rgba(217, 95, 30, .18); }
.ft-ink:hover    { box-shadow: 0 14px 30px rgba(26, 26, 26, .2); }
.ft-butter:hover { box-shadow: 0 14px 30px rgba(176, 115, 10, .18); }
.ftw-teal:hover  { box-shadow: 0 14px 30px rgba(15, 143, 127, .16); }
.ftw-lav:hover   { box-shadow: 0 14px 30px rgba(107, 79, 216, .16); }
.ftw-sky:hover   { box-shadow: 0 14px 30px rgba(61, 127, 174, .16); }
.ftw-wine:hover  { box-shadow: 0 14px 30px rgba(182, 66, 115, .16); }
.nx-ft-ic {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; margin-bottom: 1.1rem;
  transition: transform .6s var(--ease), background .3s var(--ease);
}
.nx-ft-ic svg { width: 26px; height: 26px; }
.nx-ft h3 { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.32rem; line-height: 1.2; letter-spacing: -.01em; margin-bottom: .4rem; }
.nx-ft p { font-size: 1rem; line-height: 1.6; opacity: .82; }
.ft-sp2 { grid-column: span 2; }
.ft-rose   { background: #f6d3da; color: #7c2d43; } .ft-rose .nx-ft-ic   { color: #c2496a; }
.ft-sky { background: #cfe6f8; color: #24506e; } .ft-sky .nx-ft-ic { color: #3d7fae; }
.ft-mint   { background: #d9f0c8; color: #3c531a; } .ft-mint .nx-ft-ic   { color: #87a83c; }
.ft-peach  { background: #ffdcc7; color: #5c2506; } .ft-peach .nx-ft-ic  { color: #d95f1e; }
.ft-ink    { background: var(--ink); color: #f4f2ee; } .ft-ink .nx-ft-ic  { color: var(--rose); }
.ft-butter { background: #ffe2a4; color: #6b4708; } .ft-butter .nx-ft-ic { color: #b0730a; }
/* white tiles: border only, colour lives in the icon circle */
.ftw { background: #fff; border: 1.5px solid #e7e7ee; color: var(--ink); }
.ftw p { color: var(--muted); opacity: 1; }
.ftw-teal .nx-ft-ic { background: #dcefec; color: #0f8f7f; }
.ftw-lav .nx-ft-ic  { background: #e6defb; color: #6b4fd8; }
.ftw-sky .nx-ft-ic  { background: #cfe6f8; color: #3d7fae; }
.ftw-wine .nx-ft-ic { background: #f4cede; color: #b64273; }

/* ---- CUSTOMISE DEMO + dark flip ---- */
/* the marquee edge-fade colour follows the dark flip smoothly */
@property --fade { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
body { --fade: #ffffff; transition: background-color .7s var(--ease), --fade .7s var(--ease); }
body.nx-dark { --fade: #111318; }
.bgcolor-wrapper { transition: opacity .7s var(--ease); }
body.nx-dark { background: #111318; }
body.nx-dark .bgcolor-wrapper { opacity: 0; }
body.nx-dark .nx-sh { color: #fff; }
body.nx-dark .nx-ssub { color: #a7abb8; }
body.nx-dark .nx-sh-band { color: #ffdbe6; }
/* the demo band adapts fully to the dark theme */
body.nx-dark .nx-dm-card { background: #1d2027; border-color: #2b2f3a; }
body.nx-dark .nx-dm-card > b, body.nx-dark .nx-dm-note b { color: #eef0f5; }
body.nx-dark .nx-dm-card > p, body.nx-dark .nx-dm-note p { color: #a7abb8; }
body.nx-dark .dm-theme { background: #262a33; border-color: #343947; color: #e8eaf0; }
/* full-bleed light-rose glass band; the 3-column grid stays in the container */
.nx-demo-sec {
  background: rgba(252, 226, 233, .6);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: background-color .7s var(--ease);
}
body.nx-dark .nx-demo-sec { background: rgba(44, 26, 33, .6); }
.nx-dm-panel {
  display: grid; grid-template-columns: 1.1fr minmax(280px, 330px) minmax(260px, 320px);
  align-items: center; gap: clamp(1.6rem, 3.5vw, 3.5rem);
}
.nx-dm-left .nx-stag { margin-bottom: .2rem; }
.nx-sh-left { text-align: left; margin-top: 1.4rem; font-size: clamp(2rem, 3vw, 2.9rem); }
.nx-ssub-left { text-align: left; margin-left: 0; }
/* the live invite sits inside a phone */
.nx-dm-frame {
  position: relative; width: 100%; max-width: 340px; justify-self: center;
  background: #17181c; border-radius: 46px; padding: 12px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .28);
}
.nx-dm-notch {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 19px; border-radius: 999px; background: #17181c; z-index: 2;
}
.nx-dm-phone { position: relative; border-radius: 35px; overflow: hidden; background: var(--dm-bg); transition: background .45s var(--ease); }
.nx-dm-phone svg { display: block; width: 100%; height: auto; }
.dm-card { fill: var(--dm-bg); transition: fill .45s var(--ease); }
.dm-deco path { fill: var(--dm-acc); opacity: .4; transition: fill .45s var(--ease); }
.dm-mono { fill: var(--dm-acc); transition: fill .45s var(--ease); }
.dm-mono-txt { font: 700 15px 'Plus Jakarta Sans', sans-serif; fill: #fff; text-anchor: middle; }
.dm-names { font: 500 31px 'Inter Tight', sans-serif; letter-spacing: -.5px; fill: var(--dm-ink); text-anchor: middle; transition: fill .45s var(--ease); }
.dm-sub { font: 700 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: 3px; fill: var(--dm-sub); text-anchor: middle; transition: fill .45s var(--ease); }
.dm-date { font: 600 13px 'Plus Jakarta Sans', sans-serif; fill: var(--dm-sub); text-anchor: middle; transition: fill .45s var(--ease); }
.dm-cd rect { fill: var(--dm-acc); transition: fill .45s var(--ease); }
.dm-cd-num { font: 700 22px 'Inter Tight', sans-serif; fill: #fff; text-anchor: middle; }
.dm-cd-lbl { font: 700 8px 'Plus Jakarta Sans', sans-serif; letter-spacing: 1.5px; fill: rgba(255, 255, 255, .85); text-anchor: middle; }
.dm-rsvp { cursor: pointer; outline: none; }
.dm-rsvp:focus:not(:focus-visible) { outline: none; }
.dm-rsvp:focus-visible rect { stroke: var(--rose); stroke-width: 2; }
.dm-rsvp rect { fill: var(--dm-ink); transition: fill .45s var(--ease); }
.dm-rsvp-txt { font: 700 15px 'Plus Jakarta Sans', sans-serif; fill: var(--dm-bg); text-anchor: middle; transition: fill .45s var(--ease); }
.dm-rsvp:hover rect { fill: var(--dm-acc); }
.dm-rsvp:hover .dm-rsvp-txt { fill: #fff; }
.dm-toast { opacity: 0; }
.dm-toast rect { fill: #fff; }
.dm-toast-txt { font: 700 13px 'Plus Jakarta Sans', sans-serif; fill: #1a7f4f; text-anchor: middle; }
.dm-toast.show { animation: dmToast 2.2s var(--ease) both; }
@keyframes dmToast {
  0% { opacity: 0; transform: translateY(8px); }
  12%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
.nx-dm-ctrls { display: flex; flex-direction: column; gap: 1rem; }
.nx-dm-card {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 10px 30px rgba(26, 26, 26, .07);
  transition: background .7s var(--ease), border-color .7s var(--ease);
}
.nx-dm-card > b { display: block; font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.02rem; margin-bottom: .7rem; transition: color .7s var(--ease); }
.nx-dm-card > p { font-size: .92rem; color: var(--muted); line-height: 1.55; transition: color .7s var(--ease); }
.nx-dm-themes { display: flex; gap: .6rem; flex-wrap: wrap; }
.dm-theme {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px;
  padding: .45rem 1rem .45rem .5rem; font: 600 .88rem 'Plus Jakarta Sans', sans-serif; color: var(--ink);
  cursor: pointer; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .7s var(--ease), color .7s var(--ease);
}
.dm-theme i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); }
.dm-theme.on { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(237, 95, 120, .18); }
.nx-dm-swatches { display: flex; gap: .7rem; }
.nx-dm-note { display: flex; align-items: flex-start; gap: .9rem; }
.nx-dm-note b { display: block; font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.02rem; margin-bottom: .3rem; transition: color .7s var(--ease); }
.nx-dm-note b.in { animation: dmTitleIn .4s var(--ease); }
@keyframes dmTitleIn { from { opacity: 0; transform: translateY(6px); } }
.nx-dm-note p { font-size: .92rem; color: var(--muted); line-height: 1.55; min-height: 6.2em; }
.nx-dm-shield { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #1a9a5c; color: #fff; transition: background .35s var(--ease); }
.dm-fcaret {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.15em;
  background: var(--rose); animation: dmBlink 1s steps(1) infinite;
}
/* full-screen heart overlay fired by the demo RSVP tap */
.nx-heart-screen { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }
@keyframes dmBlink { 50% { opacity: 0; } }
.dm-sw {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.dm-sw:hover { transform: scale(1.12); }
.dm-sw.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--c); }

/* ---- 3 EASY STEPS — glassy gradient cards + flowing chevrons ---- */
.nx-steps {
  margin-top: 3.4rem;
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: clamp(1rem, 2.4vw, 2rem); align-items: stretch;
}
.nx-step {
  position: relative; overflow: hidden; text-align: left;
  border-radius: 26px; padding: 2.1rem 1.9rem;
  border: 1px solid rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(26, 26, 26, .07);
  transition: transform .22s var(--ease), border-color .7s var(--ease);
}
.nx-step:hover { transform: translateY(-4px); }
.nx-step > * { position: relative; z-index: 1; }
/* two gradient skins stacked; the dark flip crossfades them */
.nx-step::before, .nx-step::after { content: ''; position: absolute; inset: 0; transition: opacity .7s var(--ease); }
.nx-step::after { opacity: 0; }
.st-rose::before  { background: linear-gradient(135deg, rgba(253, 231, 236, .9), rgba(255, 255, 255, .45)); }
.st-teal::before  { background: linear-gradient(135deg, rgba(224, 244, 240, .9), rgba(255, 255, 255, .45)); }
.st-amber::before { background: linear-gradient(135deg, rgba(255, 241, 216, .9), rgba(255, 255, 255, .45)); }
.st-rose::after  { background: linear-gradient(135deg, rgba(237, 95, 120, .18), rgba(29, 32, 39, .65)); }
.st-teal::after  { background: linear-gradient(135deg, rgba(64, 190, 170, .16), rgba(29, 32, 39, .65)); }
.st-amber::after { background: linear-gradient(135deg, rgba(242, 182, 79, .16), rgba(29, 32, 39, .65)); }
body.nx-dark .nx-step { border-color: rgba(255, 255, 255, .1); }
body.nx-dark .nx-step::before { opacity: 0; }
body.nx-dark .nx-step::after { opacity: 1; }
.nx-step-num {
  display: block; font: 200 4.2rem/1 'Inter Tight', sans-serif; letter-spacing: -.03em;
  margin-bottom: .7rem; transition: color .7s var(--ease);
}
.sn-rose { color: #eb9fae; } .sn-teal { color: #7cc6bb; } .sn-amber { color: #e5bb72; }
.nx-step h3 { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; margin-bottom: .45rem; color: var(--ink); transition: color .7s var(--ease); }
.nx-step p { color: var(--muted); font-size: .98rem; line-height: 1.65; transition: color .7s var(--ease); }
body.nx-dark .nx-step h3 { color: #fff; }
body.nx-dark .nx-step p { color: #a7abb8; }
body.nx-dark .sn-rose { color: rgba(237, 95, 120, .85); }
body.nx-dark .sn-teal { color: rgba(64, 190, 170, .85); }
body.nx-dark .sn-amber { color: rgba(242, 182, 79, .85); }
/* flowing chevrons: light travels left → right */
.nx-step-arrow { align-self: center; color: var(--rose); }
.nx-step-arrow .ch { opacity: .18; animation: nxChev 1.4s ease-in-out infinite; }
.nx-step-arrow .ch:nth-child(2) { animation-delay: .22s; }
.nx-step-arrow .ch:nth-child(3) { animation-delay: .44s; }
@keyframes nxChev { 0%, 100% { opacity: .18; } 30% { opacity: 1; } }
body.nx-dark .nx-step-arrow { color: #f27d93; }

/* ---- TESTIMONIALS marquee ---- */
.nx-testi { padding-left: 0; padding-right: 0; }
.nx-marquee { margin-top: 3rem; overflow: hidden; position: relative; }
.nx-marquee::before, .nx-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 1; pointer-events: none;
}
.nx-marquee::before { left: 0; background: linear-gradient(90deg, var(--fade, #fff), transparent); }
.nx-marquee::after { right: 0; background: linear-gradient(-90deg, var(--fade, #fff), transparent); }
.nx-mq-track { display: flex; width: max-content; animation: nxMq 55s linear infinite; }
.nx-marquee:hover .nx-mq-track { animation-play-state: paused; }
@keyframes nxMq { to { transform: translateX(-50%); } }
.nx-mq-set { display: flex; gap: 1.3rem; padding: .4rem .65rem; }
.nx-tst {
  width: 340px; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 1.5rem 1.6rem;
  box-shadow: 0 10px 30px rgba(26, 26, 26, .06);
  transition: background .7s var(--ease), border-color .7s var(--ease);
}
.nx-tst blockquote { font-size: .98rem; line-height: 1.65; color: #3a3a42; margin: .9rem 0 1.1rem; transition: color .7s var(--ease); }
.nx-tst figcaption { display: flex; align-items: center; gap: .75rem; }
.nx-tst figcaption i {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font: 800 .85rem 'Plus Jakarta Sans', sans-serif; font-style: normal;
}
.nx-tst figcaption b { display: block; font-size: .95rem; color: var(--ink); transition: color .7s var(--ease); }
.nx-tst figcaption small { color: var(--muted); font-size: .8rem; transition: color .7s var(--ease); }
/* dark-theme adaptation while the flip is active */
body.nx-dark .nx-tst { background: #1d2027; border-color: #2b2f3a; }
body.nx-dark .nx-tst blockquote { color: #c9ccd6; }
body.nx-dark .nx-tst figcaption b { color: #eef0f5; }
body.nx-dark .nx-tst figcaption small { color: #8b90a0; }
body.nx-dark .nx-bub { background: #1d2027; border-color: #2b2f3a; color: #e8eaf0; }
/* chat-bubble marquee rows under the testimonial cards */
.nx-chat-row { margin-top: 1.1rem; }
.nx-chat-track { animation-duration: 42s; }
.nx-chat-track.rev { animation-direction: reverse; }
.nx-chat-set { display: flex; gap: 1rem; padding: .3rem .5rem; }
.nx-bub {
  display: inline-flex; align-items: center; gap: .55rem; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem 1.5rem .5rem .55rem;
  font-weight: 600; font-size: .98rem; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(26, 26, 26, .05);
  transition: background .7s var(--ease), border-color .7s var(--ease), color .7s var(--ease);
}
.nx-bub img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #f0eef4; }

/* ---- FAQ — minimal accordion ---- */
.nx-faq { max-width: 1200px; margin: 2.6rem auto 0; }
.nx-faq details { border-bottom: 1px solid rgba(26, 26, 26, .55); transition: border-color .7s var(--ease); }
body.nx-dark .nx-faq summary { color: #e8eaf0; }
body.nx-dark .nx-faq details p { color: #a7abb8; }
body.nx-dark .nx-faq details { border-color: #2b2f3a; }
.nx-faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.5rem .2rem;
  font-family: 'Inter Tight', sans-serif; font-weight: 300; font-size: 1.35rem; letter-spacing: -.01em;
  transition: color .18s var(--ease);
}
.nx-faq summary::-webkit-details-marker { display: none; }
.nx-faq summary::after {
  content: '+'; flex: none;
  font: 300 1.6rem 'Inter Tight', sans-serif; color: var(--muted); line-height: 1;
  transition: transform .25s var(--ease), color .18s var(--ease);
}
.nx-faq summary:hover { color: var(--rose); }
.nx-faq details[open] summary { color: var(--rose); }
.nx-faq details[open] summary::after { transform: rotate(45deg); color: var(--rose); }
.nx-faq details p { padding: 0 2.4rem 1.25rem .2rem; color: var(--muted); font-size: .98rem; line-height: 1.65; }

/* ---- CTA BAND ---- */
.nx-cta-band {
  background: #7a2440; text-align: center;
  padding: clamp(5rem, 10vw, 8rem) clamp(1.2rem, 4vw, 3rem);
  margin-top: 3rem;
}
.nx-sh-band { color: #ffdbe6; font-size: clamp(2.4rem, 5.4vw, 4.6rem); }
.nx-sh-band b { color: #fff; font-weight: 600; }
.nx-band-word {
  display: inline-block; color: var(--yellow); font-weight: 500;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.nx-band-word.out { opacity: 0; transform: translateY(.35em); }
.nx-band-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2.4rem; min-height: 56px; padding: 0 2.4rem; border-radius: 999px;
  background: var(--yellow); color: #1a1a1a; font-weight: 800; font-size: 1.05rem; text-decoration: none;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
  transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.nx-band-btn:hover { transform: translateY(-3px); background: #fff; color: #7a2440; }

/* ---- FOOTER ---- */
/* public legal pages: marketing chrome around an app-styled document.
   The header starts full-size (120px logo) like the home page, so the document
   begins below it and the header collapses to the pill as you scroll. */
.nx-legal-main { padding: 9.5rem clamp(1.2rem, 4vw, 3rem) 5.5rem; }
/* the document, the main and the band each carried their own bottom spacing,
   which stacked into a ~180px void before the CTA band — keep only one */
.nx-legal-body .legal-wrap { margin-inline: auto; padding-bottom: 0; }
.nx-legal-body .nx-cta-band { margin-top: 0; }
@media (max-width: 760px) {
  /* phones: smaller logo up top, and the scrolled pill docks to the bottom */
  .nx-legal-main { padding: 6.5rem 1.1rem 3.5rem; }
}

/* ================= ABOUT PAGE =================
   The page is built from home's own components (.nx-sec, .nx-stag, .nx-sh,
   .nx-feat-grid, .nx-steps) — only the few pieces below are page-specific.
   The marketing layout already provides horizontal padding and the top offset
   for the fixed header, so .nx-sec keeps just the vertical rhythm here. */
.ab2 .nx-sec { padding: 5rem 0 0; scroll-margin-top: 0; }
.ab2 > .nx-sec:first-child { padding-top: 1.6rem; }

/* hero */
.ab2-hero { text-align: center; }
.ab2-cta { margin-top: 2.4rem; }
.ab-promise {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: .9rem 2rem; margin: 2.2rem 0 0; padding: 0;
}
.ab-promise li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 600; color: var(--muted);
}
.ab-promise li::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* celebration chips — the home tag pill, worn as a content chip */
.ab-typechips {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: .8rem; margin: 2.8rem auto 0; padding: 0; max-width: 880px;
}
.ab-typechips .nx-stag {
  text-transform: none; letter-spacing: 0;
  font-size: .88rem; font-weight: 700;
  padding: .5rem 1.15rem .5rem .55rem; cursor: default;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ab-typechips .nx-stag:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26, 26, 26, .14); }
.ab-typechips .is-soon { color: var(--muted); }
.ab-soon {
  font-style: normal; margin-left: .35rem;
  font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: var(--yellow); color: var(--ink); padding: 2px 7px; border-radius: 999px;
}

/* story — centred column, readable measure */
.ab-story { max-width: 66ch; margin: 2.4rem auto 0; }
.ab-story p { color: var(--muted); font-size: 1rem; line-height: 1.85; margin: 0 0 1.1rem; }
.ab-newnote {
  display: flex; align-items: flex-start; gap: .8rem;
  max-width: 66ch; margin: 1.6rem auto 0; padding: 1.2rem 1.4rem;
  border-radius: 18px; background: rgba(237, 95, 120, .06);
  font-size: .88rem; line-height: 1.75; color: var(--muted);
}
.ab-newdot {
  flex: none; width: 8px; height: 8px; margin-top: .55rem; border-radius: 50%;
  background: var(--rose); box-shadow: 0 0 0 4px rgba(237, 95, 120, .18);
}

/* contact cards */
.ab-mails {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  max-width: 720px; margin: 2.6rem auto 0;
}
.ab-mail {
  display: block; padding: 1.5rem 1.6rem; border-radius: 22px; text-decoration: none;
  background: #fff; border: 1.5px solid #e7e7ee; text-align: center;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ab-mail:hover { border-color: var(--rose); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(237, 95, 120, .14); }
.ab-mail b { display: block; font-size: .97rem; color: var(--ink); margin-bottom: .3rem; }
.ab-mail span { font-size: .89rem; color: var(--rose); font-weight: 700; }
.ab-fine { margin: 2rem auto 0; max-width: 66ch; text-align: center; font-size: .85rem; color: var(--muted); line-height: 1.75; }
.ab-fine a { color: var(--rose); font-weight: 600; }

@media (max-width: 760px) {
  .ab2 .nx-sec { padding-top: 3.6rem; }
  .ab-promise { gap: .7rem 1.4rem; }
  .ab-mails { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-typechips .nx-stag, .ab-mail { transition: none; }
}

/* ================= REPORT ABUSE PAGE ================= */
.rp-card {
  max-width: 760px; margin: 0 auto;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 26px;
  box-shadow: 0 18px 44px rgba(26, 26, 26, .08);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
}
.rp .nx-sec:last-child .nx-wrap { max-width: 1200px; }
/* honeypot lives off-screen, not display:none — some bots skip hidden inputs */
.rp-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; overflow: hidden; }
/* minmax(0,…) not a bare 1fr: a bare 1fr floors at min-content, so one long
   filename in the screenshot row would stretch every field in the form */
.rp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem 1.2rem; }
.rp-full { grid-column: 1 / -1; }
.rp-opt { font-size: .72rem; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin-left: .3rem; }
/* `.field label` in the form system is display:flex and outranks a bare
   `.rp-drop`, which turned both state rows into shrink-to-fit flex items —
   match that specificity so the drop zone is a plain block again */
.field .rp-drop {
  display: block; border: 1.5px dashed #d6d6de; border-radius: 16px;
  background: rgba(255, 255, 255, .6); cursor: pointer;
  padding: 1.1rem 1.2rem; margin: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field .rp-drop:hover { border-color: var(--rose); background: rgba(237, 95, 120, .04); }
.rp-drop-idle { display: flex; width: 100%; align-items: center; gap: .7rem; color: var(--muted); font-size: .88rem; }
.rp-drop-idle svg { flex: none; color: var(--rose); }
.rp-drop-has { display: flex; width: 100%; align-items: center; gap: .8rem; font-size: .86rem; color: var(--ink); font-weight: 600; }
/* an author `display` beats the UA rule for [hidden], so restate it — without
   this both the idle prompt and the preview render at the same time */
.rp-drop-idle[hidden], .rp-drop-has[hidden] { display: none; }
.rp-drop-has img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); flex: none; }
.rp-drop-has span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-shot-x {
  margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: #fdecec; color: #d23b52; border: 0; cursor: pointer;
}
.rp-submit { width: 100%; margin-top: 1.2rem; border: 0; cursor: pointer; }
.rp-note { margin: 1rem 0 0; text-align: center; font-size: .78rem; color: var(--faint); line-height: 1.6; }
/* success popup, shared by the contact and report-abuse forms */
.sent-body { text-align: center; padding: 2.6rem 2rem 2.2rem; }
.sent-ic {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  margin: 0 auto 1.2rem; background: var(--green-soft, #e2f6ec); color: var(--success, #2fbf71);
}
.sent-body h3 { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.5rem; margin-bottom: .5rem; }
.sent-body p { color: var(--muted); line-height: 1.7; margin-bottom: 1.6rem; }
.sent-btns { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.sent-btns .nx-pill-dark { min-height: 44px; padding: 0 1.5rem; font-size: .9rem; }
.sent-btns .btn { min-height: 44px; }
@media (max-width: 640px) {
  .rp-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ================= CONTACT PAGE ================= */
.ct-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 1.6rem; align-items: start; }
.ct .rp-card { max-width: none; margin: 0; }
.ct-side { display: grid; gap: 1rem; }
.ct-mail {
  display: block; padding: 1.4rem 1.5rem; border-radius: 22px; text-decoration: none;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 12px 30px rgba(26, 26, 26, .06);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.ct-mail:hover { transform: translateY(-3px); border-color: var(--rose); box-shadow: 0 16px 36px rgba(237, 95, 120, .16); }
.ct-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; margin-bottom: .9rem; }
.ct-ic svg { width: 22px; height: 22px; }
.ct-ic-rose { background: var(--rose); }
.ct-ic-teal { background: #3e948c; }
.ct-mail b { display: block; font-size: 1rem; color: var(--ink); margin-bottom: .3rem; }
.ct-sub { display: block; font-size: .84rem; color: var(--muted); line-height: 1.6; margin-bottom: .7rem; }
.ct-addr { display: block; font-size: .88rem; font-weight: 700; color: var(--rose); overflow-wrap: anywhere; }
.ct-note {
  padding: 1.2rem 1.3rem; border-radius: 18px;
  background: rgba(255, 209, 89, .16); border: 1px solid rgba(224, 162, 50, .3);
}
.ct-note b { display: block; font-size: .9rem; color: var(--ink); margin-bottom: .25rem; }
.ct-note span { font-size: .84rem; color: var(--muted); line-height: 1.6; }
.ct-note a { color: var(--rose); font-weight: 700; }
@media (max-width: 900px) {
  .ct-wrap { grid-template-columns: minmax(0, 1fr); }
}



.nx-foot { background: #fff; border-top: 1px solid var(--line); padding: 4.5rem clamp(1.2rem, 4vw, 3rem) 0; }
.nx-foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 3rem;
}
.nx-foot-brand p { color: var(--muted); font-size: .93rem; line-height: 1.65; margin: 1.1rem 0 1.3rem; max-width: 40ch; }
.nx-socials { display: flex; gap: .6rem; }
.nx-socials a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: #f4f2f7; color: #55555e;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.nx-socials a:hover { background: var(--rose); color: #fff; transform: translateY(-2px); }
.nx-foot-col { display: flex; flex-direction: column; gap: .55rem; }
.nx-foot-col b { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1rem; margin-bottom: .45rem; }
.nx-foot-col a { text-decoration: none; color: var(--muted); font-size: .92rem; transition: color .18s var(--ease); }
.nx-foot-col a:hover { color: var(--rose); }
/* ==== FOOTER PILL TUMBLER (removable block) ==== */
.nx-foot { position: relative; }
.nx-tumbler { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.nx-tpill {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: grab;
  display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; border: 1px solid var(--line); color: #3a3a42;
  font: 700 .8rem 'Plus Jakarta Sans', sans-serif; white-space: nowrap;
  padding: .55rem 1.05rem; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(26, 26, 26, .12);
  will-change: transform; user-select: none; -webkit-user-select: none; touch-action: none;
}
.nx-tpill:active { cursor: grabbing; }
.nx-tpill svg { flex: none; }
@media (max-width: 899px) { .nx-tumbler { display: none; } }
/* ==== /FOOTER PILL TUMBLER ==== */

/* ---- COOKIE CONSENT (bottom-left, two-step, dark-flip aware) ---- */
.nx-cookie {
  position: fixed; left: 18px; bottom: 18px; z-index: 260;
  width: min(400px, calc(100vw - 36px));
  background: rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 24px;
  padding: 1.35rem 1.4rem;
  box-shadow: 0 22px 55px rgba(26, 26, 26, .2);
  color: var(--ink);
  animation: nxCkIn .45s var(--ease) both;
  transition: background .7s var(--ease), color .7s var(--ease), border-color .7s var(--ease),
              bottom .3s var(--ease);
}
.nx-cookie[hidden] { display: none; }
.nx-cookie.bye { animation: nxCkOut .38s var(--ease) both; }
/* the box is fixed bottom-left, so it sits on top of the footer's link columns
   and swallows taps meant for them — step aside while the footer is on screen
   and come back when the reader scrolls up */
.nx-cookie.ck-away {
  transform: translateY(calc(100% + 32px)); opacity: 0; pointer-events: none;
  transition: transform .35s var(--ease), opacity .3s var(--ease);
}
@keyframes nxCkIn { from { opacity: 0; transform: translateY(24px); } }
@keyframes nxCkOut { to { opacity: 0; transform: translateY(24px); } }
.nx-ck-title { display: block; font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.2rem; margin-bottom: .55rem; }
.nx-ck-p { font-size: .86rem; color: var(--muted); line-height: 1.6; margin: 0 0 1rem; transition: color .7s var(--ease); }
.nx-ck-p a { color: var(--rose); font-weight: 600; }
.nx-ck-row { display: flex; gap: .55rem; margin-top: .55rem; }
.nx-ck-row .nx-ck-btn { flex: 1; }
.nx-ck-btn {
  display: block; width: 100%; cursor: pointer; border-radius: 999px; min-height: 44px;
  font: 700 .86rem 'Plus Jakarta Sans', sans-serif;
  transition: transform .16s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nx-ck-btn:hover { transform: translateY(-1px); }
.ck-line { background: transparent; border: 1.5px solid #cfcfd8; color: var(--ink); }
.ck-line:hover { border-color: var(--ink); }
.ck-solid { background: var(--ink); border: 1.5px solid var(--ink); color: #fff; }
.ck-solid:hover { background: var(--rose); border-color: var(--rose); }
/* category rows + switches */
.nx-ck-cat {
  display: flex; align-items: center; gap: .7rem;
  background: rgba(255, 255, 255, .85);
  border: 1px solid #e4e2ea; border-radius: 16px;
  padding: .75rem .95rem; margin-bottom: .55rem;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background .7s var(--ease);
}
.nx-ck-cat:first-of-type { cursor: default; }
.nx-ck-cat-txt { flex: 1; }
.nx-ck-cat-txt b { display: block; font-size: .9rem; }
.nx-ck-cat-txt span { font-size: .76rem; color: var(--muted); transition: color .7s var(--ease); }
.nx-ck-req { font-size: .74rem; font-weight: 700; color: var(--muted); transition: color .7s var(--ease); }
.nx-sw { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; cursor: pointer; }
.nx-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.nx-sw i {
  position: absolute; inset: 0; border-radius: 999px; background: #cfcfd8;
  transition: background .2s var(--ease);
}
.nx-sw i::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  transition: transform .22s var(--ease);
}
.nx-sw input:checked + i { background: var(--ink); }
.nx-sw input:checked + i::after { transform: translateX(18px); }
.nx-sw input:disabled + i { opacity: .85; cursor: default; }
#nx-ck-panel .ck-solid { margin-top: .5rem; }
/* dark-flip: the box follows the page into night mode */
body.nx-dark .nx-cookie { background: rgba(23, 25, 31, .82); border-color: rgba(255, 255, 255, .12); color: #eef0f5; }
body.nx-dark .nx-ck-p, body.nx-dark .nx-ck-cat-txt span, body.nx-dark .nx-ck-req { color: #a7abb8; }
body.nx-dark .ck-line { border-color: #3a3f4c; color: #eef0f5; }
body.nx-dark .ck-line:hover { border-color: #eef0f5; }
body.nx-dark .ck-solid { background: #fff; border-color: #fff; color: #1a1a1a; }
body.nx-dark .ck-solid:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
body.nx-dark .nx-ck-cat { background: rgba(35, 39, 48, .8); border-color: rgba(255, 255, 255, .1); }
body.nx-dark .nx-sw i { background: #3a3f4c; }
body.nx-dark .nx-sw input:checked + i { background: #fff; }
body.nx-dark .nx-sw input:checked + i::after { background: #1a1a1a; }
@media (max-width: 760px) {
  /* the box rides 12px above whatever the bottom bar is doing right now */
  .nx-cookie { bottom: 116px; left: 12px; width: calc(100vw - 24px); }        /* pill showing: 12 + 92 + 12 */
  body:not(:has(#nx-head.pill)) .nx-cookie { bottom: 12px; }                  /* top of page: no bar */
  body:has(#nx-head.pill.mini) .nx-cookie { bottom: 97px; }                   /* shrunken bar: 8 + 77 + 12 */
}

.nx-foot-bot {
  border-top: 1px solid var(--line);
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  padding: 1.4rem 0 1.6rem;
  color: var(--muted); font-size: .85rem;
}
.nx-foot-love { display: inline-flex; align-items: center; gap: .35rem; }
.nx-love-heart { animation: nxLovePulse 1.4s ease-in-out infinite; transform-origin: center; }
@keyframes nxLovePulse { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.35); } 45% { transform: scale(1.05); } 60% { transform: scale(1.25); } }

/* ============================================================
   TABLETS (761–1120px) — wider boxes so content breathes
   ============================================================ */
@media (min-width: 761px) and (max-width: 1120px) {
  /* one uniform, generous width for every box on tablets */
  .nx-b1, .nx-b2, .nx-b3, .nx-b4, .nx-b5, .nx-b6, .nx-b7, .nx-b8 { width: min(76vw, 620px); }
  .nx-bbtn { white-space: nowrap; }
  .nxb-cd { gap: .45rem; }
  .nxb-cd .cdt { min-width: 66px; padding: 1rem .7rem .8rem; border-radius: 16px; }
  .nxb-cd .cdt b { font-size: 1.9rem; }
  /* birthday pills: smaller, ~3 per row, all visible */
  .nxb-pills { gap: .55rem .6rem; padding: .5rem .2rem; }
  .nxb-pills i { font-size: .72rem; padding: .42rem .75rem; gap: .35rem; }
  .nxb-pills i svg { width: 12px; height: 12px; }
  /* anniversary: smaller deck so the button keeps its breathing room */
  .nxb-deck { width: min(200px, 64%); height: 134px; margin: .6rem auto 2rem; }
}

/* ============================================================
   PHONES — native swipe strip, stacked layouts
   ============================================================ */
@media (max-width: 760px) {
  .nx-nav { display: none; }
  .nx-head { grid-template-columns: auto 1fr; }
  .nx-logo-full { height: 76px; }
  .nx-head.pill { max-width: calc(100vw - 1.4rem); padding-left: .8rem; }

  /* full header (logo + button) stays at the top; only the scrolled
     sticky pill docks to the bottom, app-style */
  body { padding-bottom: 86px; }
  .nx-head.pill {
    top: auto; bottom: 12px; animation: nxBarUp .35s var(--ease);
    transform-origin: 50% 100%;
    transition: transform .3s var(--ease), bottom .3s var(--ease);
  }
  .nx-head.pill.mini { transform: scale(.84); bottom: 8px; }
  @keyframes nxBarUp { from { transform: translateY(16px); opacity: .4; } }

  .nx-banner { padding: 11rem 1.2rem 2rem; }
  /* feature row: two centred lines, no wrapping inside an item */
  .nx-feats { gap: .8rem .9rem; margin-top: 44px; }
  .nx-feats li { font-size: .76rem; gap: .38rem; white-space: nowrap; }
  .nx-feat-ic { width: 24px; height: 24px; }
  .nx-feat-ic svg { width: 13px; height: 13px; }

  .nx-stage { height: auto; }
  .nx-pin { position: static; height: auto; overflow: visible; padding-bottom: 0; align-items: stretch; }
  .nx-strip {
    transform: none !important; height: auto; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: .75rem; padding: 0 38px 1rem;
  }
  /* centre-mode carousel: one near-full card with slivers of its neighbours */
  .nx-block { scroll-snap-align: center; min-height: 460px; }
  .nx-b1, .nx-b2, .nx-b3, .nx-b4, .nx-b5, .nx-b6, .nx-b7, .nx-b8 { width: calc(100vw - 76px); }
  .nx-b1, .nx-b8 { flex-direction: column; }
  .nx-b1 .nxb-img, .nx-b8 .nxb-img { order: -1; min-height: 160px; max-height: 180px; }
  /* banner: keep "made + typing word" on one line */
  .nx-banner h1 { font-size: clamp(1.5rem, 8.2vw, 2rem); }
  /* birthday: tighter centred copy + pills as two endless slide rows */
  .nx-b3 h2.nxb-center { font-size: 1.55rem; }
  .nx-b3 p.nxb-center-p { font-size: 1rem; text-align: center; }
  .nxb-pills-2row {
    flex: none; display: flex; flex-direction: column; align-content: unset;
    gap: 1rem; padding: .8rem 0 1.2rem;             /* room below so pill shadows aren't cut */
    margin: .2rem -1.7rem 0;                        /* bleed edge-to-edge of the box */
    width: calc(100% + 3.4rem); overflow: hidden;
  }
  .nxb-pill-row { display: flex; gap: .6rem; width: max-content; animation: nxMq 22s linear infinite; }
  .nxb-pill-row.rev { animation-direction: reverse; }
  .nxb-pills-2row i { --r: 0deg; font-size: .78rem; padding: .5rem .9rem; flex: none; }
  /* birthday CTA moves to the bottom like every other box */
  .nx-b3 .nxb-toprow { display: contents; }
  .nx-b3 .nxb-btn-top { order: 99; margin-top: auto; align-self: center; white-space: nowrap; }
  /* countdown tiles: compact so all four fit */
  .nxb-cd { gap: .4rem; }
  .nxb-cd .cdt { min-width: 58px; padding: .85rem .5rem .7rem; border-radius: 14px; }
  .nxb-cd .cdt b { font-size: 1.6rem; }
  .nxb-cd .cdt span { font-size: .62rem; }
  .nxb-top { flex-direction: column; }

  .nx-sec { padding-top: 4rem; padding-bottom: 4rem; }
  .nx-feat-grid { grid-template-columns: 1fr 1fr; }
  .ft-sp2 { grid-column: span 2; }
  .nx-dm-panel { grid-template-columns: 1fr; }
  .nx-sh-left, .nx-ssub-left { text-align: center; }
  .nx-dm-left { text-align: center; }
  .nx-steps { grid-template-columns: 1fr; gap: 2.2rem; }
  .nx-step-arrow { display: none; }
  .nx-tst { width: 300px; }
  /* cta band: smaller heading so any rotating word keeps the same line count */
  .nx-sh-band { font-size: clamp(1.4rem, 6vw, 1.7rem); }
  /* footer: centred brand block; events left, support + legal stacked on the right */
  .nx-foot-grid { grid-template-columns: 1fr 1fr; }
  .nx-foot-brand { grid-column: 1 / -1; text-align: center; }
  .nx-foot-brand img { margin: 0 auto; }
  .nx-foot-brand p { margin-left: auto; margin-right: auto; }
  .nx-socials { justify-content: center; }
  .nx-foot-grid nav[aria-label="Events"] { grid-column: 1; grid-row: 2 / span 2; }
  .nx-foot-grid nav[aria-label="Support"] { grid-column: 2; grid-row: 2; }
  .nx-foot-grid nav[aria-label="Legal"] { grid-column: 2; grid-row: 3; }
  .nx-foot-bot { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 480px) {
  .nx-feat-grid { grid-template-columns: 1fr; }
  .ft-sp2 { grid-column: auto; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bgcolor-wrapper i, .nx-pill-dark::after, .nx-logo-mini, .nx-caret, .nx-logo-full,
  .nxb-mini, .nx-eng-spark, .nx-heart, .nxb-bap circle, .nxb-bap path, .nxb-pills i,
  .nxb-waves .wv, .nx-confetti, .nx-cta-arrow, .nx-cta-txt, .nx-mq-track,
  .nx-step-arrow .ch, .nx-love-heart, .nxb-pills-mq { animation: none !important; }
  .nx-step-arrow .ch { opacity: .6; }
  .dm-fcaret { display: none; }
  .nx-marquee { overflow-x: auto; }
  /* SMIL route animation on the housewarming map: hide the moving dot */
  .nx-hw-dot { display: none; }
  /* without the draw animation the strokes must simply be visible */
  .nxb-bap circle, .nxb-bap path { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
}