/* Shared by the landing page and the Masquerade page. Moved out of
   Landing.html (Oct 2026) so both pages use one stylesheet. */
    :root {
      --noir: #0B0A0C;
      --noir-soft: #100E11;
      --emerald: #0F241C;
      --emerald-soft: #152E23;
      --gold: #C7A65C;
      --gold-bright: #E4C687;
      --gold-dim: #7C6636;
      --silver: #A6ABB1;
      --silver-bright: #D4D7DB;
      --silver-dim: #5E6267;
      --bordeaux: #4E1220;
      --bordeaux-bright: #711A2E;
      /* readable accents (same meaning as the app): wine = desire, forest = trust */
      --wine: #6B1A30;
      --wine-bright: #B0445F;
      --wine-soft: rgba(176, 68, 95, 0.16);
      --forest: #1E4A38;
      --forest-bright: #4E9C79;
      --forest-soft: rgba(62, 138, 104, 0.14);
      --cream: #F2ECDF;
      --smoke: #B0A797;
      --smoke-dim: #968D7F;
      --line: rgba(199, 166, 92, 0.14);
      --line-strong: rgba(199, 166, 92, 0.30);
      --font-family-indivisible: garamond-premier-pro-display, serif;
      --font-serif: var(--font-family-indivisible);
      --font-display: the-seasons, sans-serif;
      --font-header: elina-decor, sans-serif;
      /* Plain text is Garamond; Elina is a decorative script, kept only
         for signatures (--font-script). */
      --font-sans: var(--font-serif);
      --font-script: elina, cursive;
      /* shared finishes (Oct 2026): one gold for highlighted words, one for
         filled buttons, and the paper and wax of the invitations */
      --gold-text: linear-gradient(100deg, #f3e2b0, var(--gold-bright) 35%, var(--gold) 70%, #a8884a);
      --gold-fill: linear-gradient(117.7deg, var(--gold) 0%, var(--gold-bright) 100%);
      --paper: radial-gradient(ellipse at 50% 0%, #fbf6ec, #efe5d3 70%, #e6d9c2);
      --paper-ink: #3a2a24;
      --paper-label: #6b4a1e;
      --paper-rule: #9c7834;
      --wax: radial-gradient(circle at 38% 32%, #9a2a45, #5a1326 62%, #3d0c19);
      --font-mono: var(--font-serif);
      
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    h3 {
      margin: 0;

      color: var(--cream);
      font-family: var(--font-sans);
      font-style: normal;
      font-size: 15px;
      line-height: 1.6;
  
    }

    body {
      margin: 0;
      background: var(--noir);
      color: var(--cream);
      font-family: var(--font-serif);
      font-style: normal;
      font-size: 17px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    h1 {
      font-family: var(--font-serif);
      font-style: normal;
      font-weight: 400;
      margin: 0;
      letter-spacing: -0.01em;
    }

    h2{

      font-family: var(--font-sans);
      font-style: normal;
      font-weight: 300;
      margin: 0;
      letter-spacing: -0.01em;
    }
    h3 {
      font-family: var(--font-sans);
      font-style: normal;
      font-weight: 400;
      margin: 0;
      letter-spacing: -0.01em;
    }

    p {
      margin: 0;
      font-family: var(--font-serif);
      font-weight: 400;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    button {
      font-family: inherit;
      background: none;
      border: none;
      color: inherit;
      cursor: pointer;
    }

    ::selection {
      background: var(--gold-dim);
      color: var(--noir);
    }

    .container {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .eyebrow {
      font-family: var(--font-serif);
      font-size: 12.5px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      font-weight: 500;
    }

    .rule {
      width: 40px;
      height: 1px;
      background: var(--gold-dim);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 15px 32px;
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-weight: 500;
      border: 1px solid var(--gold);
      border-radius: 999px;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transition: transform .4s cubic-bezier(.2, .7, .2, 1), background .4s ease, border-color .4s ease, color .4s ease;
    }

    .btn::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, 0.18) 48%, transparent 76%);
      transform: translateX(-120%);
      transition: transform .75s cubic-bezier(.2, .7, .2, 1);
    }

    .btn:hover::before {
      transform: translateX(120%);
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn-gold {
      background: var(--gold-fill);
      color: var(--noir);
    }

    /* gold at rest, deep wine on hover */
    .btn-gold:hover,
    .btn-gold:focus-visible {
      background: linear-gradient(117.7deg, var(--wine-bright) 0%, var(--wine) 100%);
      border-color: var(--wine-bright);
      color: var(--cream);
    }

    .btn-line {
      background: transparent;
      color: var(--cream);
      border-color: var(--line-strong);
    }

    .btn-line:hover {
      border-color: var(--gold);
      color: var(--gold-bright);
    }

    .luxury-divider {
      display: flex;
      align-items: center;
      gap: 22px;
      max-width: 1240px;
      margin: 0 auto;
      padding: 15px 40px;
      opacity: 0.8;
    }

    .luxury-divider span {
      height: 1px;
      flex: 1;
      background: linear-gradient(90deg, transparent, var(--line-strong));
    }

    .luxury-divider span:last-child {
      background: linear-gradient(90deg, var(--line-strong), transparent);
    }

    /* the Fantasi emblem as a shape that takes the colour it's given
       (currentColor), so it can be gold, cream, or pressed into wax */
    .fz-emblem {
      display: block; width: 100%; height: 100%; background: currentColor;
      -webkit-mask: url(/LandingPage/videos/fantasi-emblem-sm.webp?v=2) center / contain no-repeat;
      mask: url(/LandingPage/videos/fantasi-emblem-sm.webp?v=2) center / contain no-repeat;
    }

    .divider-mark {
      width: 34px;
      height: 34px;
      padding: 5px;
      box-sizing: border-box;
      border: 1px solid var(--line-strong);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-serif);
      font-weight: 500;
      color: var(--gold);
      font-size: 15px;
    }

    /* ---------------- preloader: black screen with the emblem, first visit ---------------- */
    .preloader {
      position: fixed; inset: 0; z-index: 1000000; background: #0B0A0C;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
      transition: opacity .9s ease, visibility 0s linear .9s;
      /* if the script never runs, it still lifts itself */
      animation: preloaderFallback .9s ease 6s forwards;
    }
    .preloader.is-done { opacity: 0; visibility: hidden; animation: none; }
    html.fz-seen .preloader { display: none; }
    @keyframes preloaderFallback { to { opacity: 0; visibility: hidden; } }
    .preloader-mark {
      position: relative; width: min(210px, 36vw); aspect-ratio: 1;
      animation: preloaderIn 1.2s cubic-bezier(.2, .7, .2, 1) both, preloaderBreathe 3.2s ease-in-out 1.2s infinite;
    }
    .preloader-mark img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 30px rgba(199, 166, 92, 0.25)); }
    .preloader-sheen {
      position: absolute; inset: 0;
      background: linear-gradient(105deg, transparent 38%, rgba(255, 248, 226, 0.85) 50%, transparent 62%);
      background-size: 300% 100%; background-position: 130% 0;
      -webkit-mask: url(/LandingPage/videos/fantasi-emblem.webp?v=2) center / contain no-repeat; mask: url(/LandingPage/videos/fantasi-emblem.webp?v=2) center / contain no-repeat;
      mix-blend-mode: soft-light; animation: logoSheen 2.4s ease-in-out .6s infinite;
    }
    .preloader-line { display: block; width: 120px; height: 1px; background: rgba(199, 166, 92, 0.18); overflow: hidden; }
    .preloader-line i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--gold-bright), transparent); animation: preloaderLine 1.4s ease-in-out infinite; }
    @keyframes preloaderIn { from { opacity: 0; transform: scale(.9); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
    @keyframes preloaderBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
    @keyframes preloaderLine { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
    @media (prefers-reduced-motion: reduce) {
      .preloader-mark, .preloader-sheen, .preloader-line i { animation: none; }
    }

    /* ---------------- atmosphere: grain, ambient glow, scroll progress ---------------- */
    .luxury-grain {
      position: fixed;
      inset: 0;
      z-index: 9990;
      pointer-events: none;
      opacity: 0.045;
      mix-blend-mode: soft-light;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    }

    .ambient-light {
      position: fixed;
      width: 420px;
      height: 420px;
      left: 0;
      top: 0;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 9991;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(199, 166, 92, 0.075) 0%, rgba(199, 166, 92, 0.025) 30%, transparent 70%);
      mix-blend-mode: screen;
      opacity: 0;
      transition: opacity .5s ease;
    }

    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      z-index: 10001;
      background: rgba(199, 166, 92, 0.05);
    }

    .scroll-progress span {
      display: block;
      width: 0%;
      height: 100%;
      background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
      box-shadow: 0 0 12px rgba(199, 166, 92, 0.45);
    }

    /* ---------------- custom cursor ---------------- */
    /* Hidden by default so touch screens, where the rules below don't apply,
       never show the label as bare "View" text at the top of the page. */
    #cursor-dot,
    #cursor-ring,
    #cursor-label {
      display: none;
    }

    @media (hover:hover) and (pointer:fine) {
      body {
        cursor: none;
      }

      #cursor-dot,
      #cursor-ring,
      #cursor-label {
        display: block;
      }

      #cursor-dot,
      #cursor-ring {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        /* Must stay above every overlay on the page (mobile nav, etc. — see
           .scroll-progress) or it gets covered whenever one opens, and since
           `cursor:none` above also hides the real OS pointer, the cursor
           visually disappears. */
        z-index: 10050;
        transform: translate(-50%, -50%);
        border-radius: 50%;
      }

      #cursor-dot {
        width: 7px;
        height: 7px;
        background: var(--gold);
        /* dark halo so the gold dot still reads against light or busy
           (photo/video) backgrounds, not just the near-black sections */
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
        transition: opacity .2s;
      }

      #cursor-ring {
        width: 36px;
        height: 36px;
        border: 1.5px solid var(--gold);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
        transition: width .25s ease, height .25s ease, opacity .25s ease, background .25s ease;
        opacity: 0.75;
      }

      #cursor-ring.active {
        width: 64px;
        height: 64px;
        background: rgba(199, 166, 92, 0.08);
        opacity: 1;
      }

      #cursor-label {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 10050;
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--noir);
        background: var(--gold);
        padding: 5px 10px;
        border-radius: 20px;
        opacity: 0;
        transition: opacity .2s ease;
        white-space: nowrap;
        transform: translate(-50%, 22px);
      }

      #cursor-label.active {
        opacity: 1;
      }
    }

    /* ---------------- nav ---------------- */
    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 28px 0;
    }

    header .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 20px;
    }

    .signet {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      margin-left: -4px;
    }

    .signet svg {
      width: 52px;
      height: 52px;
      transition: width .5s cubic-bezier(.4, 0, .2, 1), height .5s cubic-bezier(.4, 0, .2, 1);
    }

    .signet-logo {
      height: 75px;
      width: auto;
      display: block;
      transition: height .5s cubic-bezier(.4, 0, .2, 1);
      /* a lighter version of the hero's struck-metal edge */
      filter: drop-shadow(0 0.75px 0 #5a4219) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
    }

    

    header.scrolled .signet svg {
      width: 56px;
      height: 56px;
    }

    header.scrolled .signet-logo {
      height: 76px;
    }

    

    .nav-links {
      display: flex;
      gap: 40px;
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      transition: opacity .6s ease;
    }

    .nav-links a:hover {
      color: var(--gold-bright);
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 20px;
      transition: opacity .6s ease;
    }

    .nav-cta .btn-gold { padding: 12px 26px; }
    .nav-cta .cta-short { display: none; }

    .nav-cta .sign-in {
      font-size: 12px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .nav-cta .sign-in:hover {
      color: var(--gold-bright);
    }

    header.scrolled {
      background: rgba(11, 10, 12, 0.86);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
    }

    header.scrolled .nav-links,
    header.scrolled .nav-cta {
      opacity: 1;
      pointer-events: auto;
    }

    /* ---------------- mobile nav (hamburger + slide-in drawer) ---------------- */
    .mobile-nav-toggle {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      gap: 5px;
      width: 30px;
      height: 26px;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity .6s ease;
      position: relative;
      z-index: 9997;
    }
    /* three gold strokes of staggered length, like a signature underline;
       they even out on hover and fold into an X when the drawer is open */
    .mobile-nav-toggle span {
      display: block;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--gold-bright), var(--gold) 70%, var(--gold-dim));
      box-shadow: 0 0 6px rgba(228, 198, 135, 0.25);
      transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, width .35s cubic-bezier(.4, 0, .2, 1);
    }
    .mobile-nav-toggle span:nth-child(2) { width: 58%; }
    .mobile-nav-toggle span:nth-child(3) { width: 80%; }
    .mobile-nav-toggle:hover span,
    .mobile-nav-toggle:focus-visible span,
    .mobile-nav-toggle.open span { width: 100%; }
    .mobile-nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-nav-toggle.open span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
    .mobile-nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    header.scrolled .mobile-nav-toggle { opacity: 1; pointer-events: auto; }

    /* Full-screen menu of tiles (Oct 2026), opened by the hamburger below
       900px. Each tile is a translucent tint over black (wine, forest, gold,
       plum) rather than a solid colour, so the panel stays calm on a phone. */
    .mobile-nav-backdrop { display: none; }
    .mobile-nav-drawer {
      position: fixed; inset: 0; z-index: 9996;
      display: flex; flex-direction: column; gap: 18px;
      padding: 84px 16px 28px; overflow-y: auto; overscroll-behavior: contain;
      background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(107, 26, 48, 0.22), transparent 70%), var(--noir);
      opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
    }
    .mobile-nav-drawer.open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
    .mn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .mn-tile {
      position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
      min-height: 112px; padding: 18px 18px 16px; border-radius: 16px; overflow: hidden;
      color: var(--cream); text-decoration: none;
      background: linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      opacity: 0; transform: translateY(14px);
    }
    .mobile-nav-drawer.open .mn-tile { animation: mnIn .5s cubic-bezier(.2, .8, .2, 1) forwards; }
    .mobile-nav-drawer.open .mn-tile:nth-child(2) { animation-delay: .05s; }
    .mobile-nav-drawer.open .mn-tile:nth-child(3) { animation-delay: .1s; }
    .mobile-nav-drawer.open .mn-tile:nth-child(4) { animation-delay: .15s; }
    .mobile-nav-drawer.open .mn-tile:nth-child(5) { animation-delay: .2s; }
    .mobile-nav-drawer.open .mn-tile:nth-child(6) { animation-delay: .25s; }
    @keyframes mnIn { to { opacity: 1; transform: none; } }
    .mn-wide { grid-column: 1 / -1; min-height: 104px; }
    .mn-tile svg { width: 26px; height: 26px; color: var(--gold); }
    .mn-tile span { font-family: var(--font-serif); font-size: 19px; line-height: 1.15; }
    .mn-tile small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); }
    .mn-wine { background: linear-gradient(150deg, rgba(107, 26, 48, 0.62), rgba(78, 18, 32, 0.22)); box-shadow: inset 0 0 0 1px rgba(176, 68, 95, 0.34); }
    .mn-wine svg { color: #e59bb0; }
    .mn-forest { background: linear-gradient(150deg, rgba(30, 74, 56, 0.6), rgba(30, 74, 56, 0.18)); box-shadow: inset 0 0 0 1px rgba(78, 156, 121, 0.3); }
    .mn-forest svg { color: #8fd0b1; }
    .mn-gold { background: linear-gradient(150deg, rgba(199, 166, 92, 0.3), rgba(199, 166, 92, 0.06)); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.45); }
    .mn-gold svg { color: var(--gold-bright); }
    .mn-plum { background: linear-gradient(150deg, rgba(74, 44, 82, 0.55), rgba(74, 44, 82, 0.16)); box-shadow: inset 0 0 0 1px rgba(160, 120, 175, 0.26); }
    .mn-plum svg { color: #c9a8d6; }
    .mn-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: auto; padding-top: 4px; }
    .mn-actions .btn { width: 100%; padding: 15px 10px; font-size: 11px; }
    body.mobile-nav-open { overflow: hidden; }
    @media (prefers-reduced-motion: reduce) {
      .mobile-nav-drawer.open .mn-tile { animation: none; opacity: 1; transform: none; }
    }

    /* ---------------- hero ---------------- */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 640px;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .hero-media {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        radial-gradient(ellipse 70% 60% at 30% 20%, rgba(78, 18, 32, 0.55), transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(199, 166, 92, 0.14), transparent 65%),
        linear-gradient(160deg, #17110E 0%, #0B0A0C 55%, #0F241C 130%);
      background-size: 180% 180%;
      animation: heroDrift 22s ease-in-out infinite alternate;
    }

    /* HERO VIDEO SLOT — point the <source> at your own footage when ready. Recommended 1920x1080+. */
    .hero-media__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 0;
      animation: cinematicZoom 18s ease-in-out infinite alternate;
      filter: saturate(0.82) contrast(1.08) brightness(0.72);
    }

    @keyframes cinematicZoom {
      0% {
        transform: scale(1);
      }

      100% {
        transform: scale(1.065);
      }
    }

    @keyframes heroDrift {
      0% {
        background-position: 0% 20%;
      }

      100% {
        background-position: 100% 80%;
      }
    }

    .hero-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(11, 10, 12, 0.9) 0%, rgba(11, 10, 12, 0.2) 45%, rgba(11, 10, 12, 0.55) 100%);
    }

    

    .hero-inner {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      /* the brand sits in the lower middle of the frame, over the video,
         rather than filling it */
      padding-bottom: 17vh;
      box-sizing: border-box;
    }

    /* more specific than the phone .container rule, which resets padding */
    .hero .hero-inner { padding-bottom: 28vh; }

    /* the narrowest phones: keep the header's logo, Sign in and Apply on one row */
    @media (max-width: 360px) {
      header .signet-logo, header.scrolled .signet-logo { height: 42px; flex-shrink: 0; }
      header .signet { flex-shrink: 0; }
      .nav-cta { gap: 10px; }
      .nav-cta .btn-gold { padding: 9px 13px; font-size: 10.5px; letter-spacing: 0.06em; }
    }
    @media (max-width: 600px) {
      .hero .hero-inner { padding-bottom: 18vh; }
      .hero-logo-wrap { margin-bottom: 12px; }
    }

    .hero-copy {
      width: min(100%, 980px);
      position: relative;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .hero-copy::before {
      content: "";
      position: absolute;
      width: min(760px, 92vw);
      height: 320px;
      left: 50%;
      top: 52%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(199, 166, 92, 0.12), rgba(199, 166, 92, 0.06) 25%, rgba(199, 166, 92, 0.02) 48%, transparent 72%);
      pointer-events: none;
      z-index: -1;
      filter: blur(10px);
    }

    

    

    

    .hero-copy .eyebrow {
      opacity: 0;
      animation: heroFadeUp .9s ease .2s forwards;
    }

    /* the hero logo as struck metal: a hairline darker-gold edge below the
       letters (kept thin so the script stays fine), a soft cast shadow lifts them off the
       video, and a slow sheen crosses the gold (masked to the logo's own
       shape, so only the letters and ribbon catch the light) */
    .hero-logo-wrap {
      position: relative; display: block; width: min(340px, 60vw); margin: 0 auto 16px;
      opacity: 0; animation: heroFadeUp 1s ease .35s forwards;
    }
    .hero-logo {
      display: block; width: 100%; height: auto;
      filter:
        drop-shadow(0 0.6px 0 #4a3716)
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5))
        drop-shadow(0 20px 36px rgba(0, 0, 0, 0.3));
    }
    .hero-logo-wrap::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 222, 0.75) 48%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 246, 222, 0.75) 52%, transparent 62%);
      background-size: 300% 100%; background-position: 130% 0;
      -webkit-mask: url(/LandingPage/videos/fantasi-logo-gold-lg.webp?v=3) center / 100% 100% no-repeat;
      mask: url(/LandingPage/videos/fantasi-logo-gold-lg.webp?v=3) center / 100% 100% no-repeat;
      mix-blend-mode: soft-light;
      animation: logoSheen 7s ease-in-out 1.6s infinite;
    }
    @keyframes logoSheen {
      0% { background-position: 130% 0; }
      35%, 100% { background-position: -30% 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-logo-wrap::after { animation: none; opacity: 0; }
    }

    /* one refined line under the wordmark, like Seeking's tagline */
    .hero h1 {
      font-size: clamp(22px, 2vw, 30px);
      line-height: 1.25;
      letter-spacing: 0;
      color: #f5efe5;
      margin: 0 0 26px;
      opacity: 0;
      animation: heroFadeUp 1s ease .55s forwards;
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
      font-weight: 400;
      max-width: 980px;
    }

    .hero h1 em {
      font-style: italic;
      color: var(--wine-bright);
    }

    .hero-actions {
      display: flex;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      opacity: 0;
      animation: heroFadeUp 1s ease .8s forwards;
      margin-top: 8px;
    }

    .hero-actions .btn {
      padding: 13px 34px;
      font-size: 12.5px;
      letter-spacing: 0.18em;
      border-radius: 999px;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    }

    @keyframes heroFadeUp {
      from {
        opacity: 0;
        transform: translateY(18px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .scroll-cue {
      display: none;
    }

    /* ---------------- image slots ----------------
     Drop your own images in by replacing the src="" on the
     matching <img class="img-slot__img"> tag in the HTML below.
     Until an image is added, a placeholder frame + label is shown. */
    .img-slot {
      position: relative;
      overflow: hidden;
      background: var(--noir);
    }

    .img-slot__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .5s ease;
    }

    .img-slot__img[src]:not([src=""]) {
      opacity: 1;
    }

    .img-slot__placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      padding: 20px;
      background: linear-gradient(160deg, rgba(199, 166, 92, 0.06), transparent 60%);
    }

    .img-slot__img[src]:not([src=""])~.img-slot__placeholder {
      display: none;
    }

    .img-slot__placeholder .mark {
      width: 26px;
      height: 26px;
      border: 1px solid var(--line-strong);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gold-dim);
      font-size: 14px;
    }

    .img-slot__placeholder .lbl {
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--smoke-dim);
    }

    .img-slot__placeholder .dim {
      font-size: 9px;
      letter-spacing: 0.06em;
      color: var(--smoke-dim);
      opacity: .7;
    }

    /* ---------------- reveal on scroll ---------------- */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 1s cubic-bezier(.2, .6, .2, 1), transform 1s cubic-bezier(.2, .6, .2, 1);
    }

    .reveal.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-delay-1.in-view {
      transition-delay: .12s;
    }

    .reveal-delay-2.in-view {
      transition-delay: .24s;
    }

    .reveal-delay-3.in-view {
      transition-delay: .36s;
    }

    /* drop-in: falls from above and settles */
    .drop-in {
      opacity: 0;
      transform: translateY(-260px);
      transition: opacity .8s ease, transform 1.15s cubic-bezier(.22, 2.1, .5, 1);
    }

    .drop-in.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    

    /* ---------------- meeting point (background toast, center copy) ---------------- */
    .meeting {
      padding: 150px 0;
      position: relative;
      overflow: hidden;
    }

    .meeting .container {
      position: relative;
      z-index: 2;
    }

    .meeting-grid {
      display: flex;
      justify-content: center;
    }

    .meeting-copy {
      text-align: center;
      max-width: 600px;
    }

    .meeting-copy .eyebrow {
      display: block;
      margin-bottom: 18px;
    }

    .meeting-copy h2 {
      font-size: clamp(38px, 4.8vw, 68px);
      line-height: 1.05;
      color: var(--cream);
      margin-bottom: 26px;
    }

    .meeting-copy p {
      font-size: 18px;
      color: var(--smoke);
      line-height: 1.7;
      margin-top: 0;
    }

    .meeting-copy p + p {
      margin-top: 22px;
    }

    .meeting-copy .meeting-tagline {
      color: var(--cream);
    }

    .meeting-copy .btn {
      margin-top: 30px;
    }

    .meeting-legal {
      margin-top: 30px;
    }

    .meeting-legal p {
      font-family: var(--font-serif);
      font-size: 15.5px;
      font-weight: 600;
      line-height: 1.6;
      letter-spacing: 0.01em;
      color: var(--cream);
    }

    .meeting-legal p + p {
      margin-top: 18px;
    }

    .meeting-legal a {
      color: var(--cream);
      text-decoration: underline;
    }

    .meeting-legal a:hover {
      color: var(--gold-bright);
    }

    /* GLASSES — background layer, converges into a "clink" on scroll-into-view, then holds.
     Recommended: transparent PNG cutout, hand + champagne glass, ~500x500. */
    .toast-glass {
      position: absolute;
      top: 50%;
      z-index: 0;
      width: min(30vw, 340px);
      transition: transform 1.3s cubic-bezier(.22, 1.6, .4, 1), opacity .9s ease;
      opacity: 0;
      pointer-events: auto;
      /* ← was: pointer-events:none; */
    }

    /* the cut-outs sit on black; lighten drops that black into the tinted
       section background instead of showing it as a box */
    .toast-glass { mix-blend-mode: lighten; }

    .toast-glass .img-slot__img {
      position: static;
      opacity: 1;
      width: 100%;
      height: auto;
      object-fit: contain;
      filter: grayscale(100%);
      transition: filter .6s ease;
      /* ← both lines are new */
    }

    .toast-glass:hover .img-slot__img {
      filter: grayscale(0%);
    }

    /* ← entirely new rule */

    .toast-glass .img-slot__placeholder {
      position: relative;
      aspect-ratio: 1/1;
      background: none;
    }

    .toast-glass.left {
      left: 4%;
      transform: translate(-90px, -50%) rotate(-8deg);
    }

    .toast-glass.right {
      right: 4%;
      transform: translate(90px, -50%) rotate(8deg);
    }

    .toast-glass.in-view {
      opacity: 1;
    }

    .toast-glass.left.in-view {
      transform: translate(30px, -50%) rotate(-3deg);
    }

    .toast-glass.right.in-view {
      transform: translate(-30px, -50%) rotate(3deg);
    }

    /* ---------------- benefits (four points + portrait + closing statement) ---------------- */
    .benefits {
      padding: 130px 0;
      border-top: 1px solid var(--line);
    }

    .benefits-head {
      text-align: center;
      max-width: 640px;
      margin: 0 auto 70px;
    }

    .benefits-head .eyebrow {
      display: block;
      margin-bottom: 18px;
    }

    .benefits-head h2 {
      font-size: clamp(38px, 4.8vw, 68px);
      line-height: 1.05;
      color: var(--cream);
    }

    .benefits-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 70px;
      align-items: center;
    }

    .benefits-list {
      display: flex;
      flex-direction: column;
    }

    .benefit-item {
      padding: 26px 0;
      border-top: 1px solid var(--line);
    }

    .benefit-item:first-child {
      border-top: none;
      padding-top: 0;
    }

    .benefit-item h3 {
      font-family: var(--font-serif);
      font-size: 20px;
      font-weight: 500;
      color: var(--cream);
      margin-bottom: 10px;
    }

    .benefit-item p {
      font-size: 17.5px;
      color: var(--smoke);
      line-height: 1.8;
    }

    .benefits-img {
      aspect-ratio: 3/4;
      border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
    }

    .benefits-closing {
      text-align: center;
      max-width: 600px;
      margin: 80px auto 0;
      padding-top: 60px;
      border-top: 1px solid var(--line);
    }

    .benefits-closing .lead {
      font-family: var(--font-serif);
      font-style: normal;
      font-size: 18px;
      color: var(--cream);
      margin-bottom: 22px;
    }

    .benefits-closing h3 {
      font-size: clamp(24px, 2.8vw, 34px);
      color: var(--cream);
      line-height: 1.3;
      margin-bottom: 34px;
      font-family: var(--font-sans);
    }

    /* ---------------- values (sticky image + click-to-expand accordion) ---------------- */
    .values {
      padding: 130px 0;
      border-top: 1px solid var(--line);
    }

    .values-head {
      text-align: center;
      max-width: 600px;
      margin: 0 auto 70px;
    }

    .values-head .eyebrow {
      display: block;
      margin-bottom: 18px;
    }

    .values-head h2 {
      font-size: clamp(38px, 4.8vw, 68px);
      line-height: 1.05;
      color: var(--cream);
    }

    /* values carousel: slides share one grid cell and are placed by
       --offset (-2..2) from the centre; see Landing-3.js */
    .values-carousel {
      position: relative;
      outline: none;
    }

    .values-carousel:focus-visible {
      outline: 1px solid var(--gold-dim);
      outline-offset: 10px;
      border-radius: 18px;
    }

    .values-track {
      display: grid;
      justify-items: center;
      overflow: hidden;
      /* extra room above and below (pulled back with negative margins) so
         the rings' gold glow fades out instead of being cut off flat */
      padding: 100px 0 60px;
      margin: -70px 0 -50px;
      touch-action: pan-y;
      user-select: none;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    }

    .value-slide {
      --offset: 0;
      grid-area: 1 / 1;
      width: min(340px, 78vw);
      text-align: center;
      transform: translateX(calc(var(--offset) * 108%)) scale(var(--scale, 1));
      opacity: var(--opacity, 1);
      transition: transform 1s cubic-bezier(.22, .7, .2, 1), opacity 1s ease, filter 1s ease;
      filter: saturate(var(--sat, 1));
      cursor: pointer;
    }

    /* When it moves by itself, it drifts: a slow, lazy glide. Clicks and
       swipes keep the quicker timing above so the controls feel responsive. */
    .values-carousel.is-drifting .value-slide {
      transition: transform 1.6s cubic-bezier(.45, .05, .3, 1), opacity 1.6s ease, filter 1.6s ease;
    }

    .value-slide.is-center { cursor: default; }
    .value-slide.is-side { --scale: 0.84; --opacity: 0.55; --sat: 0.9; }
    .value-slide.is-away { --scale: 0.7; --opacity: 0; pointer-events: none; }

    .value-slide-photo {
      width: min(280px, 64vw);
      aspect-ratio: 1 / 1;
      margin: 0 auto 26px;
      border-radius: 50%;
      padding: 6px;
      /* the same gold as the gold headings, lit from the upper left */
      background: linear-gradient(135deg, #f3e2b0 0%, var(--gold-bright) 25%, var(--gold) 55%, #a8884a 80%, #f3e2b0 100%);
      box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 34px rgba(228,198,135,0.18);
      transition: box-shadow 1s ease;
    }

    .value-slide.is-center .value-slide-photo {
      box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 70px rgba(228,198,135,0.32), 0 0 18px rgba(243,226,176,0.35);
    }

    .value-slide-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      display: block;
      border: 3px solid var(--noir);
      pointer-events: none; /* no native image drag, so swipes aren't cancelled */
    }

    .value-slide-num {
      display: block;
      font-family: var(--font-serif);
      font-size: 11px;
      letter-spacing: 0.3em;
      color: var(--gold-dim);
      margin-bottom: 8px;
    }

    .value-slide-name {
      font-family: var(--font-serif);
      font-size: clamp(30px, 3.2vw, 38px);
      color: var(--cream);
      margin: 0 0 14px;
    }

    .value-slide p {
      font-size: 17px;
      color: var(--smoke);
      line-height: 1.8;
      margin: 0 auto;
      max-width: 34ch;
    }

    .values-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      margin-top: 34px;
    }

    .values-dots { display: flex; gap: 10px; }

    .values-dot {
      width: 8px;
      height: 8px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid var(--gold-dim);
      background: transparent;
      cursor: pointer;
      transition: width .4s ease, background .4s ease, border-color .4s ease;
    }

    .values-dot[aria-selected="true"] {
      width: 26px;
      background: var(--gold);
      border-color: var(--gold);
    }

    .values-dot:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

    @media (max-width: 760px) {
      .value-slide.is-side { --scale: 0.8; --opacity: 0.3; }
      .values-track { -webkit-mask-image: none; mask-image: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .value-slide { transition: opacity .3s ease; }
    }

    /* ---------------- how it works (editorial rows with UX mockups) ---------------- */
    .how {
      padding: 90px 0;
      border-top: 1px solid var(--line);
      background: var(--emerald);
      position: relative;
      overflow: hidden;
    }

    /* HOW-SECTION BACKGROUND IMAGE — recommended landscape, ~1800x1000. Replace src="" on the <img> below. */
    .how-media__picture {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 0;
      opacity: 0;
      transition: opacity .6s ease;
    }

    .how-media__picture[src]:not([src=""]) {
      opacity: 1;
    }

    .how::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      /* forest over the photo, easing back to the page black at both edges */
      background: linear-gradient(180deg, var(--noir) 0%, rgba(13, 28, 22, 0.94) 18%, rgba(15, 36, 28, 0.72) 50%, rgba(13, 28, 22, 0.94) 82%, var(--noir) 100%);
    }

    .how .container {
      position: relative;
      z-index: 2;
    }

    .how-head {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 40px;
      margin-bottom: 60px;
      position: relative;
    }

    .how-head .eyebrow {
      display: block;
      margin-bottom: 16px;
    }

    .how-head .rule {
      margin-bottom: 25px;
    }

    .how-head h2 {
      font-size: clamp(32px, 4vw, 54px);
      
      line-height: 1.05;
      position: relative;
      z-index: 1;
    }

    .how-head h2 em {
      font-style: italic;
      color: var(--gold-bright);
    }

    .how-head p {
      color: var(--smoke);
      font-size: 18px;
      max-width: 320px;
      text-align: right;
      line-height: 1.8;
    }

    .how-head-watermark {
      position: absolute;
      top: -40px;
      left: -24px;
      z-index: 0;
      width: 200px;
      height: 200px;
      opacity: 0.06;
      pointer-events: none;
    }

    .how-flow {
      display: flex;
      flex-direction: column;
      gap: 70px;
      position: relative;
    }

    .how-progress-line {
      position: absolute;
      left: calc((100% - 48px) * 0.475 + 24px);
      top: 0;
      bottom: 0;
      width: 1px;
      background: rgba(199, 166, 92, 0.08);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .how-progress-line span {
      display: block;
      width: 100%;
      height: 0%;
      background: linear-gradient(180deg, var(--gold), var(--gold-bright));
      box-shadow: 0 0 12px rgba(199, 166, 92, 0.3);
      transition: height .15s linear;
    }

    .how-row {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 48px;
      align-items: center;
    }

    .how-row.reverse .how-row-text {
      order: 2;
    }

    .how-row.reverse .how-row-mock {
      order: 1;
    }

    .how-row-text .step-num {
      font-family: var(--font-serif);
      font-weight: 500;
      font-size: 16px;
      color: var(--gold);
      display: block;
      margin-bottom: 20px;
    }

    .how-row-text h3 {
      font-family: var(--font-serif);
      font-size: 26px;
      font-weight: 500;
      color: var(--cream);
      margin-bottom: 16px;
      max-width: 400px;
    }

    .how-row-text p {
      font-size: 17.5px;
      color: var(--smoke);
      line-height: 1.85;
      max-width: 420px;
    }

    /* ---- shared mockup card shell ---- */
    .ux-card {
      background: var(--noir-soft);
      border: 1px solid var(--line-strong);
      border-radius: 3px;
      padding: 24px 26px;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
      position: relative;
      max-width: 420px;
      overflow: hidden;
      transform-style: preserve-3d;
      will-change: transform;
      transition: transform .5s cubic-bezier(.2, .6, .2, 1), box-shadow .5s ease;
    }

    .ux-card.tilting {
      transition: box-shadow .5s ease;
    }

    .ux-card:hover {
      box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
    }

    .ux-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 5;
      pointer-events: none;
      border-radius: inherit;
      background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(199, 166, 92, 0.14), transparent 55%);
      opacity: 0;
      transition: opacity .4s ease;
    }

    .ux-card:hover::after {
      opacity: 1;
    }

    .ux-card-label {
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--smoke-dim);
      margin-bottom: 22px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ux-card-label::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gold-dim);
    }

    /* ---- mockup 1: profile builder ---- */
    .ux-field {
      margin-bottom: 18px;
    }

    .ux-field .fld-label {
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--smoke-dim);
      display: block;
      margin-bottom: 7px;
    }

    .ux-field .fld-value {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 15px;
      color: var(--cream);
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ux-toggle-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 22px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }

    .ux-toggle-row span {
      font-size: 12px;
      color: var(--cream);
    }

    .ux-toggle {
      width: 36px;
      height: 19px;
      border-radius: 20px;
      background: var(--gold);
      position: relative;
      flex-shrink: 0;
    }

    .ux-toggle::after {
      content: "";
      position: absolute;
      top: 2px;
      right: 2px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: var(--noir);
    }

    /* ---- mockup 2: match + verification ---- */
    .ux-match {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .ux-avatar-mask {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
      background: linear-gradient(135deg, var(--emerald-soft), var(--noir));
    }

    .ux-verified-stamp {
      position: absolute;
      bottom: -4px;
      right: -4px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--gold);
      border: 2px solid var(--noir-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      transform: scale(0);
      transition: transform .6s cubic-bezier(.22, 1.9, .4, 1);
    }

    .ux-card.in-view .ux-verified-stamp {
      transform: scale(1);
    }

    .ux-match-name {
      font-family: var(--font-serif);
      font-style: italic;
      font-size: 17px;
      color: var(--cream);
    }

    .ux-match-meta {
      font-size: 11px;
      color: var(--smoke-dim);
      margin-top: 5px;
    }

    .ux-check-list {
      margin-top: 22px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: 13px;
    }

    .ux-check-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--cream);
      opacity: 0;
      transform: translateX(-10px);
      transition: opacity .5s ease, transform .5s ease;
    }

    .ux-card.in-view .ux-check-item:nth-child(1) {
      opacity: 1;
      transform: translateX(0);
      transition-delay: .15s;
    }

    .ux-card.in-view .ux-check-item:nth-child(2) {
      opacity: 1;
      transform: translateX(0);
      transition-delay: .32s;
    }

    .ux-card.in-view .ux-check-item:nth-child(3) {
      opacity: 1;
      transform: translateX(0);
      transition-delay: .49s;
    }

    .ux-check-icon {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid var(--line-strong);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ux-more-chip {
      margin-top: 18px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--gold-dim);
      border: 1px dashed var(--line-strong);
      padding: 7px 14px;
      border-radius: 20px;
      opacity: 0;
      transition: opacity .6s ease;
      transition-delay: .68s;
    }

    .ux-card.in-view .ux-more-chip {
      opacity: 1;
    }

    /* ---- mockup 3: terms agreement ---- */
    .ux-term-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
      border-top: 1px solid var(--line);
    }

    .ux-term-row:first-child {
      border-top: none;
      padding-top: 0;
    }

    .ux-term-label {
      font-size: 13px;
      color: var(--cream);
    }

    .ux-term-status {
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--gold-bright);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* magazine touches: a line-drawn emblem for each chapter (a keyhole for
       the private profile, a wax seal for verification, a quill for the
       terms) that draws itself in as the step arrives, a chapter kicker, a
       display headline and a wine drop cap */
    .how-row-text { position: relative; isolation: isolate; }
    .how-emblem {
      position: absolute; top: -26px; left: -30px; z-index: -1; opacity: .85;
      width: clamp(84px, 7vw, 110px); height: auto; pointer-events: none;
      fill: none; stroke: rgba(228, 198, 135, 0.42); stroke-width: 1.3;
      filter: drop-shadow(0 0 6px rgba(228, 198, 135, 0.18));
      stroke-linecap: round; stroke-linejoin: round;
    }
    .how-emblem .em-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.8s cubic-bezier(.4, 0, .2, 1) .3s; }
    .how-emblem .em-fine { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s ease 1.1s; stroke: rgba(228, 198, 135, 0.24); }
    .how-row.in-view .how-emblem .em-draw,
    .how-row.in-view .how-emblem .em-fine { stroke-dashoffset: 0; }
    @media (prefers-reduced-motion: reduce) {
      .how-emblem .em-draw, .how-emblem .em-fine { stroke-dashoffset: 0; transition: none; }
    }
    .how-row-text .step-num {
      display: flex; align-items: center; gap: 14px; font-family: var(--font-serif); font-weight: 500;
      font-size: 12.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold);
    }
    .how-row-text .step-num::after { content: ""; width: 48px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
    .how-row-text h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.08; max-width: 440px; }
    .how-row-text p::first-letter {
      float: left; font-family: var(--font-display); font-size: 3.6em; line-height: 0.8; padding: 6px 10px 0 0; color: var(--wine-bright);
    }
    .how-head h2 { font-family: var(--font-serif); font-size: clamp(40px, 5vw, 68px); }
    .ux-card { border-radius: 10px; }

    /* ---------------- founder's note (envelope background + letter) ---------------- */
    .founder-note {
      padding: 56px 0;
      position: relative;
      background: var(--noir);
      overflow: hidden;
    }

    /* ENVELOPE BACKGROUND IMAGE — recommended landscape, ~1800x1100, wax seal roughly centered.
     Replace src="" on the <img class="founder-note-bg"> below. */
    .founder-note-bg {
      position: absolute;
      inset: 0;
      width: 45%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 0;
      opacity: 0;
      transition: opacity .6s ease;
    }

    .founder-note-bg[src]:not([src=""]) {
      opacity: 1;
    }

    .founder-note::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background: radial-gradient(ellipse 60% 60% at 50% 45%, rgba(11, 10, 12, 0.55) 0%, rgba(11, 10, 12, 0.88) 75%);
    }

    .founder-note .container {
      max-width: 760px;
      position: relative;
      z-index: 1;
    }

    .founder-note .eyebrow {
      display: block;
      text-align: center;
      margin-bottom: 28px;
    }

    .letter-stack {
      position: relative;
      padding: 10px 14px 16px;
    }

    .letter-backing {
      position: absolute;
      inset: 22px -16px -16px 22px;
      z-index: 0;
      background: var(--bordeaux);
      border: 1px solid var(--line-strong);
      transform: rotate(-1.4deg);
    }

    .letter-card {
      position: relative;
      z-index: 1;
      background: var(--noir-soft);
      border: 1px solid var(--line-strong);
      padding: 28px 32px 34px;
      transform: rotate(0.6deg);
      box-shadow: 0 34px 64px rgba(0, 0, 0, 0.55);
      transition: transform .5s cubic-bezier(.2, .6, .2, 1);
    }

    .letter-card:hover {
      transform: rotate(0deg) translateY(-6px);
    }

    .note-wrap {
      display: flex;
      gap: 32px;
      align-items: flex-start;
    }

    .note-rule {
      width: 1px;
      align-self: stretch;
      background: var(--line-strong);
      flex-shrink: 0;
      margin-top: 6px;
    }

    .note-body blockquote {
      font-family: var(--font-sans);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(18px, 1.35vw, 20px);
      line-height: 1.8;
      color: var(--cream);
      margin: 0;
    }

    .note-dropcap {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 50px;
      line-height: 0.7;
      color: var(--gold-bright);
      float: left;
      margin: 6px 8px 0 0;
    }

    .note-signature {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-top: 38px;
    }

    /* FOUNDER PORTRAIT — optional, recommended square ~200x200 */
    .note-portrait {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
      background: var(--noir-soft);
      border: 1px solid var(--line-strong);
    }

    .note-portrait .img-slot__img {
      position: absolute;
      inset: 0;
    }

    .note-portrait .img-slot__placeholder {
      position: absolute;
      inset: 0;
    }

    .note-portrait .img-slot__placeholder .lbl,
    .note-portrait .img-slot__placeholder .dim {
      display: none;
    }

    .note-signature-text .name {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 22px;
      color: var(--gold-bright);
      display: block;
    }

    .note-signature-text .title {
      font-size: 12.5px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--smoke-dim);
      margin-top: 4px;
      display: block;
    }

     /* ---------------- final cta / footer (background image + centered statement) ---------------- */
    .final {
      padding: 0;
      position: relative;
      min-height: 100vh;
      overflow: hidden;
    }

    /* FINAL SECTION BACKGROUND IMAGE — recommended landscape, ~1920x1200. Replace src="" on the <img> below. */
    .final-cont {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .final-cont img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      opacity: 0;
      transition: opacity .6s ease;
    }

    .final-cont img[src]:not([src=""]) {
      opacity: 1;
    }

    .final-cont::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, var(--noir) 0%, rgba(11, 10, 12, 0.55) 16%, rgba(11, 10, 12, 0.35) 34%, rgba(11, 10, 12, 0.75) 75%, var(--noir) 100%);
    }

    .final-statement {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 120px 0;
    }

    /* more specific than the phone .container rule, which resets padding */
    .final .final-statement { padding-top: 120px; padding-bottom: 120px; }

    .final-statement .eyebrow {
      display: block;
      margin-bottom: 24px;
    }

    /* the unicorn emblem crowning the closing statement */
    .final-emblem {
      display: block; width: 84px; height: 84px; margin: 0 auto 22px;
      filter: drop-shadow(0 10px 28px rgba(199, 166, 92, 0.3));
    }
    @media (max-width: 600px) { .final-emblem { width: 68px; height: 68px; margin-bottom: 18px; } }

    .final-statement h2 {
      font-size: clamp(36px, 5.6vw, 72px);
      max-width: 820px;
      line-height: 1.05;
      font-family: var(--font-sans);
      font-weight: 300;
      color: var(--cream);
    }

    .final-statement .btn {
      margin-top: 28px;
    }

    /* the section's one call to action ("Break the seal"), a size up from
       the page's other buttons; the popup's own button keeps the standard size */
    .final-actions .btn {
      padding: 17px 42px;
      font-size: 13px;
      letter-spacing: 0.14em;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 34px rgba(199, 166, 92, 0.18);
    }

    /* ---------------- site footer (after the final section) ---------------- */
    .site-footer {
      position: relative; z-index: 2; padding: 70px 0 60px;
      border-top: 1px solid rgba(199, 166, 92, 0.22);
      background:
        radial-gradient(ellipse 50% 60% at 50% 0%, rgba(107, 26, 48, 0.16), transparent 70%),
        linear-gradient(180deg, #0d0b0e, var(--noir));
    }
    .sf-logo { display: block; width: 150px; margin: 0 auto 50px; }
    .sf-logo img { display: block; width: 100%; height: auto; }
    
    
    .sf-contact a {
      font-family: var(--font-serif); font-size: 15px; color: var(--smoke);
      text-decoration: underline; text-decoration-color: rgba(199, 166, 92, 0.35); text-underline-offset: 4px;
      transition: color .3s ease, text-decoration-color .3s ease;
    }
    .sf-contact a:hover { color: var(--gold-bright); text-decoration-color: var(--gold-bright); }
    
    
    
    
    
    @media (max-width: 600px) {
      .site-footer { padding: 56px 0 64px; }
      
    }

    @media (max-width:900px) {

      .mobile-nav-toggle {
        display: flex;
      }

      /* Phones: the bar is always there, over the hero video too. Menu on
         the left, the signet beside it, Sign in and a compact Apply pill on
         the right. */
      header,
      header.scrolled {
        padding: 10px 0;
        background: rgba(11, 10, 12, 0.72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
      }
      header .container { justify-content: flex-start; gap: 14px; padding-left: 22px; }
      .mobile-nav-toggle { order: -1; align-items: flex-start; opacity: 1; pointer-events: auto; }
      .nav-cta { margin-left: auto; opacity: 1; pointer-events: auto; }
      .nav-cta .btn-gold { padding: 9px 18px; font-size: 11px; white-space: nowrap; }
      .nav-cta .cta-long { display: none; }
      .nav-cta .cta-short { display: inline; }
      /* drawer open: only the gold X stays, above the backdrop, to close it */
      body.mobile-nav-open header {
        z-index: 9998;
        background: transparent;
        border-bottom-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      /* the logo and Apply stay in the bar over the menu, like a page header */
      body.mobile-nav-open header { background: var(--noir); }

      .benefits-grid,
      .how-head,
      .how-row {
        grid-template-columns: 1fr;
      }

      .how-head p { text-align: left; }
      .how-progress-line { display: none; }
      .how-row.reverse .how-row-text { order: 1; }
      .how-row.reverse .how-row-mock { order: 2; }
      .ux-card { max-width: 100%; }

      /* Phones: the portrait leads the section, above the heading, instead
         of trailing after all four benefits. */
      .benefits .container {
        display: flex;
        flex-direction: column;
      }

      .benefits-grid {
        display: contents;
      }

      .benefits-img {
        order: -1;
        width: min(100%, 420px);
        margin: 0 auto 44px;
      }

      .how-progress-line {
        display: none;
      }

      .letter-card {
        padding: 40px 28px 60px;
      }

      .letter-backing {
        inset: 14px -8px -8px 14px;
      }

      .nav-links {
        display: none;
      }

      header.scrolled .nav-links {
        display: none;
      }

      /* Phones: the two images sit in a row above the words, reaching in
         from each edge toward each other, so nothing is behind the text. */
      .meeting {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 44px 0 90px;
      }
      /* the copy's own pieces join the section grid so the heading can sit
         above the images and the words below them, as on Seeking */
      .meeting .container,
      .meeting-grid,
      .meeting-copy { display: contents; }
      .meeting-copy > :not(.btn) {
        grid-column: 1 / -1;
        text-align: center;
        width: 100%;
        max-width: 600px;
        justify-self: center;
        padding: 0 22px;
        box-sizing: border-box;
      }
      .meeting-copy > .eyebrow,
      .meeting-copy > h2 { order: -2; }
      .toast-glass { order: -1; }
      .meeting-copy > .eyebrow { margin-bottom: 12px; }
      .meeting-copy > h2 {
        font-size: clamp(22px, 6.8vw, 34px);
        white-space: nowrap;
        margin-bottom: 18px;
      }
      .meeting-copy > p { font-size: 17px; }
      .meeting-copy > .btn { grid-column: 1 / -1; justify-self: center; }
      .toast-glass {
        position: relative;
        top: auto; left: auto; right: auto;
        width: min(40vw, 230px);
        margin-bottom: 22px;
      }
      .toast-glass.left { justify-self: start; transform: translateX(-60px) rotate(-10deg); }
      .toast-glass.right { justify-self: end; transform: translateX(60px) rotate(10deg); }
      .toast-glass.left.in-view { transform: translateX(-6px) rotate(-4deg); }
      .toast-glass.right.in-view { transform: translateX(6px) rotate(4deg); }
    }

    @media (max-width:600px) {
      .container {
        padding: 0 22px;
      }

      .hero h1 {
        font-size: clamp(19px, 5.4vw, 24px);
      }

      /* The logo was fixed at 75px tall on every screen size — fine on
         desktop, but on a phone it made the header far taller than the
         sign-in/CTA controls next to it, so the row read as lopsided rather
         than a uniform bar. Scale it down and tighten the header padding to
         match, same treatment on the scrolled (shrunk) state. */
      header {
        padding: 14px 0;
      }

      .signet-logo,
      header.scrolled .signet-logo {
        height: 60px;
      }

      .nav-cta {
        gap: 12px;
      }

      .nav-cta .sign-in {
        font-size: 11px;
        white-space: nowrap;
      }
    }

    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }

      .hero-media__video {
        animation: none;
      }

      .ambient-light {
        display: none;
      }
    }

    /* ================= Redesign (Sep 2026): invitation hero, gold thread,
       privacy demos, pull-quotes, seal timeline, marquees, tier cards,
       invitation finale, phone CTA bar. Behaviour: LandingPage/js/Landing-4.js ================= */
    .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .eyebrow + h2 em, h2 em { font-family: var(--font-display); font-style: italic; font-weight: 300; color: var(--gold-bright); }

    .hero-media {
      background:
        radial-gradient(ellipse 60% 55% at 22% 18%, rgba(107, 26, 48, 0.62), transparent 62%),
        radial-gradient(ellipse 55% 50% at 85% 85%, rgba(30, 74, 56, 0.45), transparent 65%),
        radial-gradient(ellipse 50% 40% at 70% 30%, rgba(199, 166, 92, 0.12), transparent 70%),
        linear-gradient(160deg, #1a0e12 0%, #0B0A0C 55%, #0F241C 130%);
      background-size: 180% 180%;
    }

    /* ---------------- gold thread (desktop margins only) ---------------- */
    .gold-thread { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 6; }
    .gold-thread svg { position: absolute; inset: 0; overflow: visible; }
    .gold-thread .gt-path { fill: none; stroke: url(#gt-gradient); stroke-width: 1.2; filter: drop-shadow(0 0 4px rgba(228,198,135,0.45)); }
    .gold-thread .gt-ghost { fill: none; stroke: rgba(199,166,92,0.10); stroke-width: 1; }
    .gold-thread .gt-node { fill: var(--noir); stroke: var(--gold-dim); stroke-width: 1; transition: fill .6s ease, stroke .6s ease, r .6s ease; }
    .gold-thread .gt-node.lit { r: 5; stroke: var(--gold-bright); }
    .gold-thread .gt-node.lit.wine { fill: var(--wine-bright); }
    .gold-thread .gt-node.lit.forest { fill: var(--forest-bright); }
    .gold-thread .gt-node.lit.gold { fill: var(--gold); }

    /* ---------------- benefits: sticky arch that crossfades ---------------- */
    .benefits { background: radial-gradient(ellipse 50% 40% at 85% 40%, var(--wine-soft), transparent 70%); }
    .benefits-grid { align-items: start; }
    .benefits-img {
      position: sticky; top: 130px; aspect-ratio: 3 / 4; overflow: hidden;
      border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
      box-shadow: 0 0 0 1px var(--line-strong), 0 40px 80px rgba(0,0,0,0.45);
    }
    .benefits-photo {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      opacity: 0; transform: scale(1.08); transition: opacity 1.1s ease, transform 9s ease-out;
    }
    .benefits-photo.active { opacity: 1; transform: scale(1); }
    /* a landscape photo in the portrait arch: frame it on the subject (her
       masked face sits in the left third), not the empty middle */
    .benefits-photo--left { object-position: 14% 50%; }
    .benefits-photo--cuffs { object-position: 50% 45%; } /* keep the cuffed wrists in frame */
    /* the section's label sits on the photo instead of above the heading,
       where "Why Fantasi" and "Why members choose Fantasi" said it twice */
    .benefits-img::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 1; pointer-events: none;
      background: linear-gradient(0deg, rgba(11, 10, 12, 0.82), transparent);
    }
    .benefits-img-label {
      position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2; margin: 0;
      display: flex; align-items: center; justify-content: center; gap: 14px;
      color: var(--gold-bright); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
    }
    .benefits-img-label::before, .benefits-img-label::after { content: ""; width: 28px; height: 1px; background: rgba(228, 198, 135, 0.6); }
    .benefit-item { transition: opacity .6s ease; }
    .benefits-list.has-active .benefit-item:not(.is-active) { opacity: .65; }
    .benefit-item h3 { transition: color .6s ease; }
    .benefit-item.is-active h3 { color: var(--gold-bright); font-size: 30px; }

    /* ---------------- pull-quotes ---------------- */
    .pullquote {
      position: relative; padding: 70px 24px 90px; text-align: center; overflow: hidden;
      /* a soft gold light breaks up the wine and black behind the words */
      background:
        radial-gradient(ellipse 48% 62% at 50% 52%, rgba(107,26,48,0.40), transparent 74%),
        radial-gradient(ellipse 22% 30% at 30% 40%, rgba(228,198,135,0.06), transparent 70%);
    }
    .pullquote::before, .pullquote::after {
      content: ""; position: absolute; left: 50%; width: 120px; height: 1px; margin-left: -60px;
      background: linear-gradient(90deg, transparent, rgba(228,198,135,0.55), transparent);
    }
    .pullquote::before { top: 34px; }
    .pullquote::after { bottom: 44px; }
    /* a pull-quote that opens the next section: no double gap either side */
    .meeting:has(+ .pullquote),
    .benefits:has(+ .pullquote),
    .privacy:has(+ .pullquote),
    .values:has(+ .pullquote) { padding-bottom: 60px; }
    .pullquote + section { padding-top: 40px; border-top: 0; }
    .meeting + .pullquote { padding-top: 60px; }
    .pullquote p {
      margin: 0 auto; max-width: 1100px; font-family: var(--font-serif); font-weight: 400;
      font-size: clamp(32px, 5.2vw, 56px); line-height: 1.05; letter-spacing: -0.01em;
    }
    .pq-outline { color: rgba(242, 236, 223, 0.9); }
    .pq-solid {
      /* a muted, translucent gold: quieter than the gold headings */
      font-family: var(--font-display); font-style: italic; color: rgba(228, 198, 135, 0.45);
    }
    .pullquote.reveal p { transition: letter-spacing 1.6s cubic-bezier(.2,.6,.2,1); letter-spacing: 0.06em; }
    .pullquote.reveal.in-view p { letter-spacing: -0.01em; }

    /* ---------------- privacy & safety (live demos) ---------------- */
    .privacy {
      padding: 130px 0; border-top: 1px solid var(--line); overflow-x: clip;
      background:
        radial-gradient(ellipse 60% 50% at 15% 10%, rgba(30,74,56,0.45), transparent 70%),
        radial-gradient(ellipse 40% 40% at 90% 90%, rgba(30,74,56,0.25), transparent 70%);
    }
    .privacy-head { text-align: center; max-width: 960px; margin: 0 auto 64px; }
    .privacy-head > p { max-width: 680px; margin-left: auto; margin-right: auto; }
    .privacy-head .eyebrow { display: block; margin-bottom: 18px; color: var(--gold); }
    .privacy-head h2 { font-size: clamp(17px, 5.4vw, 44px); color: var(--cream); white-space: nowrap; }
    .privacy-head h2 em { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .privacy-head p { color: var(--smoke); margin-top: 16px; font-size: 18px; }
    
    /* each fact is a small glass card, its tick in a gold-ringed medallion */
    
    
    
    
    
    

    /* ---------------- founder signature ---------------- */
    .signature { width: 190px; height: auto; display: block; overflow: visible; }
    .signature text {
      font-family: var(--font-display); font-style: italic; font-size: 46px;
      fill: transparent; stroke: var(--gold-bright); stroke-width: 0.9;
      stroke-dasharray: 700; stroke-dashoffset: 700;
    }
    .signature.signing text { animation: signWrite 3.2s ease forwards, signFill 1s ease 2.6s forwards; }
    @keyframes signWrite { to { stroke-dashoffset: 0; } }
    @keyframes signFill { to { fill: var(--gold-bright); stroke-width: 0.3; } }

    /* ---------------- desires: two lazy marquees ---------------- */
    .desires { padding: 130px 0; border-top: 1px solid var(--line); background: radial-gradient(ellipse 60% 55% at 50% 50%, var(--wine-soft), transparent 72%); overflow: hidden; }
    .desires-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
    .desires-head .eyebrow { display: block; margin-bottom: 18px; color: var(--gold); }
    .desires-head h2 { font-size: clamp(38px, 4.8vw, 68px); line-height: 1.05; color: var(--cream); }
    .desires-head h2 em { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .desires-head p { color: var(--smoke); margin-top: 14px; font-size: 18px; }
    .marquee { overflow: hidden; padding: 9px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
    .marquee-track { display: flex; width: max-content; animation: marqueeLeft 90s linear infinite; }
    .marquee--reverse .marquee-track { animation-name: marqueeRight; animation-duration: 105s; }
    .marquee:hover .marquee-track { animation-play-state: paused; }
    .marquee-set { display: flex; gap: 14px; padding-right: 14px; }
    @keyframes marqueeLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @keyframes marqueeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
    .desire-tag {
      display: inline-block; text-decoration: none; cursor: pointer;
      white-space: nowrap; padding: 15px 26px; border-radius: 999px;
      border: 1px solid rgba(176,68,95,0.35); background: rgba(107,26,48,0.14);
      font-family: var(--font-serif); font-size: 18px; color: var(--cream);
      transition: border-color .3s ease, background .3s ease, color .3s ease;
    }
    .marquee-set .desire-tag:nth-child(3n+2) { border-color: rgba(199,166,92,0.35); background: rgba(199,166,92,0.06); }
    .marquee-set .desire-tag:nth-child(3n) { border-color: rgba(78,156,121,0.35); background: rgba(30,74,56,0.18); }
    .desire-tag:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
    .desires-cta { text-align: center; margin-top: 50px; }

    
    
    
    
    

    /* ---------------- privacy showcase: feature list + a live phone ---------------- */
    .privacy-show { display: grid; grid-template-columns: 1fr 360px; gap: 80px; align-items: center; max-width: 1060px; margin: 0 auto; }
    .privacy-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
    .privacy-features li + li { border-top: 1px solid rgba(199, 166, 92, 0.14); }
    .pf-item {
      width: 100%; display: grid; grid-template-columns: 56px 1fr; gap: 0 18px; align-items: start; text-align: left;
      padding: 22px 24px 20px; border: 0; border-radius: 16px; background: transparent; color: inherit; cursor: pointer;
      font: inherit; transition: background .6s ease, box-shadow .6s ease, margin .6s ease;
      position: relative;
    }
    .pf-item:hover { background: rgba(255,255,255,0.02); }
    /* the active feature is a frosted card with a gold hairline and a gold
       bar down its edge */
    .pf-item.active {
      margin: 6px 0;
      background: linear-gradient(120deg, rgba(30, 74, 56, 0.34), rgba(21, 18, 22, 0.55) 70%);
      box-shadow: inset 0 0 0 1px rgba(228, 198, 135, 0.28), 0 24px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .pf-item::before {
      content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; border-radius: 2px;
      background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, transparent);
      opacity: 0; transform: scaleY(.4); transition: opacity .6s ease, transform .6s ease;
    }
    .pf-item.active::before { opacity: 1; transform: none; }
    .privacy-features li:has(.pf-item.active), .privacy-features li:has(.pf-item.active) + li { border-top-color: transparent; }
    .pf-item:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
    .pf-num { font-family: var(--font-display); font-style: italic; font-size: 32px; line-height: 1; color: var(--gold-dim); transition: color .6s ease; padding-top: 2px; }
    .pf-item.active .pf-num {
      color: transparent;
      background: linear-gradient(100deg, #f3e2b0, var(--gold-bright) 40%, var(--gold) 80%);
      -webkit-background-clip: text; background-clip: text;
    }
    .pf-text strong { display: block; font-family: var(--font-serif); font-size: 21px; font-weight: 500; color: var(--cream); }
    .pf-text span { display: block; font-size: 16.5px; color: var(--smoke); line-height: 1.7; max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .7s ease, opacity .6s ease, margin-top .6s ease; }
    .pf-item.active .pf-text span { max-height: 140px; opacity: 1; margin-top: 8px; }

    .privacy-phone { position: relative; display: flex; justify-content: center; perspective: 1500px; }
    /* a warm gold light behind the phone, brightest just above its middle */
    .phone-glow {
      position: absolute; inset: -12% -60%; pointer-events: none; filter: blur(18px);
      background: radial-gradient(ellipse 50% 50% at 50% 46%, rgba(228, 198, 135, 0.42) 0%, rgba(228, 198, 135, 0.30) 30%, rgba(199, 166, 92, 0.14) 52%, transparent 72%);
    }
    /* the iPhone frame is an image (iphone-frame.webp, 493x1007) laid over the
       screens; the screen box matches its opening: 26px in from the top and
       sides, 35px up from the bottom */
    .phone-frame {
      position: relative; width: 300px; aspect-ratio: 493 / 1007;
      filter: drop-shadow(0 50px 60px rgba(0,0,0,0.6));
      transform: rotateY(-12deg) rotateX(4deg); animation: phoneFloat 8s ease-in-out infinite alternate;
    }
    .phone-bezel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
    /* the stage: two slow gold rings behind the phone (a bead travels the
       inner one), a pool of light beneath it, a sheen that crosses the glass,
       and a tag naming the feature being shown */
    .phone-rings { position: absolute; left: 50%; top: 48%; width: 440px; height: 440px; margin: -220px 0 0 -220px; pointer-events: none; }
    .ring { position: absolute; border-radius: 50%; }
    .ring--outer { inset: 0; border: 1px solid rgba(228, 198, 135, 0.14); animation: ringSpin 60s linear infinite; }
    .ring--inner { inset: 44px; border: 1px dashed rgba(228, 198, 135, 0.22); animation: ringSpin 38s linear infinite reverse; }
    .ring--inner i { position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 12px rgba(228, 198, 135, 0.8); }
    @keyframes ringSpin { to { transform: rotate(360deg); } }
    .phone-floor {
      position: absolute; left: 50%; bottom: -34px; width: 300px; height: 60px; margin-left: -150px; pointer-events: none;
      background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(228, 198, 135, 0.22), rgba(78, 156, 121, 0.08) 45%, transparent 72%);
      filter: blur(6px);
    }
    .phone-sheen { position: absolute; left: 5.27%; right: 5.27%; top: 2.58%; bottom: 3.48%; z-index: 2; border-radius: 9% / 4.4%; overflow: hidden; pointer-events: none; }
    .phone-sheen::after {
      content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%;
      background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0.02) 60%, transparent);
      transform: skewX(-12deg); animation: phoneSheen 7s ease-in-out infinite;
    }
    @keyframes phoneSheen { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
    .phone-tags { position: absolute; right: -54px; top: 16%; z-index: 4; pointer-events: none; }
    .phone-tag {
      position: absolute; right: 0; top: 0; white-space: nowrap; padding: 9px 16px; border-radius: 999px;
      font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright);
      background: rgba(14, 12, 15, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      box-shadow: inset 0 0 0 1px rgba(228, 198, 135, 0.4), 0 14px 30px rgba(0, 0, 0, 0.45);
      opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease;
    }
    .privacy-show:has(.ps-blur.active) .phone-tag--blur { opacity: 1; transform: none; transition-delay: .25s; }
    @keyframes phoneFloat { from { transform: rotateY(-12deg) rotateX(4deg) translateY(0); } to { transform: rotateY(-5deg) rotateX(2deg) translateY(-16px); } }
    .phone-screen { position: absolute; left: 5.27%; right: 5.27%; top: 2.58%; bottom: 3.48%; border-radius: 9% / 4.4%; overflow: hidden; background: radial-gradient(circle at 50% 0%, #15201b, #0b0a0c 60%); }
    .ps {
      position: absolute; inset: 0; padding: 50px 14px 18px; display: flex; flex-direction: column; gap: 12px;
      opacity: 0; transform: scale(1.05); filter: blur(8px); pointer-events: none;
      transition: opacity .9s ease, transform .9s ease, filter .9s ease;
    }
    .ps.active { opacity: 1; transform: none; filter: none; pointer-events: auto; }
    
    
    
    
    
    .ps-veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; text-align: center; background: rgba(11,10,12,0.2); }
    .ps-request {
      padding: 11px 20px; border-radius: 999px; border: 1px solid rgba(228,198,135,0.6); cursor: pointer;
      background: rgba(11,10,12,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--cream);
      font-family: var(--font-serif); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; transition: border-color .3s ease, background .3s ease, color .3s ease;
    }
    .ps-request:hover { border-color: var(--gold-bright); }
    .ps-request.sent { border-color: var(--forest-bright); color: #cfe9dc; background: rgba(30,74,56,0.5); }
    .ps-note { font-size: 12.5px; color: var(--cream); line-height: 1.55; max-width: 22ch; text-shadow: 0 1px 8px rgba(0,0,0,0.8); }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .ps-caption { font-size: 13.5px; color: var(--smoke); margin: 0; }

    /* ---------------- desires: clickable terms + the definition card ---------------- */
    button.desire-tag { cursor: pointer; appearance: none; -webkit-appearance: none; line-height: 1.2; }
    button.desire-tag:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 3px; }
    .desire-tag.is-open { border-color: var(--gold-bright); color: var(--gold-bright); background: rgba(199,166,92,0.12); }
    .marquee.paused .marquee-track { animation-play-state: paused; }
    .term-pop {
      position: fixed; z-index: 9500; width: min(330px, calc(100vw - 32px)); padding: 22px 24px 20px; border-radius: 16px;
      background: linear-gradient(165deg, #22151b, #0f0c0e 70%); color: var(--cream);
      box-shadow: 0 0 0 1px rgba(228,198,135,0.4), 0 30px 70px rgba(0,0,0,0.6), 0 0 60px rgba(107,26,48,0.3);
      animation: termPop .35s cubic-bezier(.2,.8,.2,1);
    }
    .term-pop[hidden] { display: none; }
    @keyframes termPop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
    .term-pop-close { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border: 0; background: none; color: var(--smoke); font-size: 22px; line-height: 1; cursor: pointer; }
    .term-pop-close:hover { color: var(--gold-bright); }
    .term-pop-eyebrow { display: block; font-family: var(--font-serif); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
    .term-pop-title { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0 24px 10px 0; }
    .term-pop-def { font-size: 16.5px; line-height: 1.7; color: rgba(242,236,223,0.85); margin: 0 0 14px; }
    .term-pop-link { font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
    .term-pop-link:hover { color: var(--gold-bright); }

    /* ---------------- membership: detailed invitation letters ---------------- */
    
    
    
    
    

    /* every size inside the letter scales with its width (cqw), so nothing
       collides on a phone; the container is the link, not the 3D element */
    .tl-envelope { display: block; margin: 0 0 30px; perspective: 1400px; container-type: inline-size; text-decoration: none; color: inherit; }
    .tl-envelope:focus-visible { outline: none; }
    .tl-inner {
      position: relative; display: block; aspect-ratio: 1.45; transform-style: preserve-3d;
      transform: translateY(0) rotateY(0deg); transition: transform .9s cubic-bezier(.2,.7,.2,1);
    }
    .tl-inner.is-risen { transform: translateY(-22px) rotateY(0deg); }
    /* rise, turn slowly to the addressed side, hold there to be read, finish the turn */
    .tl-inner.is-spinning { animation: letterRiseSpin 5.2s cubic-bezier(.45,.05,.35,1) forwards; }
    @keyframes letterRiseSpin {
      0% { transform: translateY(0) rotateY(0deg); }
      14% { transform: translateY(-22px) rotateY(0deg); }
      40% { transform: translateY(-22px) rotateY(180deg); }
      76% { transform: translateY(-22px) rotateY(180deg); }
      100% { transform: translateY(-22px) rotateY(360deg); }
    }
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    

    
    /* the price: a small gold dollar sign set high, the figure in Garamond,
       and "per month" in spaced capitals, under a thin gold rule */
    
    
    
    
    
    
    
    
    
    
    
    

    @media (max-width: 1000px) {
      
      .privacy-show { grid-template-columns: 1fr; gap: 50px; max-width: 520px; }
      .privacy-phone { order: -1; }
    }
    @media (max-width: 1000px) {
      /* below the phone, centred, with the list pushed clear of it */
      .privacy-show { gap: 100px; }
      .phone-tags { left: 0; right: 0; top: auto; bottom: -62px; }
      .phone-tag { left: 50%; right: auto; transform: translate(-50%, 10px); }
      .privacy-show:has(.ps-blur.active) .phone-tag--blur { transform: translate(-50%, 0); }
      .phone-floor { bottom: -20px; }
    }
    @media (max-width: 600px) {
      .phone-frame { width: 260px; }
      .phone-rings { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
      .ring--inner { inset: 34px; }
      .pf-item { grid-template-columns: 44px 1fr; padding: 18px 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .tl-inner, .tl-inner.is-spinning { animation: none; transition: none; }
      .phone-frame,
    .ring,
    .phone-sheen::after { animation: none; }
    }

    /* ---------------- final: the invitation you sign ---------------- */
    .final { background-color: var(--noir); }
    .final-statement h2 em { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .final-actions { display: flex; justify-content: center; }
    .invite { position: relative; margin: 0 auto; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 22px; }

    /* the invitation arrives as a popup: the page dims, the card rises in and
       the wax seal stamps down on it */
    .invite-dialog {
      width: min(560px, calc(100vw - 32px)); max-width: none; max-height: none; margin: auto;
      padding: 56px 0 8px; border: 0; background: transparent; color: var(--cream); overflow: visible;
    }
    .invite-dialog::backdrop { background: rgba(8, 6, 8, 0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    .invite-dialog[open]::backdrop { animation: invFade .5s ease both; }
    .invite-dialog[open] .invite-paper { animation: invRise .9s cubic-bezier(.2, .7, .2, 1) both; }
    .invite-dialog[open] .ip-seal { animation: invStamp .55s cubic-bezier(.3, 1.6, .5, 1) .55s both; }
    .invite-dialog[open] .invite-form { animation: invFade .6s ease .45s both; }
    .invite-dialog.is-closing .invite-paper,
    .invite-dialog.is-closing .invite-form { animation: invLeave .32s ease-in both; }
    .invite-dialog.is-closing::backdrop { animation: invFade .32s ease reverse both; }
    @keyframes invFade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes invRise { from { opacity: 0; transform: translateY(60px) scale(.92) rotate(-2.5deg); } to { opacity: 1; transform: none; } }
    @keyframes invStamp { from { opacity: 0; transform: scale(1.7); } to { opacity: 1; transform: none; } }
    @keyframes invLeave { to { opacity: 0; transform: translateY(40px) scale(.96); } }
    .invite-close {
      position: absolute; top: -40px; right: -4px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
      border: 1px solid rgba(228, 198, 135, 0.45); background: rgba(11, 10, 12, 0.7); color: var(--gold-bright);
      font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: border-color .3s ease, transform .3s ease;
    }
    .invite-close:hover, .invite-close:focus-visible { border-color: var(--gold-bright); transform: rotate(90deg); outline: none; }
    body:has(.invite-dialog[open]) { overflow: hidden; }
    @media (prefers-reduced-motion: reduce) {
      .invite-dialog[open]::backdrop, .invite-dialog[open] .invite-paper, .invite-dialog[open] .ip-seal,
      .invite-dialog[open] .invite-form, .invite-dialog.is-closing .invite-paper,
      .invite-dialog.is-closing .invite-form, .invite-dialog.is-closing::backdrop { animation: none; }
    }
    /* black card stock, a double gold-foil border with deco corners, and the
       same wine wax seal as the membership letters breaking the top edge */
    .invite-paper {
      position: relative; width: 100%; margin-top: 0; padding: 56px 36px 36px; border-radius: 4px; text-align: center; color: var(--cream);
      display: flex; flex-direction: column; align-items: center; gap: 12px;
      background:
        radial-gradient(ellipse 80% 55% at 50% 0%, rgba(107, 26, 48, 0.38), transparent 72%),
        linear-gradient(160deg, #1b1519 0%, #0f0d10 58%, #161115 100%);
      box-shadow:
        inset 0 0 0 1px rgba(228, 198, 135, 0.6),
        inset 0 0 0 7px #120f12,
        inset 0 0 0 8px rgba(228, 198, 135, 0.28),
        0 36px 80px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(107, 26, 48, 0.22);
      transition: transform .6s cubic-bezier(.2, .6, .2, 1);
    }
    .invite-paper:hover { transform: translateY(-4px); }
    .ip-corner { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(228, 198, 135, 0.75); pointer-events: none; }
    .ip-corner::after { content: ""; position: absolute; width: 5px; height: 5px; background: var(--gold-bright); transform: rotate(45deg); }
    .ip-corner--tl { top: 16px; left: 16px; border-top-width: 1px; border-left-width: 1px; }
    .ip-corner--tr { top: 16px; right: 16px; border-top-width: 1px; border-right-width: 1px; }
    .ip-corner--bl { bottom: 16px; left: 16px; border-bottom-width: 1px; border-left-width: 1px; }
    .ip-corner--br { bottom: 16px; right: 16px; border-bottom-width: 1px; border-right-width: 1px; }
    .ip-corner--tl::after { top: 4px; left: 4px; }
    .ip-corner--tr::after { top: 4px; right: 4px; }
    .ip-corner--bl::after { bottom: 4px; left: 4px; }
    .ip-corner--br::after { bottom: 4px; right: 4px; }
    .ip-seal {
      position: absolute; top: -30px; left: 50%; width: 62px; height: 62px; margin-left: -31px;
      display: flex; align-items: center; justify-content: center;
      filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55));
    }
    .ip-seal::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(circle at 36% 30%, #c95a78 0%, var(--wine) 55%, #3a0c19 100%);
      clip-path: polygon(50% 0, 61% 4%, 72% 2%, 80% 10%, 91% 14%, 94% 26%, 100% 37%, 97% 50%, 100% 62%, 94% 73%, 92% 86%, 80% 90%, 71% 99%, 59% 96%, 50% 100%, 40% 95%, 28% 98%, 20% 89%, 9% 86%, 6% 73%, 0 62%, 3% 50%, 0 38%, 7% 26%, 9% 13%, 21% 10%, 29% 2%, 40% 5%);
    }
    .ip-seal::after { content: ""; position: absolute; inset: 17%; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.15); }
    .ip-seal .fz-emblem { position: relative; z-index: 1; width: 32px; height: 32px; color: var(--gold-bright); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45)); }
    .ip-eyebrow { font-family: var(--font-serif); font-size: 11.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
    .ip-name {
      font-family: var(--font-display); font-style: italic; font-size: clamp(36px, 4.6vw, 52px); line-height: 1.15; min-height: 1.15em;
      background: linear-gradient(100deg, #a8884a 0%, #f3e2b0 18%, var(--gold) 36%, #a8884a 52%, #f3e2b0 70%, var(--gold) 86%, #a8884a 100%);
      background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
      animation: ipFoil 7s linear infinite;
      overflow-wrap: anywhere;
    }
    @keyframes ipFoil { to { background-position: -220% 0; } }
    .ip-flourish { width: 150px; height: auto; fill: none; stroke: rgba(228, 198, 135, 0.7); stroke-width: 1; stroke-linecap: round; }
    .ip-flourish circle { fill: var(--gold-bright); stroke: none; }
    .ip-foot { font-family: var(--font-serif); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(242, 236, 223, 0.55); }
    @media (prefers-reduced-motion: reduce) {
      .ip-name { animation: none; }
    }
    .invite-form { display: flex; align-items: stretch; gap: 10px; width: 100%; }
    .invite-form input {
      flex: 1; min-width: 0; height: 52px; margin: 0; padding: 0 22px; box-sizing: border-box; line-height: normal; border-radius: 999px; border: 1px solid var(--line-strong);
      background: rgba(11,10,12,0.6); color: var(--cream); font-family: var(--font-serif); font-size: 16px; outline: none;
    }
    .invite-form input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(199,166,92,0.1); }
    .invite-form .btn { flex-shrink: 0; height: 52px; margin: 0; }

    /* ---------------- redesign: responsive ---------------- */
    
    @media (max-width: 900px) {
      .benefits-img { position: relative; top: auto; }
      .benefits-list.has-active .benefit-item:not(.is-active) { opacity: 1; }
    }
    @media (max-width: 600px) {
      
      .invite-form { flex-direction: column; }
      .invite-form input { flex: none; }
      .invite-paper { padding: 52px 22px 30px; }
      .ip-eyebrow { font-size: 10px; letter-spacing: 0.18em; }
      .pullquote { padding: 50px 18px 60px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
      .marquee-set[aria-hidden="true"] { display: none; }
      .marquee-set { flex-wrap: wrap; justify-content: center; }
      .signature text { stroke-dashoffset: 0; fill: var(--gold-bright); }
      .benefits-photo { transition: opacity .3s ease; transform: none; }
    }

    /* ---------------- section backgrounds: one continuous atmosphere ----------------
       No section sits on flat black. Each has a deep tint in its thread colour
       (wine = desire, forest = trust, gold = the invitation) that rises in the
       middle and returns to the page black at its top and bottom edges, so one
       section flows into the next without a seam; a soft glow sits off-centre,
       alternating sides as you scroll. */
    :root {
      --tint-wine: #150B10;
      --tint-forest: #0C1612;
      --tint-gold: #14110C;
      --glow-wine: rgba(107, 26, 48, 0.18);
      --glow-forest: rgba(30, 74, 56, 0.24);
      --glow-gold: rgba(199, 166, 92, 0.05);
      /* one strength for every section's wash, tuned so wine, forest and gold
         read equally bright: a main glow and a softer second one */
      --wash-wine: rgba(107, 26, 48, 0.28);
      --wash-wine-soft: rgba(107, 26, 48, 0.12);
      --wash-forest: rgba(30, 74, 56, 0.28);
      --wash-forest-soft: rgba(30, 74, 56, 0.12);
      --wash-gold: rgba(199, 166, 92, 0.1);
      --wash-gold-soft: rgba(228, 198, 135, 0.045);
    }
    /* groups & events: a soft gold wash */
    .together {
      background:
        radial-gradient(ellipse 58% 44% at 50% 36%, var(--wash-gold), transparent 72%),
        radial-gradient(ellipse 40% 28% at 85% 74%, var(--wash-gold-soft), transparent 70%),
        linear-gradient(180deg, var(--noir) 0%, var(--tint-gold) 45%, var(--noir) 100%);
    }
    .pullquote { background: none; }
    .founder-note {
      background:
        radial-gradient(ellipse 58% 44% at 75% 50%, var(--wash-forest), transparent 72%),
        radial-gradient(ellipse 40% 28% at 20% 68%, var(--wash-forest-soft), transparent 70%),
        linear-gradient(180deg, var(--noir) 0%, var(--tint-forest) 50%, var(--noir) 100%);
    }
    .founder-note::before {
      background: radial-gradient(ellipse 60% 60% at 50% 45%, rgba(11, 10, 12, 0.35) 0%, rgba(11, 10, 12, 0.6) 75%);
    }
    .benefits {
      background:
        radial-gradient(ellipse 58% 44% at 85% 40%, var(--wash-wine), transparent 72%),
        radial-gradient(ellipse 40% 28% at 10% 78%, var(--wash-wine-soft), transparent 70%),
        linear-gradient(180deg, var(--noir) 0%, var(--tint-wine) 50%, var(--noir) 100%);
    }
    .privacy {
      background:
        radial-gradient(ellipse 58% 44% at 15% 34%, var(--wash-forest), transparent 72%),
        radial-gradient(ellipse 40% 28% at 90% 74%, var(--wash-forest-soft), transparent 70%),
        linear-gradient(180deg, var(--noir) 0%, var(--tint-forest) 50%, var(--noir) 100%);
    }
    .values {
      background:
        radial-gradient(ellipse 58% 44% at 50% 52%, var(--wash-wine), transparent 72%),
        radial-gradient(ellipse 40% 28% at 12% 28%, var(--wash-wine-soft), transparent 70%),
        radial-gradient(ellipse 40% 28% at 88% 72%, var(--wash-wine-soft), transparent 70%),
        linear-gradient(180deg, var(--noir) 0%, var(--tint-wine) 50%, var(--noir) 100%);
    }
    .how {
      background:
        radial-gradient(ellipse 58% 30% at 12% 26%, var(--wash-forest), transparent 72%),
        radial-gradient(ellipse 40% 24% at 90% 70%, var(--wash-forest-soft), transparent 70%),
        linear-gradient(180deg, var(--noir) 0%, var(--tint-forest) 12%, var(--tint-forest) 88%, var(--noir) 100%);
    }
    .desires {
      background:
        radial-gradient(ellipse 58% 44% at 50% 50%, var(--wash-wine), transparent 72%),
        radial-gradient(ellipse 40% 28% at 85% 80%, var(--wash-wine-soft), transparent 70%),
        linear-gradient(180deg, var(--noir) 0%, var(--tint-wine) 50%, var(--noir) 100%);
    }
    
    /* keyboard focus: a thin gold ring on links and buttons (mouse clicks don't show it) */
  a:focus-visible, button:focus-visible, [role="tab"]:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }

    /* ================= live demo + inside each membership (Oct 2026) =================
       Product shown as it works, on the same phone as the privacy showcase.
       A mono face for small labels gives the "tech" layer; colour stays gold
       and translucent wine/forest tints, never solid panels. */

    .mono-tag {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
    }
    .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wine-bright); box-shadow: 0 0 0 0 rgba(176,68,95,0.6); animation: liveDot 2s ease-out infinite; }
    @keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(176,68,95,0.55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(176,68,95,0); } }
    .display-xl {
      font-family: var(--font-serif); font-weight: 400; font-style: normal;
      font-size: clamp(42px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -0.02em; color: var(--cream); margin: 18px 0 0;
    }
    .display-xl em { font-family: var(--font-display); font-style: italic; font-weight: 300; color: var(--gold-bright); }
    .section-lede { font-size: 18px; line-height: 1.65; color: var(--smoke); max-width: 46ch; margin: 22px 0 0; }

    /* a phone that sits on the page like the privacy one, with its own label chip */
    .demo-phone { position: relative; display: flex; justify-content: center; perspective: 1500px; }
    .demo-phone .phone-frame { animation-duration: 9s; }
    .demo-chip {
      position: absolute; z-index: 4; left: 50%; bottom: -58px; transform: translateX(-50%);
      white-space: nowrap; padding: 9px 16px; border-radius: 999px;
      font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--gold-bright);
      background: rgba(14, 12, 15, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      box-shadow: inset 0 0 0 1px rgba(228, 198, 135, 0.34), 0 14px 30px rgba(0, 0, 0, 0.45);
      transition: opacity .4s ease;
    }
    .demo-chip.swap { opacity: 0; }

    /* screens inside the phone */
    .sc {
      position: absolute; inset: 0; padding: 48px 13px 16px; display: flex; flex-direction: column; gap: 10px;
      opacity: 0; transform: scale(1.04); filter: blur(8px); pointer-events: none;
      transition: opacity .8s ease, transform .8s ease, filter .8s ease;
      font-family: var(--font-serif); color: var(--cream);
    }
    .sc.active { opacity: 1; transform: none; filter: none; pointer-events: auto; }
    
    
    
    
    
    
    
    
    

    /* member tiles: soft blurred photos or private gradients */
    
    
    
    
    
    
    
    
    
    
    .blurred { filter: blur(14px) saturate(0.7); transform: scale(1.18); }

    /* ---------- section: live demo ---------- */
    .live {
      position: relative; padding: 150px 0 170px; overflow: hidden;
      background:
        radial-gradient(ellipse 58% 44% at 26% 52%, var(--wash-wine), transparent 72%),
        radial-gradient(ellipse 40% 28% at 85% 24%, var(--wash-wine-soft), transparent 70%),
        linear-gradient(180deg, var(--noir) 0%, var(--tint-wine) 50%, var(--noir) 100%);
    }
    .live-show { display: grid; grid-template-columns: 380px 1fr; gap: 110px; align-items: center; max-width: 1080px; margin: 0 auto; }
    .live-head { margin-bottom: 52px; }
    .live-steps { list-style: none; margin: 40px 0 0; padding: 0; counter-reset: none; }
    .live-steps li + li { border-top: 1px solid rgba(199, 166, 92, 0.12); }
    .ls-item {
      width: 100%; display: grid; grid-template-columns: 54px 1fr; gap: 6px 14px; align-items: baseline; text-align: left;
      padding: 18px 4px; background: none; border: 0; color: inherit; cursor: pointer; font: inherit;
      opacity: 0.34; transition: opacity .5s ease;
    }
    .ls-item:hover { opacity: 0.7; }
    .ls-item.active { opacity: 1; }
    .ls-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--gold); }
    .ls-text strong { display: block; font-family: var(--font-serif); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; color: var(--cream); }
    .ls-text > span { display: block; font-size: 16.5px; line-height: 1.65; color: var(--smoke); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s ease, opacity .5s ease, margin-top .5s ease; }
    .ls-item.active .ls-text > span { max-height: 140px; opacity: 1; margin-top: 8px; }
    .ls-text em { font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dim); }
    .ls-bar { grid-column: 2; height: 1px; background: rgba(199,166,92,0.14); margin-top: 12px; overflow: hidden; opacity: 0; transition: opacity .4s ease; }
    .ls-item.active .ls-bar { opacity: 1; }
    .ls-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); transform: scaleX(0); transform-origin: left; }
    .ls-item.active.playing .ls-bar i { animation: lsFill var(--step-ms, 5000ms) linear forwards; }
    .live-show.paused .ls-item.active .ls-bar i { animation-play-state: paused; }
    @keyframes lsFill { to { transform: scaleX(1); } }

    /* screen 1: discover, ranked by compatibility */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    @keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

    /* screen 2: their card says they're intrigued; you like them back */
    
    
    
    
    
    
    
    
    
    .round { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(14,12,15,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(228,198,135,0.35); color: var(--cream); }
    .round svg { width: 17px; height: 17px; }
    
    
    
    
    
    .tap { position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(242,236,223,0.7); opacity: 0; pointer-events: none; }
    
    
    @keyframes tap { 0% { opacity: 0; transform: scale(1.8); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(0.7); } }
    
    

    /* screen 3: photos stay blurred until they approve you */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    /* screen 4: a private conversation */
    
    
    
    
    
    
    
    
    
    .typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 13px; border-radius: 16px; background: rgba(255,255,255,0.07); opacity: 0; }
    .typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--smoke); animation: dots 1s ease-in-out infinite; }
    .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
    @keyframes dots { 50% { transform: translateY(-3px); opacity: .5; } }
    
    
    
    
    
    
    
    

    /* screen 5: terms in writing, signed by both */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    @keyframes sign { to { clip-path: inset(0 0 0 0); } }
    
    
    
    @keyframes seal { to { opacity: 1; transform: scale(1) rotate(-14deg); } }

    /* ---------- section: inside each membership ---------- */
    .inside {
      position: relative; padding: 150px 0 160px; overflow: hidden;
      background:
        radial-gradient(ellipse 45% 55% at 74% 52%, rgba(199, 166, 92, 0.10), transparent 72%),
        linear-gradient(180deg, var(--noir) 0%, #0f0d0c 50%, var(--noir) 100%);
    }
    
    .tier-switch { display: inline-flex; padding: 5px; margin-bottom: 40px; border-radius: 999px; background: rgba(255,255,255,0.03); box-shadow: inset 0 0 0 1px var(--line-strong); }
    .tier-switch button:focus-visible { border-radius: 999px; outline-offset: 2px; }
    .tier-switch button {
      position: relative; overflow: hidden; padding: 11px 24px; border: 0; border-radius: 999px; background: none; cursor: pointer;
      font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke);
      transition: color .4s ease, background .4s ease;
    }
    .tier-switch button:hover { color: var(--cream); }
    .tier-switch button.active { color: var(--noir); background: var(--gold-fill); }
    .tier-switch button i { position: absolute; left: 18%; right: 18%; bottom: 5px; height: 1px; background: rgba(11,10,12,0.45); transform: scaleX(0); transform-origin: left; }
    .tier-switch button.active.playing i { animation: lsFill var(--tier-ms, 9000ms) linear forwards; }
    .inside-show.paused .tier-switch button.active i { animation-play-state: paused; }
    /* the copy column lines up with the heading above it */
    .inside-show { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(60px, 8vw, 120px); align-items: center; }
    
    
    @keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    
    
    
    
    .tp-list { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; max-width: 640px; }
    .tp-list li { border-top: 1px solid var(--line-strong); padding-top: 14px; }
    .tp-list b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
    .tp-list span { display: block; font-size: 16px; line-height: 1.6; color: var(--smoke); margin-top: 6px; }
    

    
    
    
     
     
    
    @keyframes flipIn { to { opacity: 1; transform: none; } }
    
    
    
    

    
    
    
    
    
    @keyframes segOn { to { background: var(--gold); color: var(--noir); } }
    .chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .chip { padding: 5px 10px; border-radius: 999px; font-size: 10.5px; color: var(--smoke); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
    
    
    
    
    @keyframes chipOn { to { color: var(--gold-bright); background: rgba(199,166,92,0.14); box-shadow: inset 0 0 0 1px var(--gold); } }
    
    
    
    
    
    

    
    .map .road { position: absolute; background: rgba(255,255,255,0.06); }
    .map .zone { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(107,26,48,0.42), rgba(107,26,48,0.12) 65%, transparent 70%); box-shadow: inset 0 0 0 1px rgba(176,68,95,0.6); transform: scale(0); }
    
    
    @keyframes zoneIn { to { transform: scale(1); } }
    .map .zone em { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-style: normal; font-family: var(--font-mono); font-size: 9px; color: #f2c4d0; white-space: nowrap; }
    .map .dot { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 8px rgba(228,198,135,0.7); transition: opacity .6s ease; }
    
    @keyframes dotHide { to { opacity: 0.12; box-shadow: none; } }
    
    
    
    
    
    
    
    
    @keyframes tgOn { to { background: var(--forest-bright); } }
    

    @media (max-width: 1000px) {
      .live, .inside { padding: 110px 0 120px; }
      .live-show, .inside-show { grid-template-columns: 1fr; gap: 100px; max-width: 560px; margin: 0 auto; }
      
      
      /* heading, phone, then the steps; tier tabs sit above the phone they drive */
      .live-show { gap: 0; }
      .live-side { display: contents; }
      .live-head { order: -1; margin-bottom: 70px; }
      .live-steps { margin-top: 110px; }
      .inside-show { gap: 0; }
      .tier-switch { order: -2; justify-self: start; margin-bottom: 60px; }
      .inside-show .demo-phone { order: -1; margin-bottom: 110px; }
    }
    @media (max-width: 600px) {
      .live, .inside { padding: 90px 0 100px; }
      .live-head { margin-bottom: 36px; }
      .live-head { margin-bottom: 56px; }
      .live-steps { margin-top: 96px; }
      .inside-show .demo-phone { margin-bottom: 96px; }
      .section-lede { font-size: 16.5px; }
      .ls-item { grid-template-columns: 40px 1fr; padding: 16px 0; }
      .tp-list { grid-template-columns: 1fr; gap: 18px; }
      .tier-switch { width: 100%; }
      .tier-switch button { flex: 1; padding: 11px 6px; }
      /* phones get less glow: the light sits behind the phone only */
      .live { background: linear-gradient(180deg, var(--noir) 0%, var(--tint-wine) 50%, var(--noir) 100%); }
      .inside { background: linear-gradient(180deg, var(--noir) 0%, #0f0d0c 50%, var(--noir) 100%); }
      .demo-phone .phone-glow { opacity: 0.6; }
      .demo-chip { font-size: 10.5px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .live-dot, .typing i { animation: none; }
      .demo-phone .phone-frame { animation: none; }
      .sc, .sc *, .sc *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
      .ls-bar, .tier-switch button i { display: none; }
    }

/* ---------------- age gate ---------------- */
    .age-gate{
      position:fixed; inset:0; z-index:999999; background:var(--noir);
      display:flex; align-items:center; justify-content:center; padding:24px;
      /* The site hides the real OS cursor (body{cursor:none}) in favor of a
         custom #cursor-dot/#cursor-ring pair, but those sit at z-index:10050
         — well below this overlay's z-index:999999, so they render hidden
         underneath the card. Restoring the normal cursor here (rather than
         chasing the decorative cursor's z-index) is the correct fix for a
         blocking modal anyway. */
      cursor:auto;
    }
    .age-gate[hidden], html.fz-age-ok .age-gate{ display:none; }
    .age-gate-card{
      max-width:460px; width:100%; text-align:center; padding:48px 36px;
      background:var(--noir-soft); border:1px solid var(--line-strong); border-radius:8px;
    }
    /* first visit: the age check doubles as the welcome, so the emblem lives here */
    .age-gate-emblem{ display:block; width:96px; height:96px; margin:0 auto 22px; filter:drop-shadow(0 10px 26px rgba(199,166,92,0.25)); animation:preloaderIn 1.2s cubic-bezier(.2,.7,.2,1) both; }
    .age-gate-eyebrow{
      display:block; font-family:var(--font-serif); font-size:11px; letter-spacing:0.18em;
      text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:16px;
    }
    .age-gate-title{
      font-family:var(--font-serif); font-weight:400; font-size:26px; line-height:1.2; color:var(--cream);
      margin:0 0 16px;
    }
    .age-gate-body{
      font-family:"Times New Roman", Times, serif;
      font-size:13px; line-height:1.7; color:var(--smoke); margin:0 0 28px;
    }
    .age-gate-actions{ display:flex; flex-direction:column; gap:12px; margin-bottom:22px; }
    .age-gate-btn{
      display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:14px 20px;
      border:1px solid var(--gold); border-radius:999px;
      font-family:"Times New Roman", Times, serif;
      font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; text-decoration:none;
      transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    }
    .age-gate-btn:hover{ transform:translateY(-2px); }
    .age-gate-enter{ background:var(--gold-fill); color:var(--noir); }
    .age-gate-enter:hover{ background:linear-gradient(117.7deg, var(--wine-bright) 0%, var(--wine) 100%); border-color:var(--wine-bright); color:var(--cream); }
    .age-gate-exit{ background:transparent; color:var(--smoke); border-color:var(--line-strong); }
    .age-gate-exit:hover{ color:var(--cream); border-color:var(--line-strong); }
    .age-gate-legal{ font-family:var(--font-sans); font-size:11px; color:var(--smoke); margin:0; }
    .age-gate-legal a{ color:var(--smoke); text-decoration:underline; }
    /* The hero's drift/zoom and fade-in animations wait while the age gate covers them. */
    body.age-gate-active .hero *{ animation-play-state:paused !important; }
    .age-gate-legal a:hover{ color:var(--gold-bright); }
    body.age-gate-active{ overflow:hidden; }

    /* ---------- landing: Masquerade membership teaser ---------- */
    .masq-band { padding: 40px 0 150px; }
    .masq-panel {
      position: relative; overflow: hidden; isolation: isolate;
      display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 60px; align-items: center;
      padding: clamp(36px, 6vw, 80px); border-radius: 28px;
      background: linear-gradient(140deg, #1a0d13, #0e0b0d 55%, #14110b);
      box-shadow: inset 0 0 0 1px var(--line-strong), 0 40px 90px rgba(0, 0, 0, 0.45);
    }
    /* slow drifting light, our answer to Feeld's moving gradient */
    .masq-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
    .masq-glow i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; animation: masqDrift 18s ease-in-out infinite alternate; }
    .masq-glow i:nth-child(1) { width: 46%; height: 70%; left: -8%; top: -20%; background: rgba(107, 26, 48, 0.7); }
    .masq-glow i:nth-child(2) { width: 40%; height: 60%; right: -6%; bottom: -25%; background: rgba(199, 166, 92, 0.32); animation-duration: 22s; animation-delay: -6s; }
    .masq-glow i:nth-child(3) { width: 30%; height: 50%; left: 40%; top: 30%; background: rgba(74, 44, 82, 0.45); animation-duration: 26s; animation-delay: -12s; }
    @keyframes masqDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(12%, 10%) scale(1.15); } }
    .masq-copy .display-xl { margin-top: 16px; }
    .masq-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
    
    
    
    
    
    
    
    
    @media (max-width: 1000px) {
      .masq-panel { grid-template-columns: 1fr; gap: 40px; }
    }
    @media (max-width: 600px) {
      .masq-band { padding: 10px 0 100px; }
      .masq-panel { border-radius: 22px; padding: 34px 22px; }
      .masq-glow i { opacity: 0.4; }
      
      
      .masq-cta .btn { flex: 1 1 100%; }
    }
    @media (prefers-reduced-motion: reduce) { .masq-glow i { animation: none; } }

    /* ---------- privacy & safety, expanded (Oct 2026): eight protections ---------- */
    .privacy-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; text-align: left; max-width: none; margin: 0 0 64px; }
    .privacy-head > div { max-width: 760px; }
    .privacy-head h2.display-xl { font-size: clamp(42px, 5.4vw, 78px); white-space: normal; }
    .privacy-head .btn { flex-shrink: 0; }
    .privacy-show { max-width: none; margin: 0; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(50px, 8vw, 110px); }
    .pf-item { grid-template-columns: 44px 1fr; padding: 15px 22px 13px; opacity: 0.42; transition: background .6s ease, box-shadow .6s ease, margin .6s ease, opacity .5s ease; }
    .pf-item:hover { opacity: 0.8; }
    .pf-item.active { opacity: 1; padding: 22px 22px 20px; }
    .pf-num { font-family: var(--font-mono); font-style: normal; font-size: 12px; letter-spacing: 0.08em; padding-top: 9px; }
    .pf-text strong { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.25; }
    .phone-tag.on { opacity: 1; transform: none; transition-delay: .25s; }

    /* 01 verified */
    
    
    
    
    
    
    @keyframes pvPop { to { transform: scale(1); } }
    
    
    
    
    
    
    
    
    

    /* 02 read by a person */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    /* 07 messages that disappear: the first message fades away as you watch */
    
    
    @keyframes vanish { from { opacity: 1; } to { opacity: 0; filter: blur(6px); transform: translateY(-6px); } }

    /* 08 report: the sheet rises, a reason is chosen, it's sent */
    .ps-report { padding-bottom: 12px; }
    
    
    
    
    @keyframes sheetUp { to { transform: none; } }
    
    
    
    
    @keyframes rpPick { to { color: #f6dbe2; background: rgba(107, 26, 48, 0.6); box-shadow: inset 0 0 0 1px var(--wine-bright); } }
    
    
    
    

    /* the commitments, drifting past in a strip */
    .trust-strip { margin-top: 90px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
    .trust-track { display: flex; width: max-content; animation: trustScroll 45s linear infinite; }
    .trust-strip:hover .trust-track { animation-play-state: paused; }
    .trust-set { display: flex; list-style: none; margin: 0; padding: 0; }
    .trust-set li { display: flex; align-items: center; gap: 22px; padding: 22px 11px 22px 11px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke); white-space: nowrap; }
    .trust-set li::after { content: "✦"; color: var(--gold); font-size: 10px; }
    @keyframes trustScroll { to { transform: translateX(-50%); } }

    @media (max-width: 1000px) {
      .privacy-head { max-width: 520px; margin-left: auto; margin-right: auto; }
      .privacy-show { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 100px; }
      .phone-tag.on { transform: translate(-50%, 0); }
    }
    @media (max-width: 600px) {
      .pf-item { grid-template-columns: 34px 1fr; padding: 13px 14px 11px; }
      .pf-item.active { padding: 18px 14px 16px; }
      .trust-strip { margin-top: 60px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .trust-track { animation: none; width: auto; }
      .trust-set { flex-wrap: wrap; justify-content: center; }
      .trust-set[aria-hidden="true"] { display: none; }
      
      .privacy-phone .ps, .privacy-phone .ps * { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
    }

    /* ---------- the bar steps out of the way while you read (Oct 2026) ----------
       Scrolling down slides it up out of view; scrolling up brings it back. */
    header { transition: translate .45s cubic-bezier(.2, .7, .2, 1); }
    header.nav-hidden { translate: 0 -105%; }

    /* ---------- the unicorn, as a shadow behind a section ---------- */
    .meeting { position: relative; isolation: isolate; overflow: hidden; }
    .meeting::before,
    .masq-panel::after {
      content: ""; position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 1;
      background: url("/LandingPage/videos/fantasi-emblem.webp?v=2") center / contain no-repeat;
      filter: grayscale(0.3) brightness(0.9) blur(1.5px); opacity: 0.075;
    }
    .meeting::before { width: min(760px, 92vw); left: 50%; top: 50%; transform: translate(-50%, -50%); }
    /* the meeting section: a wine glow, centred right behind the unicorn */
    .meeting {
      background:
        radial-gradient(ellipse 58% 44% at 50% 50%, var(--wash-wine), transparent 72%),
        radial-gradient(ellipse 40% 28% at 85% 74%, var(--wash-wine-soft), transparent 70%),
        linear-gradient(180deg, var(--noir) 0%, var(--tint-wine) 45%, var(--noir) 100%);
    }
    .masq-panel::after { width: min(560px, 80%); right: -6%; top: 50%; transform: translateY(-50%) rotate(-8deg); opacity: 0.09; }

    /* ---------- groups & events ---------- */
    .together { padding: 130px 0; position: relative; }
    .together-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 56px; }
    .together-head > div { max-width: 720px; }
    .together-head .btn { flex-shrink: 0; }
    .together-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .tg-card h3 { font-family: var(--font-serif); font-style: normal; font-size: clamp(22px, 2vw, 27px); line-height: 1.2; margin: 26px 0 10px; color: var(--cream); }
    .tg-card > p { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--smoke); }
    .tg-visual {
      position: relative; aspect-ratio: 5 / 4.6; border-radius: 24px; overflow: hidden; display: grid; place-items: center; padding: 22px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
    .tg-visual--wine { background: radial-gradient(ellipse at 30% 0%, rgba(176, 68, 95, 0.32), transparent 60%), linear-gradient(160deg, #2a0f19, #120a0d 75%); }
    .tg-visual--forest { background: radial-gradient(ellipse at 70% 0%, rgba(78, 156, 121, 0.26), transparent 60%), linear-gradient(160deg, #10241b, #0b100d 75%); }
    .tg-visual--plum { background: radial-gradient(ellipse at 50% 0%, rgba(160, 120, 175, 0.24), transparent 60%), linear-gradient(160deg, #22142a, #0f0b12 75%); }
    .tgx {
      width: 100%; max-width: 330px; border-radius: 18px; padding: 18px; color: var(--cream);
      background: rgba(11, 10, 12, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 24px 50px rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      transform: translateY(10px); opacity: 0; transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .8s ease;
    }
    .tg-card.play .tgx { transform: none; opacity: 1; }

    /* group card */
    .tgx-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
    .tgx-chip { padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; color: #f2c4d0; background: rgba(107, 26, 48, 0.45); box-shadow: inset 0 0 0 1px rgba(176, 68, 95, 0.5); }
    .tgx-loc { font-family: var(--font-mono); font-size: 9.5px; color: var(--smoke); }
    .tgx-name { margin: 14px 0 4px; font-family: var(--font-serif); font-style: italic; font-size: 24px; line-height: 1.1; }
    .tgx-desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--smoke); }
    .tgx-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
    .tgx-faces { display: flex; align-items: center; }
    .tgx-faces i { width: 26px; height: 26px; border-radius: 50%; margin-right: -8px; box-shadow: 0 0 0 2px #120a0d; background: radial-gradient(circle at 50% 35%, rgba(242, 236, 223, 0.35), rgba(107, 26, 48, 0.8) 70%); filter: blur(0.4px); }
    .tgx-faces i:nth-child(2) { background: radial-gradient(circle at 50% 35%, rgba(242, 236, 223, 0.3), rgba(30, 74, 56, 0.85) 70%); }
    .tgx-faces i:nth-child(3) { background: radial-gradient(circle at 50% 35%, rgba(242, 236, 223, 0.3), rgba(199, 166, 92, 0.6) 70%); }
    .tgx-faces i:nth-child(4) { background: radial-gradient(circle at 50% 35%, rgba(242, 236, 223, 0.3), rgba(74, 44, 82, 0.85) 70%); }
    .tgx-faces b { margin-left: 16px; font-family: var(--font-mono); font-weight: 400; font-size: 9.5px; color: var(--smoke); }
    .tgx-join { position: relative; display: grid; padding: 8px 14px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--noir); background: var(--gold-fill); overflow: hidden; }
    .tgx-join span { grid-area: 1 / 1; text-align: center; transition: opacity .4s ease, transform .4s ease; }
    .tgx-join .on { opacity: 0; transform: translateY(8px); color: #d6efe2; }
    .tg-card.play .tgx-join { animation: joined .4s ease 1.6s forwards; }
    .tg-card.play .tgx-join span:first-child { animation: outUp .4s ease 1.6s forwards; }
    .tg-card.play .tgx-join .on { animation: inUp .4s ease 1.7s forwards; }
    @keyframes joined { to { background: rgba(30, 74, 56, 0.9); box-shadow: inset 0 0 0 1px var(--forest-bright); } }
    @keyframes outUp { to { opacity: 0; transform: translateY(-8px); } }
    @keyframes inUp { to { opacity: 1; transform: none; } }
    .tgx-next { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12.5px; }
    .tgx-next small { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); }
    .tgx-next em { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--smoke); }

    /* events card */
    .tgx-month { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
    .tgx-month b { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 20px; }
    .tgx-month span { font-family: var(--font-mono); font-size: 11px; color: var(--smoke); letter-spacing: 0.3em; }
    .tgx-days, .tgx-dates { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
    .tgx-days span { font-family: var(--font-mono); font-size: 8.5px; color: var(--smoke-dim); padding-bottom: 6px; }
    .tgx-dates span { position: relative; font-family: var(--font-mono); font-size: 10px; line-height: 24px; color: rgba(242, 236, 223, 0.7); }
    .tgx-dates .ev::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--forest-bright); }
    .tgx-dates .pick { color: var(--noir); }
    .tgx-dates .pick::before { content: ""; position: absolute; inset: 1px 3px; z-index: -1; border-radius: 8px; background: var(--gold-bright); transform: scale(0); }
    .tgx-dates .pick { z-index: 0; }
    .tg-card.play .tgx-dates .pick::before { animation: pvPop .4s cubic-bezier(.3, 1.5, .5, 1) .8s forwards; }
    .tgx-dates .pick { color: rgba(242, 236, 223, 0.7); }
    .tg-card.play .tgx-dates .pick { animation: inkDark .2s ease 1s forwards; }
    @keyframes inkDark { to { color: var(--noir); } }
    .tgx-event { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); opacity: 0; transform: translateY(6px); }
    .tg-card.play .tgx-event { animation: fadeUp .5s ease 1.1s forwards; }
    .tgx-event b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 14px; }
    .tgx-event small { font-family: var(--font-mono); font-size: 9px; color: var(--smoke); }
    .tgx-rsvp { display: flex; flex-shrink: 0; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font-family: var(--font-mono); font-size: 9px; }
    .tgx-rsvp span { padding: 5px 9px; border-radius: 999px; color: var(--smoke); }
    .tg-card.play .tgx-rsvp .go { animation: goOn .35s ease 2s forwards; }
    @keyframes goOn { to { color: #08100c; background: var(--forest-bright); } }

    /* room card */
    .tgx-roomhead { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .tgx-roomhead b { font-family: var(--font-mono); font-weight: 500; font-size: 12px; }
    .tgx-tier { padding: 4px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: 9px; color: #e7a1b4; box-shadow: inset 0 0 0 1px rgba(176, 68, 95, 0.55); background: rgba(14, 12, 15, 0.8); }
    .tgx-msgs { display: flex; flex-direction: column; gap: 9px; padding: 14px 0; min-height: 150px; justify-content: flex-end; }
    .tgx-msgs p { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(242, 236, 223, 0.86); opacity: 0; transform: translateY(6px); }
    .tgx-msgs b { font-family: var(--font-mono); font-weight: 500; font-size: 10px; color: #d6b8e2; margin-right: 6px; }
    .tg-card.play .tgx-msgs .m1 { animation: fadeUp .4s ease .6s forwards; }
    .tg-card.play .tgx-msgs .m2 { animation: fadeUp .4s ease 1.5s forwards; }
    .tg-card.play .tgx-msgs .m3 { animation: fadeUp .4s ease 2.4s forwards; }
    .tgx-input { padding: 9px 12px; border-radius: 999px; font-size: 11.5px; color: var(--smoke-dim); background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }

    @media (max-width: 1000px) {
      .together-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 44px; }
      .together-head { max-width: 520px; margin-left: auto; margin-right: auto; }
    }
    @media (max-width: 600px) {
      .together { padding: 90px 0; }
      .meeting::before { width: 120vw; }
    }
    @media (prefers-reduced-motion: reduce) {
      header { transition: none; }
      .tgx { transition: none; transform: none; opacity: 1; }
      .tg-card .tgx *, .tg-card .tgx *::before { animation-duration: 1ms !important; animation-delay: 0s !important; }
    }

    /* ---------- a call to action that holds still while the features change ----------
       It sits under each feature list; every description keeps the same
       room, so switching features never moves the button. */
    .feature-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; }
    .feature-cta span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); }
    .ls-item.active .ls-text > span { min-height: calc(1.65em * 3); }
    .pf-item.active .pf-text span { min-height: calc(1.7em * 3); }
    .privacy-list .feature-cta { padding-left: 22px; }
    @media (max-width: 1000px) {
      .live-show .feature-cta { margin-top: 26px; }
    }
    @media (max-width: 600px) {
      .feature-cta .btn { flex: 1 1 100%; }
      .feature-cta span { flex: 1 1 100%; text-align: center; }
      .privacy-list .feature-cta { padding-left: 0; }
      .ls-item.active .ls-text > span, .pf-item.active .pf-text span { min-height: calc(1.65em * 4); }
    }

    /* ---------- no hard lines between sections (Oct 2026) ----------
       Sections flow into each other through their gradients alone: no
       full-width hairlines, no divider rules, and no borders on the strip. */
    .benefits, .values, .how, .privacy, .desires { border-top: 0; }
    .site-footer { border-top: 0; }
    /* the divider under the opening: a faint line either side of the unicorn, fading out at the ends */
    .luxury-divider span { background: linear-gradient(90deg, transparent, rgba(199, 166, 92, 0.22)); }
    .luxury-divider span:last-child { background: linear-gradient(90deg, rgba(199, 166, 92, 0.22), transparent); }
    .trust-strip { border-top: 0; border-bottom: 0; }
    /* the opening video fades into the page instead of stopping at a straight edge */
    .hero-media { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
    /* the envelope photo fades out at its top, bottom and inner edge */
    .founder-note-bg {
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(90deg, #000 62%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(90deg, #000 62%, transparent 100%);
      mask-composite: intersect;
    }
    .benefits-closing { border-top: 0; }
    /* the footer starts on the same black the page ends on */
    .site-footer { background: radial-gradient(ellipse 50% 45% at 50% 34%, rgba(107, 26, 48, 0.12), transparent 70%), var(--noir); }

    /* ---------- footer: the brand, then every public page in columns (Oct 2026) ---------- */
    .site-footer .sf-wrap { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 64px; max-width: 1240px; }
    .site-footer .sf-logo { width: 150px; margin: 0 0 22px; }
    .site-footer .sf-brand p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--smoke); }
    .site-footer .sf-brand .sf-pledge { color: var(--cream); font-size: 14px; letter-spacing: 0.02em; }
    .site-footer .sf-contact a { color: var(--gold-bright); }
    .site-footer .sf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
    .site-footer .sf-col { display: flex; flex-direction: column; gap: 11px; }
    .site-footer .sf-col h2 { margin: 0 0 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
    .site-footer .sf-col a { font-size: 15px; line-height: 1.4; color: var(--smoke); transition: color .3s ease; }
    .site-footer .sf-col a:hover { color: var(--gold-bright); }
    .site-footer .sf-bottom { max-width: 1240px; margin-top: 54px; padding-top: 22px; font-size: 13px; letter-spacing: 0.03em; color: var(--smoke-dim);
      background: linear-gradient(90deg, transparent, rgba(199, 166, 92, 0.18), transparent) top / 100% 1px no-repeat; }
    @media (max-width: 1000px) {
      .site-footer .sf-wrap { grid-template-columns: 1fr; gap: 44px; }
      .site-footer .sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
    }

    .privacy-head .section-lede a { color: var(--gold-bright); text-decoration: underline; text-decoration-color: rgba(228, 198, 135, 0.45); text-underline-offset: 4px; }

    /* "Every match starts with clarity": the body copy sits over the wine glow
       and the unicorn, so it's brighter, a touch larger, and lifted off the
       background with a soft shadow; the unicorn steps back a little */
    .meeting-copy p { font-size: 19px; color: #CDBFA8; text-shadow: 0 1px 14px rgba(11, 10, 12, 0.85), 0 0 2px rgba(11, 10, 12, 0.6); }
    .meeting-copy .meeting-tagline { color: var(--gold-bright); font-size: 20px; }
    .meeting::before { opacity: 0.055; }
    @media (max-width: 600px) { .meeting-copy p { font-size: 17.5px; } }

    /* ---------- one gold for every highlighted heading word (Oct 2026) ----------
       Every <em> in a heading uses the same gold gradient, so a highlight looks
       the same in each section (and on the Masquerade page). */
    h1 em, h2 em, .display-xl em, .how-head h2 em, .privacy-head h2 em, .desires-head h2 em, .final-statement h2 em, .eyebrow + h2 em,
    .pf-item.active .pf-num {
      color: transparent;
      background: var(--gold-text);
      -webkit-background-clip: text; background-clip: text;
      -webkit-box-decoration-break: clone; box-decoration-break: clone;
      /* italic script letters lean past their box; a little room keeps the swash inside the gradient */
      padding-right: 0.08em; margin-right: -0.08em;
    }

    /* each level in its own metal, matching the masks on the Masquerade page:
       silver, gold, and Black in wine-rose */
    
    
    
    

    /* under each feature list: a link to that topic's own page */
    .feature-cta .fc-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-bright); }
    .feature-cta .fc-link::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform .3s ease; }
    .feature-cta .fc-link:hover::after { transform: translateX(4px); }
    @media (max-width: 600px) { .feature-cta .fc-link { flex: 1 1 100%; text-align: center; } }

.masq-band .masq-panel { grid-template-columns: 1fr; }
.masq-band .masq-copy { max-width: 720px; }