/* App previews (Oct 2026): the phone screens on the landing and Masquerade
   pages, drawn to look like the real Fantasi app (status bar, app header,
   eyebrow + script title, tier badges, bottom tab bar). Each screen acts
   itself out when it gains .active (the page scripts re-add it to replay).
   Generated markup lives in the pages; see the ax- classes below. */

.phone-screen .app {
  padding: 0; gap: 0; display: flex; flex-direction: column;
  font-family: var(--font-serif); color: var(--cream);
  background: radial-gradient(ellipse 130% 55% at 50% 0%, #19120f, #0b0a0c 62%);
  container-type: inline-size;
}

/* ---------- chrome ---------- */
.ax-status { flex: none; height: 25px; display: flex; justify-content: space-between; align-items: center; padding: 7px 17px 0 21px; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--cream); }
.ax-sys { display: flex; align-items: center; gap: 4px; }
.ax-sys svg { width: 13px; height: 9px; fill: var(--cream); }
.ax-batt { position: relative; width: 19px; height: 9px; border-radius: 2.5px; box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.55); }
.ax-batt::after { content: ""; position: absolute; right: -2.5px; top: 3px; width: 1.5px; height: 3px; border-radius: 1px; background: rgba(242, 236, 223, 0.55); }
.ax-batt i { position: absolute; inset: 1.5px 4px 1.5px 1.5px; border-radius: 1.5px; background: var(--cream); }
.ax-head { flex: none; display: flex; align-items: center; gap: 5px; padding: 5px 9px 7px; border-bottom: 1px solid rgba(199, 166, 92, 0.14); }
.ax-logo { height: 17px; width: auto; margin-right: 2px; }
.ax-ic { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.4); }
.ax-ic svg { width: 9px; height: 9px; }
.ax-boost { margin-left: auto; padding: 3px 8px; border-radius: 999px; font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--noir); background: var(--gold-fill); }
.ax-me { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-sans); font-size: 11px; color: var(--noir); background: linear-gradient(140deg, #f3e2b0, var(--gold)); }
.ax-body { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 9px; padding: 11px 11px 9px; }
.ax-tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 6px 13px; border-top: 1px solid rgba(199, 166, 92, 0.14); background: rgba(11, 10, 12, 0.94); position: relative; }
.ax-tabs::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 70px; height: 3px; margin-left: -35px; border-radius: 3px; background: rgba(242, 236, 223, 0.5); }
.ax-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--smoke-dim); }
.ax-tab svg { width: 12px; height: 12px; }
.ax-tab b { font-weight: 400; font-size: 7px; }
.ax-tab.on { color: var(--gold-bright); }
.ax-tab.on::before { content: ""; position: absolute; top: -7px; left: 20%; right: 20%; height: 1.5px; background: var(--gold-bright); }

/* ---------- shared pieces ---------- */
.ax-hd { display: flex; flex-direction: column; gap: 2px; }
.ax-eyebrow { font-size: 7px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.ax-title { font-family: var(--font-sans); font-size: 21px; line-height: 1.1; color: var(--cream); }
.ax-sub { font-size: 8.5px; color: var(--smoke); }
.ax-sub em { font-style: normal; color: var(--gold-dim); }
.ax-label { font-size: 7px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.ax-label.row { display: flex; justify-content: space-between; align-items: baseline; }
.ax-label small { letter-spacing: 0.02em; text-transform: none; font-size: 7.5px; color: var(--smoke-dim); }
.ax-chiprow { display: flex; gap: 4px; }
.ax-chip { padding: 3px 8px; border-radius: 999px; font-size: 7.5px; color: var(--smoke); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.25); }
.ax-chip.on { color: var(--noir); background: var(--gold-bright); box-shadow: none; }
.ax-tier { display: inline-block; padding: 2px 6px; border-radius: 999px; font-size: 7.5px; letter-spacing: 0.06em; line-height: 1.2; }
.ax-tier.gold { color: var(--noir); background: var(--gold-fill); }
.ax-tier.black { color: var(--cream); background: #0b0a0c; box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.35); }
.ax-init { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-sans); font-size: 34px; color: var(--gold); }
.ax-round { position: absolute; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--cream); background: rgba(11, 10, 12, 0.55); box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ax-round svg { width: 11px; height: 11px; }
.ax-round.sm { position: static; width: 20px; height: 20px; }
.ax-tap { position: absolute; z-index: 30; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(242, 236, 223, 0.35); box-shadow: 0 0 0 1.5px rgba(242, 236, 223, 0.7); opacity: 0; pointer-events: none; }
@keyframes axTap { 0% { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; transform: scale(1); } 60% { opacity: 1; transform: scale(0.82); } 100% { opacity: 0; transform: scale(1.5); } }

@keyframes axIn { to { opacity: 1; transform: none; } }
@keyframes axOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes axDrop { 0% { opacity: 0; transform: translateY(-120%); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-120%); } }

/* member card, as in Discover */
.ax-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ax-mc { border-radius: 9px; overflow: hidden; background: linear-gradient(175deg, #221811, #0f0c0d); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.22); }
.ax-ph { position: relative; aspect-ratio: 1 / 0.95; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, rgba(199, 166, 92, 0.14), transparent 70%); }
.ax-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.82) saturate(0.85); }
.ax-ph .ax-tier { position: absolute; top: 5px; right: 5px; }
.ax-ph::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(11, 10, 12, 0.9)); }
.ax-nm { position: absolute; z-index: 1; left: 6px; right: 6px; bottom: 3px; font-family: var(--font-sans); font-size: 14px; line-height: 1.1; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-meta { padding: 4px 6px 0; font-size: 7.5px; color: var(--cream); }
.ax-why { padding: 1px 6px 4px; font-family: var(--font-mono); font-size: 7px; color: var(--gold-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-acts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(199, 166, 92, 0.15); }
.ax-acts span { display: grid; place-items: center; height: 18px; color: var(--smoke); }
.ax-acts span + span { border-left: 1px solid rgba(199, 166, 92, 0.15); }
.ax-acts svg { width: 9px; height: 9px; }

/* profile view (full-bleed photo) */
.ax-profile .ax-body { padding: 0 0 9px; gap: 9px; }
.ax-hero { position: relative; flex: none; height: 54%; min-height: 0; overflow: hidden; }
.ax-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85) saturate(0.85); }
.ax-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 12, 0.35), transparent 30%, transparent 48%, rgba(11, 10, 12, 0.96)); }
.ax-back { top: 8px; left: 9px; }
.ax-more { top: 8px; right: 9px; }
.ax-who { position: absolute; left: 11px; right: 11px; bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.ax-name { display: flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 22px; line-height: 1; color: var(--cream); }
.ax-verified { width: 12px; height: 12px; border-radius: 50%; display: grid; place-items: center; background: var(--forest-bright); color: #08100c; }
.ax-verified svg { width: 8px; height: 8px; }
.ax-chips { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.ax-loc { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 999px; font-size: 7px; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.35); }
.ax-loc svg { width: 7px; height: 7px; }
.ax-sect { display: flex; flex-direction: column; gap: 5px; padding: 0 11px; position: relative; }
.ax-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ax-tags span { padding: 3px 7px; border-radius: 999px; font-size: 7.5px; color: var(--gold-bright); background: rgba(199, 166, 92, 0.1); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.35); opacity: 0; transform: translateY(5px); }
.ax-tags.plain span { color: var(--cream); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.ax-tags b { font-weight: 400; font-family: var(--font-mono); font-size: 7px; color: var(--gold-dim); margin-left: 3px; }
.ax-p { margin: 0; font-size: 8.5px; line-height: 1.5; color: var(--smoke); }
.ax-fine { margin: 0; padding: 0 11px; font-size: 7.5px; line-height: 1.5; color: var(--smoke-dim); }
.ax-cta { margin: auto 11px 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px; border-radius: 999px; font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--noir); background: var(--gold-fill); }
.ax-cta svg { width: 9px; height: 9px; }
.ax-notif { position: absolute; z-index: 25; top: 6px; left: 7px; right: 7px; display: flex; gap: 7px; align-items: flex-start; padding: 8px 9px; border-radius: 13px; font-size: 7.5px; line-height: 1.45; color: var(--cream); background: rgba(38, 33, 36, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(-120%); }
.ax-notif img { width: 18px; height: 18px; border-radius: 5px; background: #0b0a0c; padding: 2px; flex-shrink: 0; }
.ax-notif b { font-family: -apple-system, Arial, sans-serif; font-size: 7.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--smoke); font-weight: 600; }
.ax-notif small { float: right; color: var(--smoke-dim); font-size: 7px; }
.ax-toast { position: absolute; z-index: 25; left: 10px; right: 10px; top: 64px; display: flex; gap: 7px; align-items: center; padding: 8px 10px; border-radius: 12px; font-size: 7.5px; line-height: 1.45; color: var(--cream); background: rgba(78, 18, 32, 0.92); box-shadow: inset 0 0 0 1px rgba(176, 68, 95, 0.6), 0 10px 24px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(8px); }
.ax-toast svg { width: 12px; height: 12px; flex-shrink: 0; color: #f2a3b8; fill: currentColor; }

/* ---------- live 1: Discover ---------- */
.ax-feed { position: relative; flex: 1; min-height: 0; overflow: hidden; -webkit-mask: linear-gradient(#000 88%, transparent); mask: linear-gradient(#000 88%, transparent); }
.ax-discover .ax-mc { opacity: 0; transform: translateY(12px); }
.ax-discover.active .ax-mc { animation: axIn .55s cubic-bezier(.2, .8, .2, 1) forwards; }
.ax-discover.active .ax-mc:nth-child(2) { animation-delay: .12s; }
.ax-discover.active .ax-mc:nth-child(3) { animation-delay: .24s; }
.ax-discover.active .ax-mc:nth-child(4) { animation-delay: .36s; }
.ax-discover.active .ax-mc:nth-child(5) { animation-delay: .48s; }
.ax-discover.active .ax-mc:nth-child(6) { animation-delay: .6s; }
.ax-discover.active .ax-scroll { animation: axScroll 1.4s cubic-bezier(.45, 0, .2, 1) 2.2s forwards, axScrollBack 1s cubic-bezier(.45, 0, .2, 1) 4s forwards; }
@keyframes axScroll { to { transform: translateY(-42%); } }
@keyframes axScrollBack { from { transform: translateY(-42%); } to { transform: none; } }
.ax-discover .ax-mc.top { transition: box-shadow .6s ease; }
.ax-discover.active .ax-mc.top { animation: axIn .55s cubic-bezier(.2, .8, .2, 1) forwards, axRing .6s ease 1.1s forwards; }
@keyframes axRing { to { box-shadow: inset 0 0 0 1.5px var(--gold-bright), 0 0 18px rgba(228, 198, 135, 0.3); } }
.ax-acts span { position: relative; }
.ax-tap.t-disc, .ax-tap.t-like, .ax-tap.t-send, .ax-tap.t-more, .ax-tap.t-show, .ax-tap.t-req { left: 50%; top: 50%; }
.ax-discover.active .t-disc { animation: axTap .7s ease 1.7s; }
.ax-discover.active .ax-mc.top .h { animation: axHeart .4s ease 1.95s forwards; }
@keyframes axHeart { to { color: #f2a3b8; } }

/* ---------- live 2: Intrigued by you ---------- */
.ax-intrigued { position: absolute; top: 37px; left: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 7px; color: #f6dbe2; background: rgba(107, 26, 48, 0.62); box-shadow: inset 0 0 0 1px rgba(176, 68, 95, 0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transform: translateY(-5px); }
.ax-intrigued svg { width: 8px; height: 8px; fill: currentColor; }
.ax-intrigued-s.active .ax-intrigued { animation: axIn .5s ease .5s forwards; }
.ax-like { right: 10px; bottom: 10px; width: 28px; height: 28px; }
.ax-like svg { width: 13px; height: 13px; }
.ax-intrigued-s.active .t-like { animation: axTap .7s ease 2s; }
.ax-intrigued-s.active .ax-like { animation: axLike .5s ease 2.2s forwards; }
.ax-intrigued-s.active .ax-like svg { animation: axFill .3s ease 2.2s forwards; }
@keyframes axLike { 40% { transform: scale(0.82); } 70% { transform: scale(1.18); } to { transform: scale(1); background: rgba(176, 68, 95, 0.9); box-shadow: 0 0 18px rgba(176, 68, 95, 0.6); } }
@keyframes axFill { to { fill: currentColor; } }
.ax-intrigued-s.active .ax-tags span { animation: axIn .4s ease forwards; }
.ax-intrigued-s.active .ax-sect:nth-of-type(2) .ax-tags span:nth-child(1) { animation-delay: .9s; }
.ax-intrigued-s.active .ax-sect:nth-of-type(2) .ax-tags span:nth-child(2) { animation-delay: 1.05s; }
.ax-intrigued-s.active .ax-sect:nth-of-type(2) .ax-tags span:nth-child(3) { animation-delay: 1.2s; }
.ax-intrigued-s.active .ax-sect:nth-of-type(3) .ax-tags span { animation-delay: 1.4s; }
.ax-intrigued-s.active .ax-toast { animation: axDrop2 2.4s ease 2.6s forwards; }
@keyframes axDrop2 { 0% { opacity: 0; transform: translateY(8px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }

/* ---------- live 3: photos on request ---------- */
.ax-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ax-thumb { position: relative; aspect-ratio: 3 / 4; border-radius: 7px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.2); }
.ax-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(9px) saturate(0.7) brightness(0.8); transform: scale(1.25); transition: filter 1s ease, transform 1s ease; }
.ax-lock { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; display: grid; place-items: center; color: var(--cream); background: rgba(11, 10, 12, 0.55); transition: opacity .6s ease; }
.ax-lock svg { width: 9px; height: 9px; }
.ax-wm { position: absolute; left: -10%; right: -10%; top: 46%; transform: rotate(-28deg); text-align: center; font-style: normal; font-family: sans-serif; font-size: 7px; color: rgba(255, 255, 255, 0.4); opacity: 0; transition: opacity .8s ease; }
.ax-req { position: relative; display: grid; padding: 6px 11px; border-radius: 999px; font-size: 7.5px; letter-spacing: 0.06em; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.6); overflow: hidden; }
.ax-req > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; }
.ax-req svg { width: 8px; height: 8px; }
.ax-req .sent { opacity: 0; color: #9fd8bb; }
.ax-reqwrap { position: relative; align-self: flex-start; }
.ax-send, .ax-show { position: relative; }
.ax-photos-s.active .t-req { animation: axTap .7s ease 1.1s; }
.ax-photos-s.active .ax-req { animation: axReqOk .4s ease 1.3s forwards; }
.ax-photos-s.active .ax-req > span:first-child { animation: axOut .3s ease 1.3s forwards; }
.ax-photos-s.active .ax-req .sent { animation: axIn .3s ease 1.45s forwards; }
@keyframes axReqOk { to { box-shadow: inset 0 0 0 1px var(--forest-bright); background: rgba(30, 74, 56, 0.4); } }
.ax-photos-s.active .ax-notif { animation: axDrop 2.6s ease 2.6s forwards; }
.ax-photos-s.active .ax-thumb img { animation: axUnblur 1s ease forwards; }
.ax-photos-s.active .th1 img { animation-delay: 3.5s; } .ax-photos-s.active .th2 img { animation-delay: 3.8s; } .ax-photos-s.active .th3 img { animation-delay: 4.1s; }
@keyframes axUnblur { to { filter: brightness(0.9) saturate(0.85); transform: none; } }
.ax-photos-s.active .ax-lock { animation: axOut .4s ease 3.5s forwards; }
.ax-photos-s.active .ax-wm { animation: axIn .6s ease 4.6s forwards; }

/* ---------- live 4: messages ---------- */
.ax-chat .ax-body { padding: 0 0 8px; gap: 0; }
.ax-thread { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: 1px solid rgba(199, 166, 92, 0.14); }
.ax-av { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(199, 166, 92, 0.6); flex-shrink: 0; }
.ax-av img { width: 100%; height: 100%; object-fit: cover; }
.ax-tn b { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 1; }
.ax-tn small { display: flex; align-items: center; gap: 3px; font-size: 7px; color: var(--forest-bright); }
.ax-tn small i { width: 5px; height: 5px; border-radius: 50%; background: var(--forest-bright); }
.ax-round.ml { margin-left: auto; }
.ax-tip { display: flex; gap: 6px; align-items: flex-start; padding: 6px 10px; font-size: 7px; line-height: 1.45; color: var(--smoke); background: rgba(30, 74, 56, 0.28); border-bottom: 1px solid rgba(78, 156, 121, 0.25); }
.ax-tip svg { width: 10px; height: 10px; flex-shrink: 0; color: var(--forest-bright); }
.ax-tip u { color: #9fd8bb; }
.ax-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 8px 10px; overflow: hidden; }
.ax-day { align-self: center; font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke-dim); margin-bottom: 2px; }
.ax-b { margin: 0; max-width: 78%; padding: 6px 9px 5px; border-radius: 12px; font-size: 8.5px; line-height: 1.4; opacity: 0; transform: translateY(6px); }
.ax-b small { display: block; margin-top: 2px; font-size: 7px; opacity: 0.6; text-align: right; }
.ax-b.them { align-self: flex-start; background: rgba(255, 255, 255, 0.07); border-bottom-left-radius: 4px; }
.ax-b.me { align-self: flex-end; background: linear-gradient(135deg, rgba(107, 26, 48, 0.95), rgba(78, 18, 32, 0.95)); border-bottom-right-radius: 4px; box-shadow: inset 0 0 0 1px rgba(176, 68, 95, 0.45); }
.ax-typing { align-self: flex-start; display: flex; gap: 3px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); opacity: 0; height: 0; padding-block: 0; overflow: hidden; }
.ax-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--smoke); animation: dots 1s ease-in-out infinite; }
.ax-typing i:nth-child(2) { animation-delay: .15s; } .ax-typing i:nth-child(3) { animation-delay: .3s; }
.ax-chat.active .b1 { animation: axIn .4s ease .4s forwards; }
.ax-chat.active .b2 { animation: axIn .4s ease 1.2s forwards; }
.ax-chat.active .ty1 { animation: axTyping 1.2s ease 1.9s forwards; }
@keyframes axTyping { 0% { opacity: 0; height: 0; padding-block: 0; } 12%, 88% { opacity: 1; height: 20px; padding-block: 8px; } 100% { opacity: 0; height: 0; padding-block: 0; margin: -3px 0; } }
.ax-chat.active .b3 { animation: axIn .4s ease 3.1s forwards; }
.ax-chat.active .b4 { animation: axIn .4s ease 5.4s forwards; }
.ax-compose { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 9px; }
.ax-field { position: relative; flex: 1; padding: 7px 10px; border-radius: 999px; font-size: 8px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ax-field .ax-ph { color: var(--smoke-dim); }
.ax-typed { position: absolute; left: 10px; top: 7px; width: 0; overflow: hidden; white-space: nowrap; color: var(--cream); border-right: 1px solid var(--gold-bright); }
.ax-send { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--noir); background: var(--gold-fill); }
.ax-send svg { width: 10px; height: 10px; }
.ax-chat.active .ax-ph { animation: axHide .1s linear 3.7s forwards, axShow .1s linear 5.3s forwards; }
@keyframes axHide { to { opacity: 0; } }
@keyframes axShow { to { opacity: 1; } }
.ax-chat.active .ax-typed { animation: axTypeIn 1.1s steps(14) 3.8s forwards, axHide .1s linear 5.3s forwards; }
@keyframes axTypeIn { to { width: 14ch; } }
.ax-chat.active .t-send { animation: axTap .7s ease 5s; }

/* ---------- live 5: terms ---------- */
.ax-letter { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 11px; border-radius: 11px; background: linear-gradient(170deg, #1e1619, #110d0f 70%); box-shadow: inset 0 0 0 1px rgba(228, 198, 135, 0.26); }
.ax-lhead { display: flex; align-items: baseline; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(228, 198, 135, 0.14); font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke-dim); }
.ax-lhead b { font-family: var(--font-sans); font-weight: 400; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--cream); }
.ax-status-chip { margin-left: auto; padding: 2px 6px; border-radius: 999px; font-size: 7px; letter-spacing: 0.06em; color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.45); }
.ax-lhead { position: relative; }
.ax-status-chip.ok { position: absolute; right: 0; bottom: 6px; color: #9fd8bb; box-shadow: inset 0 0 0 1px rgba(78, 156, 121, 0.6); opacity: 0; }
.ax-terms.active .ax-status-chip:not(.ok) { animation: axHide .3s linear 5s forwards; }
.ax-terms.active .ax-status-chip.ok { animation: axShow .3s ease 5s forwards; }
.ax-lf span { display: block; font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke-dim); margin-bottom: 2px; }
.ax-lf p { margin: 0; font-size: 8.5px; line-height: 1.45; color: var(--cream); clip-path: inset(0 100% 0 0); }
.ax-terms.active .f1 p { animation: axReveal 1s ease .4s forwards; }
.ax-terms.active .f2 p { animation: axReveal 1.1s ease 1.3s forwards; }
.ax-terms.active .f3 p { animation: axReveal .9s ease 2.3s forwards; }
@keyframes axReveal { to { clip-path: inset(0 0 0 0); } }
.ax-signs { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 7px; border-top: 1px solid rgba(228, 198, 135, 0.16); }
.ax-signs span { display: block; font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke-dim); }
.ax-signs b { display: inline-block; font-family: var(--font-script); font-weight: 400; font-size: 20px; color: var(--gold-bright); clip-path: inset(0 100% 0 0); }
.ax-terms.active .sg1 { animation: axReveal .9s ease 3.2s forwards; }
.ax-terms.active .sg2 { animation: axReveal .9s ease 4.2s forwards; }
.ax-seal { position: absolute; right: 12px; bottom: 44px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--wax); box-shadow: 0 0 0 3px rgba(90, 19, 38, 0.55), 0 8px 16px rgba(0, 0, 0, 0.55); opacity: 0; transform: scale(1.8) rotate(-14deg); }
.ax-seal img { width: 62%; filter: sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(1.05); opacity: 0.9; }
.ax-terms.active .ax-seal { animation: axSeal .5s cubic-bezier(.3, 1.4, .5, 1) 5.3s forwards; }
@keyframes axSeal { to { opacity: 1; transform: scale(1) rotate(-14deg); } }

/* ---------- privacy 1: verification ---------- */
.ax-steps { display: flex; align-items: center; gap: 5px; font-size: 7px; letter-spacing: 0.08em; color: var(--smoke-dim); }
.ax-steps i { flex: 1; height: 1px; background: rgba(199, 166, 92, 0.25); }
.ax-steps span { padding: 2px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.25); }
.ps-verified.active .ax-steps .s1 { animation: axStep .3s ease .2s forwards; }
.ps-verified.active .ax-steps .s2 { animation: axStep .3s ease 2.2s forwards; }
.ps-verified.active .ax-steps .s3 { animation: axStep .3s ease 3.8s forwards; }
@keyframes axStep { to { color: var(--noir); background: var(--gold-bright); box-shadow: none; } }
.ax-idcard { position: relative; height: 92px; border-radius: 10px; overflow: hidden; background: linear-gradient(150deg, #24201a, #14110f); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.3); }
.ax-idph { position: absolute; left: 12px; top: 14px; width: 42px; height: 52px; border-radius: 5px; background: radial-gradient(circle at 50% 38%, rgba(242, 236, 223, 0.25) 0 30%, transparent 32%), radial-gradient(ellipse at 50% 100%, rgba(242, 236, 223, 0.2) 0 45%, transparent 47%), #2c2620; }
.ax-idl { position: absolute; left: 66px; height: 5px; border-radius: 3px; background: rgba(242, 236, 223, 0.18); }
.ax-idl.l1 { top: 18px; width: 50%; } .ax-idl.l2 { top: 32px; width: 38%; } .ax-idl.l3 { top: 46px; width: 44%; }
.ax-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold-bright); box-shadow: 0 0 12px 3px rgba(228, 198, 135, 0.55); opacity: 0; }
.ps-verified.active .ax-scan { animation: axScan 1.6s ease-in-out .4s forwards; }
@keyframes axScan { 0% { opacity: 1; top: 0; } 50% { top: 100%; } 100% { opacity: 0; top: 0; } }
.ax-idok { position: absolute; left: 66px; bottom: 9px; display: inline-flex; align-items: center; gap: 4px; font-size: 7.5px; color: #9fd8bb; opacity: 0; }
.ax-idok svg { width: 9px; height: 9px; }
.ps-verified.active .ax-idok { animation: axIn .4s ease 2s forwards; }
.ax-selfie { position: relative; align-self: center; width: 92px; height: 92px; }
.ax-selfie img { position: absolute; inset: 9px; width: 74px; height: 74px; border-radius: 50%; object-fit: cover; filter: grayscale(0.3); }
.ax-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(228, 198, 135, 0.55); opacity: 0; }
.ps-verified.active .ax-ring { animation: axIn .3s ease 2.2s forwards, ringSpin 3s linear 2.2s infinite; }
.ax-match { position: absolute; right: 2px; bottom: 4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #08100c; background: var(--forest-bright); box-shadow: 0 0 0 3px #0b0a0c; transform: scale(0); }
.ax-match svg { width: 13px; height: 13px; }
.ps-verified.active .ax-match { animation: pvPop .45s cubic-bezier(.3, 1.5, .5, 1) 3.5s forwards; }
.ax-verified-done { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; opacity: 0; transform: translateY(6px); }
.ax-verified-done b { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 17px; color: var(--cream); }
.ax-verified-done b svg { width: 12px; height: 12px; color: var(--forest-bright); }
.ax-verified-done span { font-size: 7.5px; color: var(--smoke); }
.ps-verified.active .ax-verified-done { animation: axIn .5s ease 4.1s forwards; }

/* ---------- privacy 2: blurred photos (the request button is live: Landing-4.js) ---------- */
.ax-hero--blur > img { filter: blur(16px) saturate(0.7) brightness(0.8); transform: scale(1.2); transition: filter 1.2s ease 2.2s, transform 1.2s ease 2.2s; }
.ax-privtag { position: absolute; top: 8px; right: 9px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 999px; font-size: 7px; color: var(--cream); background: rgba(11, 10, 12, 0.6); box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.25); }
.ax-privtag svg { width: 8px; height: 8px; }
.ax-hero .ps-veil { position: absolute; inset: 0 0 26% 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; text-align: center; background: none; transition: opacity .6s ease 2.2s; }
.ax-hero .ps-request { font-size: 8px; padding: 8px 14px; }
.ax-hero .ps-note { font-size: 8px; max-width: 24ch; }
.ps-blur .ax-notif { transition: opacity .5s ease 1.4s, transform .5s ease 1.4s; }
.ps-blur:has(#demo-request.sent) .ax-notif { opacity: 1; transform: none; }
.ps-blur:has(#demo-request.sent) .ax-hero--blur > img,
.ps-blur:has(#demo-request.sent) .ax-thumb img { filter: brightness(0.9) saturate(0.85); transform: none; }
.ps-blur .ax-thumb img { transition: filter 1s ease 2.5s, transform 1s ease 2.5s; }
.ps-blur .ax-lock { transition: opacity .5s ease 2.5s; }
.ps-blur:has(#demo-request.sent) .ax-lock { opacity: 0; }
.ps-blur:has(#demo-request.sent) .ps-veil { opacity: 0; pointer-events: none; }

/* ---------- privacy 3 + Black: hidden zones ---------- */
.ax-map { position: relative; flex: 1; min-height: 120px; border-radius: 11px; overflow: hidden; background-color: #0e1110; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 18px 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.ax-map .road { position: absolute; background: rgba(255, 255, 255, 0.06); }
.ax-map .r1 { left: 0; right: 0; top: 58%; height: 5px; } .ax-map .r2 { top: 0; bottom: 0; left: 38%; width: 5px; } .ax-map .r3 { left: -10%; right: -10%; top: 24%; height: 3px; transform: rotate(-12deg); }
.ax-map .zone { position: absolute; border-radius: 50%; aspect-ratio: 1; 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); }
.ax-map .z1 { left: 5%; top: 18%; width: 46%; } .ax-map .z2 { left: 54%; top: 46%; width: 34%; }
.ax-map .zone em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-style: normal; font-family: var(--font-mono); font-size: 7.5px; color: #f2c4d0; }
.ax-map .dot { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 7px rgba(228, 198, 135, 0.7); }
.ax-map .d1 { left: 22%; top: 38%; } .ax-map .d2 { left: 33%; top: 55%; } .ax-map .d3 { left: 70%; top: 66%; } .ax-map .d4 { left: 80%; top: 16%; } .ax-map .d5 { left: 58%; top: 28%; } .ax-map .d6 { left: 14%; top: 86%; }
.ax-you { position: absolute; left: 27%; top: 44%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #5aa2ff; box-shadow: 0 0 0 3px rgba(90, 162, 255, 0.25), 0 0 0 7px rgba(90, 162, 255, 0.1); }
.ax-zrow, .ax-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 8px; opacity: 0; transform: translateY(6px); }
.ax-zrow > span { display: flex; align-items: center; gap: 5px; }
.ax-zrow svg { width: 9px; height: 9px; color: #e59bb0; }
.ax-zrow b, .ax-toggle b { font-weight: 500; color: var(--cream); }
.ax-zrow small, .ax-toggle small { display: block; font-size: 7.5px; color: var(--smoke-dim); }
.ax-zrow small { display: inline; margin-left: 4px; }
.ax-zrow u { font-size: 7px; color: var(--smoke-dim); }
.ax-toggle i { position: relative; flex-shrink: 0; width: 26px; height: 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.ax-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--cream); }
.ax-zones.active .zone { animation: zoneIn .8s cubic-bezier(.2, .8, .2, 1) .4s forwards; }
.ax-zones.active .z2 { animation-delay: .9s; }
.ax-zones.active .dot.in { animation: dotHide .6s ease 1.7s forwards; }
.ax-zones.active .zr1 { animation: axIn .4s ease 1.1s forwards; }
.ax-zones.active .zr2 { animation: axIn .4s ease 1.5s forwards; }
.ax-zones.active .tg1 { animation: axIn .4s ease 1.9s forwards; }
.ax-zones.active .tg2 { animation: axIn .4s ease 2.1s forwards; }
.ax-zones.active .tg1 i { animation: tgOn .35s ease 2.8s forwards; }
.ax-zones.active .tg1 i::after { animation: axKnob .35s ease 2.8s forwards; }
.ax-zones.active .tg2 i { animation: tgOn .35s ease 3.3s forwards; }
.ax-zones.active .tg2 i::after { animation: axKnob .35s ease 3.3s forwards; }
@keyframes axKnob { to { transform: translateX(11px); } }

/* ---------- privacy 4: report ---------- */
.ps-report.active .t-more { animation: axTap .7s ease .6s; }
.ax-menu { position: absolute; z-index: 20; top: 36px; right: 9px; display: flex; flex-direction: column; min-width: 96px; padding: 4px; border-radius: 10px; background: rgba(30, 26, 29, 0.97); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08); opacity: 0; transform: scale(0.9); transform-origin: top right; }
.ax-menu span { display: flex; align-items: center; gap: 6px; padding: 6px 7px; border-radius: 7px; font-size: 8px; color: var(--cream); }
.ax-menu span.r { color: #f2a3b8; }
.ax-menu svg { width: 10px; height: 10px; }
.ps-report.active .ax-menu { animation: axMenu 1.4s ease .9s forwards; }
@keyframes axMenu { 0% { opacity: 0; transform: scale(0.9); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.95); } }
.ps-report.active .ax-menu span.r { animation: axPress .3s ease 1.8s forwards; }
@keyframes axPress { to { background: rgba(176, 68, 95, 0.25); } }
.ax-sheet { position: absolute; z-index: 22; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 11px 14px; border-radius: 16px 16px 0 0; background: rgba(22, 17, 20, 0.98); box-shadow: 0 -16px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(176, 68, 95, 0.4); transform: translateY(105%); }
.ax-grab { align-self: center; width: 30px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); }
.ax-sheet > b { font-family: var(--font-serif); font-weight: 500; font-size: 12px; color: var(--cream); }
.ax-sheet > small { font-size: 7.5px; line-height: 1.45; color: var(--smoke); }
.ax-reasons { display: flex; flex-wrap: wrap; gap: 4px; }
.ax-reasons span { padding: 3px 7px; border-radius: 999px; font-size: 7.5px; color: var(--smoke); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.ps-report.active .ax-reasons .pick { animation: rpPick .3s ease 3s forwards; }
.ax-submit { margin-top: 2px; padding: 7px; border-radius: 999px; text-align: center; font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); background: var(--wine); }
.ps-report.active .ax-sheet { animation: sheetUp .55s cubic-bezier(.2, .8, .2, 1) 2.2s forwards; }
.ax-sent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; border-radius: inherit; background: rgba(14, 20, 17, 0.98); box-shadow: inset 0 1px 0 rgba(78, 156, 121, 0.6); opacity: 0; }
.ax-sent i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #08100c; background: var(--forest-bright); }
.ax-sent i svg { width: 14px; height: 14px; }
.ax-sent b { font-size: 11px; font-weight: 500; color: var(--cream); }
.ax-sent span { font-size: 7.5px; color: var(--smoke); }
.ps-report.active .ax-sent { animation: axIn .45s ease 4s forwards; }

/* ---------- Masquerade: Silver picks ---------- */
.ax-minigrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.ax-mini { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: linear-gradient(170deg, #241a14, #0f0c0d); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.22); opacity: 0; transform: rotateY(70deg); }
.ax-mini.b { background: linear-gradient(170deg, #1a1a1c, #0b0a0c); }
.ax-mini .ax-init { font-size: 22px; }
.ax-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8); }
.ax-mini::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(11, 10, 12, 0.92)); }
.ax-mini b, .ax-mini small { position: absolute; z-index: 1; left: 5px; right: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-mini b { bottom: 11px; font-family: var(--font-sans); font-weight: 400; font-size: 10px; color: var(--cream); }
.ax-mini small { bottom: 4px; font-family: var(--font-mono); font-size: 7.5px; color: var(--gold-bright); }
.ax-picks.active .ax-mini { animation: flipIn .55s ease forwards; }
.ax-picks.active .ax-mini:nth-child(2) { animation-delay: .1s; } .ax-picks.active .ax-mini:nth-child(3) { animation-delay: .2s; }
.ax-picks.active .ax-mini:nth-child(4) { animation-delay: .3s; } .ax-picks.active .ax-mini:nth-child(5) { animation-delay: .4s; }
.ax-picks.active .ax-mini:nth-child(6) { animation-delay: .5s; }
.ax-ev { display: flex; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 9px; font-size: 8px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); opacity: 0; transform: translateY(6px); }
.ax-ev b { display: block; font-weight: 500; color: var(--cream); }
.ax-ev small { font-size: 7.5px; color: var(--smoke-dim); }
.ax-date { width: 26px; height: 28px; flex-shrink: 0; border-radius: 6px; display: grid; place-items: center; align-content: center; font-family: var(--font-display); font-size: 13px; line-height: 1; color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.4); }
.ax-date small { font-family: var(--font-serif); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--smoke); }
.ax-date svg { width: 10px; height: 10px; }
.ax-pill { margin-left: auto; padding: 2px 7px; border-radius: 999px; font-size: 7.5px; color: var(--smoke); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.ax-pill.ok { color: #08100c; background: var(--forest-bright); box-shadow: none; }
.ax-picks.active .ax-ev { animation: axIn .4s ease .9s forwards; }
.ax-picks.active .ax-ev + .ax-ev { animation-delay: 1.1s; }

/* ---------- Masquerade: Gold detailed filters ---------- */
.ax-fsheet { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 5px; padding: 9px; border-radius: 12px; background: rgba(22, 19, 16, 0.98); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.3), 0 14px 30px rgba(0, 0, 0, 0.5); }
.ax-seg { align-self: flex-start; display: inline-flex; padding: 2px; border-radius: 999px; font-family: var(--font-mono); font-size: 7px; box-shadow: inset 0 0 0 1px rgba(228, 198, 135, 0.25); }
.ax-seg span { padding: 2px 8px; border-radius: 999px; color: var(--smoke); }
.ax-search.active .ax-seg .all { animation: segOn .35s ease .5s forwards; }
.ax-fchips { display: flex; flex-wrap: wrap; gap: 4px; }
.ax-fchips span { padding: 3px 7px; border-radius: 999px; font-size: 7.5px; color: var(--smoke); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.ax-search.active .ax-fchips .on { animation: chipOn .3s ease forwards; }
.ax-search.active .ax-fchips .o1 { animation-delay: .9s; } .ax-search.active .ax-fchips .o2 { animation-delay: 1.3s; }
.ax-search.active .ax-fchips .o4 { animation-delay: 1.7s; }
.ax-input { position: relative; height: 22px; padding: 5px 8px; border-radius: 7px; font-size: 8.5px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ax-typed2 { display: inline-block; width: 0; overflow: hidden; white-space: nowrap; vertical-align: top; border-right: 1px solid var(--gold-bright); }
.ax-search.active .ax-typed2 { animation: axTypeIn2 1s steps(9) 2.3s forwards; }
@keyframes axTypeIn2 { to { width: 9ch; } }
.ax-show { position: relative; margin-top: 3px; padding: 7px; border-radius: 999px; text-align: center; font-size: 7.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--noir); background: var(--gold-fill); }
.ax-search.active .t-show { animation: axTap .7s ease 3.6s; }
.ax-search.active .ax-fsheet { animation: axSheetAway .6s cubic-bezier(.5, 0, .2, 1) 4.1s forwards; }
@keyframes axSheetAway { to { transform: translateY(115%); opacity: 0; } }
.ax-results { position: absolute; left: 11px; right: 11px; top: 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; opacity: 0; transform: translateY(10px); }
.ax-search.active .ax-results { animation: axIn .5s ease 4.4s forwards; }

/* the privacy captions sit under the phone, so they never cover the app */
.privacy-phone .phone-tags { left: 0; right: 0; top: auto; bottom: -62px; }
.privacy-phone .phone-tag { left: 50%; right: auto; transform: translate(-50%, 10px); }
.privacy-phone .phone-tag.on { transform: translate(-50%, 0); }
.privacy-phone .phone-floor { bottom: -20px; }
.privacy-show { padding-bottom: 40px; }

/* ---------- crisp screens ----------
   A 3D tilt, a floating animation or a filter on the phone makes the browser
   paint its screen as a softened bitmap. The phones sit flat and still, a
   little larger, with the shadow drawn by a separate layer behind them. */
.demo-phone .phone-frame, .privacy-phone .phone-frame { transform: none; animation: none; filter: none; width: 320px; }
.demo-phone .phone-frame::before, .privacy-phone .phone-frame::before { content: ""; position: absolute; z-index: -1; inset: 3% 6% 1%; border-radius: 44px; box-shadow: 0 46px 60px rgba(0, 0, 0, 0.6), 0 12px 24px rgba(0, 0, 0, 0.4); pointer-events: none; }
.phone-screen .app { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
@media (max-width: 600px) { .demo-phone .phone-frame, .privacy-phone .phone-frame { width: 270px; } }

/* ---------- reduced motion: every scene shows its finished state ---------- */
@media (prefers-reduced-motion: reduce) {
  .app, .app *, .app *::before, .app *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
}

/* ---------- Groups & events cards, in the app's own look ---------- */
.tgx { padding: 14px 14px 16px; }
.tga-bar { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; }
.tga-eyebrow { font-size: 7.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.tga-title { font-family: var(--font-sans); font-size: 22px; line-height: 1.1; color: var(--cream); }
.tga-tabs { display: flex; gap: 14px; margin-bottom: 10px; border-bottom: 1px solid rgba(199, 166, 92, 0.16); font-size: 10px; color: var(--smoke-dim); }
.tga-tabs span { padding-bottom: 6px; }
.tga-tabs .on { color: var(--cream); box-shadow: inset 0 -1.5px 0 var(--gold-bright); }
.tga-card { padding: 11px; border-radius: 12px; background: linear-gradient(170deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.2); }
.tgx-loc { display: inline-flex; align-items: center; gap: 3px; }
.tgx-loc svg { width: 8px; height: 8px; }
.tgx-name { margin-top: 10px; }
.tgx-faces i.you { width: 0; margin-right: 0; display: grid; place-items: center; overflow: hidden; font-style: normal; font-family: var(--font-sans); font-size: 12px; color: var(--noir); background: linear-gradient(140deg, #f3e2b0, var(--gold)); filter: none; }
.tg-card.play .tgx-group .tgx-faces i.you { animation: tgYou .45s cubic-bezier(.3, 1.4, .5, 1) 2s forwards; }
@keyframes tgYou { to { width: 26px; margin-right: -8px; } }
.tgx-join svg { width: 9px; height: 9px; vertical-align: -1px; }
.tgx-next { display: flex; align-items: center; gap: 9px; }
.tgx-next small { display: block; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); }
.tgx-next b { display: block; font-weight: 500; font-size: 13px; color: var(--cream); }
.tgx-next em { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; color: var(--smoke); }
.tga-date { width: 34px; height: 38px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; align-content: center; font-family: var(--font-display); font-size: 17px; line-height: 1; color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.4); }
.tga-date small { font-family: var(--font-serif); font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--smoke); margin-bottom: 2px; }

.tgx-events .tgx-event { align-items: center; gap: 9px; }
.tgx-events .tgx-event > div:first-of-type { flex: 1; min-width: 0; }
.tga-going { display: flex; align-items: center; margin-top: 4px; }
.tga-going i { width: 16px; height: 16px; border-radius: 50%; margin-right: -5px; box-shadow: 0 0 0 1.5px #0b100d; background: radial-gradient(circle at 50% 35%, rgba(242, 236, 223, 0.35), rgba(30, 74, 56, 0.9) 70%); }
.tga-going i.f2 { background: radial-gradient(circle at 50% 35%, rgba(242, 236, 223, 0.3), rgba(107, 26, 48, 0.85) 70%); }
.tga-going i.f3 { background: radial-gradient(circle at 50% 35%, rgba(242, 236, 223, 0.3), rgba(199, 166, 92, 0.6) 70%); }
.tga-going i.you { width: 0; margin-right: 0; display: grid; place-items: center; overflow: hidden; font-style: normal; font-family: var(--font-sans); font-size: 9px; color: var(--noir); background: linear-gradient(140deg, #f3e2b0, var(--gold)); }
.tga-going em { margin-left: 10px; font-style: normal; font-family: var(--font-mono); font-size: 8.5px; color: var(--smoke); }
.tg-card.play .tga-going i.you { animation: tgYou2 .4s cubic-bezier(.3, 1.4, .5, 1) 2.3s forwards; }
@keyframes tgYou2 { to { width: 16px; margin-right: -5px; } }

.tgx-room .tgx-roomhead { gap: 8px; justify-content: flex-start; }
.tga-av { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-sans); font-size: 15px; color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.5); background: #0b0a0c; }
.tgx-roomhead > span:nth-child(2) b { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.1; color: var(--cream); }
.tgx-roomhead .tgx-tier { display: inline-block; margin-top: 3px; }
.tgx-joinroom { margin-left: auto; position: relative; display: grid; padding: 5px 12px; border-radius: 999px; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.35); overflow: hidden; }
.tgx-joinroom span { grid-area: 1 / 1; text-align: center; }
.tgx-joinroom .on { opacity: 0; color: #d6b8e2; }
.tg-card.play .tgx-joinroom span:first-child { animation: outUp .35s ease .4s forwards; }
.tg-card.play .tgx-joinroom .on { animation: inUp .35s ease .5s forwards; }
.tgx-room .tgx-msgs { gap: 8px; min-height: 140px; }
.tgx-room .tgx-msgs p { display: flex; gap: 7px; align-items: flex-start; }
.tgx-room .tgx-msgs p > i { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--font-sans); font-size: 11px; color: var(--cream); background: radial-gradient(circle at 50% 35%, rgba(242, 236, 223, 0.25), rgba(74, 44, 82, 0.95) 70%); }
.tgx-room .tgx-msgs p > i.a2 { background: radial-gradient(circle at 50% 35%, rgba(242, 236, 223, 0.25), rgba(107, 26, 48, 0.95) 70%); }
.tgx-room .tgx-msgs p > i.a3 { background: radial-gradient(circle at 50% 35%, rgba(242, 236, 223, 0.25), rgba(30, 74, 56, 0.95) 70%); }
.tgx-room .tgx-msgs p > span { padding: 6px 9px; border-radius: 10px; border-top-left-radius: 3px; background: rgba(255, 255, 255, 0.06); }
.tgx-room .tgx-msgs p > span b { display: block; margin: 0 0 1px; }
.tgx-room .tgx-msgs small { display: block; margin-top: 2px; font-size: 8px; color: var(--smoke-dim); }
.tgx-typing { display: flex; gap: 3px; margin-left: 27px; padding: 0 9px; height: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.06); opacity: 0; overflow: hidden; align-items: center; align-self: flex-start; }
.tgx-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--smoke); animation: dots 1s ease-in-out infinite; }
.tgx-typing i:nth-child(2) { animation-delay: .15s; }
.tgx-typing i:nth-child(3) { animation-delay: .3s; }
.tg-card.play .tgx-typing { animation: tgTyping 1s ease 1.7s forwards; }
@keyframes tgTyping { 0% { opacity: 0; height: 0; } 15%, 85% { opacity: 1; height: 20px; } 100% { opacity: 0; height: 0; margin: -4px 0; } }
.tg-card.play .tgx-msgs .m3 { animation-delay: 2.7s; }
.tgx-input { display: flex; align-items: center; justify-content: space-between; }
.tgx-input i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--noir); background: var(--gold-fill); }
.tgx-input i svg { width: 10px; height: 10px; }
@media (prefers-reduced-motion: reduce) {
  .tgx *, .tgx *::before { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* the app panels set the card height, so nothing is cut off */
.tg-visual { aspect-ratio: auto; padding: 22px 18px; align-items: start; }
.tgx { max-width: 340px; }
@media (min-width: 1001px) { .tg-visual { min-height: 445px; } }

/* ---------- more screens, for the dedicated pages ---------- */
/* Interests */
.ax-itabs { display: flex; gap: 12px; border-bottom: 1px solid rgba(199, 166, 92, 0.16); font-size: 8.5px; color: var(--smoke-dim); }
.ax-itabs span { padding-bottom: 5px; }
.ax-itabs .on { color: var(--cream); box-shadow: inset 0 -1.5px 0 var(--gold-bright); }
.ax-isort { padding: 5px 8px; border-radius: 6px; font-size: 8px; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.25); }
.ax-irow { position: relative; display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); opacity: 0; transform: translateY(8px); }
.ax-ithumb { position: relative; width: 44px; height: 52px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: linear-gradient(170deg, #241a14, #0f0c0d); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.25); }
.ax-ithumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.85); }
.ax-ithumb .ax-init { font-size: 22px; }
.ax-imain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ax-iname { display: flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 15px; line-height: 1; color: var(--cream); }
.ax-imain small { font-size: 7.5px; color: var(--smoke); }
.ax-ibtns { display: flex; gap: 5px; margin-top: 2px; }
.ax-msg { padding: 4px 9px; border-radius: 999px; font-size: 7.5px; color: var(--noir); background: var(--gold-fill); }
.ax-cur { position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px; border-radius: 999px; font-size: 7.5px; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.35); }
.ax-cur svg { width: 8px; height: 8px; }
.ax-cur b { font-weight: 400; }
.sw { display: inline-grid; }
.sw b { grid-area: 1 / 1; }
.sw .on { opacity: 0; }
.ax-iago { font-size: 7px; color: var(--smoke-dim); }
.ax-interests.active .ax-irow { animation: axIn .45s ease forwards; }
.ax-interests.active .r2 { animation-delay: .15s; } .ax-interests.active .r3 { animation-delay: .3s; }
.ax-interests.active .r1 { animation-delay: 0s; }
.ax-tap.t-cur { left: 50%; top: 50%; }
.ax-interests.active .t-cur { animation: axTap .7s ease 1.6s; }
.ax-interests.active .r1 .ax-cur { animation: axCur .4s ease 1.85s forwards; }
.ax-interests.active .r1 .ax-cur svg { animation: axFill .3s ease 1.85s forwards; }
@keyframes axCur { to { color: #f6dbe2; background: rgba(107, 26, 48, 0.75); box-shadow: inset 0 0 0 1px rgba(176, 68, 95, 0.8); } }
.ax-interests.active .r1 .sw b:not(.on) { animation: axHide .2s linear 1.85s forwards; }
.ax-interests.active .r1 .sw .on { animation: axShow .2s linear 1.85s forwards; }

/* Profile: kinks with a level each */
.ax-krow { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); opacity: 0; transform: translateY(6px); }
.ax-krow b { font-weight: 500; font-size: 9px; color: var(--cream); }
.ax-kseg { display: grid; grid-template-columns: repeat(4, 1fr); padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.22); }
.ax-kseg span { padding: 3px 0; border-radius: 999px; text-align: center; font-size: 7px; color: var(--smoke-dim); }
.ax-kinks.active .ax-krow { animation: axIn .4s ease forwards; }
.ax-kinks.active .k2 { animation-delay: .12s; } .ax-kinks.active .k3 { animation-delay: .24s; } .ax-kinks.active .k4 { animation-delay: .36s; } .ax-kinks.active .k5 { animation-delay: .48s; }
.ax-kinks.active .k1 .pick { animation: kInto .3s ease .9s forwards; }
.ax-kinks.active .k2 .pick { animation: kCur .3s ease 1.3s forwards; }
.ax-kinks.active .k3 .pick { animation: kCur .3s ease 1.7s forwards; }
.ax-kinks.active .k4 .pick { animation: kSoft .3s ease 2.1s forwards; }
.ax-kinks.active .k5 .pick { animation: kHard .3s ease 2.5s forwards; }
@keyframes kInto { to { color: var(--noir); background: var(--gold-bright); } }
@keyframes kCur { to { color: var(--cream); background: rgba(199, 166, 92, 0.28); } }
@keyframes kSoft { to { color: #f6dbe2; background: rgba(176, 68, 95, 0.35); } }
@keyframes kHard { to { color: #fff; background: var(--wine); } }
.ax-lf2 .on { color: var(--smoke); }
.ax-kinks.active .ax-lf2 .on { animation: chipOn .3s ease 3s forwards; }
.ax-save { margin-top: auto; }

/* Forum */
.ax-compose2 { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 10px; font-size: 8px; color: var(--smoke-dim); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ax-compose2 .ax-tier { margin-left: auto; }
.ax-me.sm { width: 18px; height: 18px; font-size: 10px; }
.ax-post { display: flex; flex-direction: column; gap: 7px; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.18); opacity: 0; transform: translateY(8px); }
.ax-forum.active .ax-post { animation: axIn .5s ease .3s forwards; }
.ax-phead { display: flex; align-items: center; gap: 7px; }
.ax-phead b { font-family: var(--font-sans); font-weight: 400; font-size: 14px; color: var(--cream); }
.ax-phead small { display: block; font-size: 7px; color: var(--smoke-dim); }
.ax-post > p { margin: 0; font-size: 8.5px; line-height: 1.5; color: rgba(242, 236, 223, 0.9); }
.ax-pimg { position: relative; height: 92px; border-radius: 8px; overflow: hidden; }
.ax-pimg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) brightness(0.85); }
.ax-pacts { display: flex; gap: 14px; font-size: 8px; color: var(--smoke); }
.ax-pacts > span { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.ax-pacts svg { width: 10px; height: 10px; }
.ax-pacts b { font-weight: 400; }
.ax-tap.t-plike { left: 5px; top: 50%; }
.ax-forum.active .t-plike { animation: axTap .7s ease 1.4s; }
.ax-forum.active .ax-plike { animation: axHeart .3s ease 1.65s forwards; }
.ax-forum.active .ax-plike svg { animation: axFill .3s ease 1.65s forwards; }
.ax-forum.active .ax-plike .n1 { animation: axHide .2s linear 1.65s forwards; }
.ax-forum.active .ax-plike .n2 { animation: axShow .2s linear 1.65s forwards; }
.ax-pcomment { display: flex; gap: 6px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 8px; line-height: 1.45; color: var(--smoke); opacity: 0; transform: translateY(6px); }
.ax-pcomment b { color: var(--cream); font-weight: 500; }
.ax-init.sm { position: static; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; font-size: 10px; background: rgba(74, 44, 82, 0.9); color: var(--cream); }
.ax-forum.active .ax-pcomment { animation: axIn .4s ease 2.4s forwards; }

/* Groups */
.ax-grow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); opacity: 0; transform: translateY(6px); }
.ax-gav { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-sans); font-size: 16px; color: var(--gold-bright); background: linear-gradient(150deg, rgba(107, 26, 48, 0.6), rgba(20, 12, 16, 0.9)); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.3); }
.ax-gmain { flex: 1; min-width: 0; }
.ax-gmain b { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 1.15; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-gmain small { display: flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 7px; color: var(--smoke); }
.ax-gmain svg { width: 7px; height: 7px; margin-left: 3px; }
.ax-gchip { padding: 1px 5px; border-radius: 999px; font-size: 6.5px; color: #f2c4d0; background: rgba(107, 26, 48, 0.4); }
.ax-gjoin { position: relative; display: grid; padding: 4px 10px; border-radius: 999px; font-size: 7.5px; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.5); }
.ax-gjoin > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 3px; justify-content: center; }
.ax-gjoin .on { opacity: 0; color: #9fd8bb; }
.ax-gjoin svg { width: 8px; height: 8px; }
.ax-tap.t-join, .ax-tap.t-rsvp, .ax-tap.t-pay { left: 50%; top: 50%; }
.ax-groups.active .ax-grow { animation: axIn .4s ease forwards; }
.ax-groups.active .g2 { animation-delay: .12s; } .ax-groups.active .g3 { animation-delay: .24s; } .ax-groups.active .g4 { animation-delay: .36s; }
.ax-groups.active .t-join { animation: axTap .7s ease 1.4s; }
.ax-groups.active .go { animation: axReqOk .35s ease 1.65s forwards; }
.ax-groups.active .go > span:first-child { animation: axOut .25s ease 1.65s forwards; }
.ax-groups.active .go .on { animation: axIn .25s ease 1.75s forwards; }
.ax-host { margin-top: auto; }

/* Events */
.ax-cal { padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.ax-month { display: flex; justify-content: space-between; margin-bottom: 4px; }
.ax-month b { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 15px; }
.ax-month span { font-size: 9px; color: var(--smoke); letter-spacing: 0.3em; }
.ax-days, .ax-dates { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.ax-days span { font-size: 6.5px; color: var(--smoke-dim); padding-bottom: 3px; }
.ax-dates span { position: relative; z-index: 0; font-family: var(--font-mono); font-size: 7.5px; line-height: 18px; color: rgba(242, 236, 223, 0.7); }
.ax-dates .ev::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--forest-bright); }
.ax-dates .pick::before { content: ""; position: absolute; inset: 1px 2px; z-index: -1; border-radius: 6px; background: var(--gold-bright); transform: scale(0); }
.ax-events.active .ax-dates .pick::before { animation: pvPop .4s cubic-bezier(.3, 1.5, .5, 1) .6s forwards; }
.ax-events.active .ax-dates .pick { animation: inkDark .2s ease .8s forwards; }
.ax-events .ax-ev { opacity: 0; transform: translateY(6px); }
.ax-events.active .e1 { animation: axIn .4s ease 1s forwards; }
.ax-events.active .e2 { animation: axIn .4s ease 1.2s forwards; }
.ax-rsvp { position: relative; margin-left: auto; padding: 3px 8px; border-radius: 999px; font-size: 7px; color: var(--smoke); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.ax-events.active .t-rsvp { animation: axTap .7s ease 1.9s; }
.ax-events.active .ax-rsvp { animation: goOn .3s ease 2.15s forwards; }

/* Application status */
.ax-tl { position: relative; list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.ax-tl::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 10px; width: 1px; background: rgba(255, 255, 255, 0.12); }
.ax-tl li { position: relative; padding-left: 28px; opacity: 0; transform: translateY(6px); }
.ax-tl li::before { content: ""; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%; background: #0b0a0c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.ax-tl li.done::before { background: var(--forest-bright); box-shadow: none; }
.ax-tl li.done::after { content: "✓"; position: absolute; left: 0; top: 1px; width: 17px; text-align: center; font-size: 9px; line-height: 17px; color: #08100c; }
.ax-tl li.now::before { box-shadow: inset 0 0 0 2px var(--gold-bright); }
.ax-tl b { display: block; font-weight: 500; font-size: 10px; color: var(--cream); }
.ax-tl li:not(.done):not(.now) b { color: var(--smoke-dim); }
.ax-tl small { display: block; margin-top: 2px; font-size: 7.5px; color: var(--smoke); }
.ax-appstat.active .ax-tl li { animation: axIn .4s ease forwards; }
.ax-appstat.active .t2 { animation-delay: .25s; } .ax-appstat.active .t3 { animation-delay: .5s; } .ax-appstat.active .t4 { animation-delay: .75s; }
.ax-appstat.active .t3::before { animation: tlNow 1.2s ease 1s 2 alternate; }
@keyframes tlNow { to { box-shadow: inset 0 0 0 2px var(--gold-bright), 0 0 0 5px rgba(228, 198, 135, 0.18); } }
.ax-appstat.active .t3 { animation: axIn .4s ease .5s forwards; }
.ax-appstat.active .t4::before { animation: tlDone .4s ease 3.6s forwards; }
@keyframes tlDone { to { background: var(--forest-bright); box-shadow: none; } }
.ax-appstat.active .t4 b { animation: tlInk .3s ease 3.6s forwards; }
@keyframes tlInk { to { color: var(--cream); } }
.ax-mail { margin-top: auto; display: flex; gap: 8px; align-items: center; padding: 9px; border-radius: 12px; font-size: 8px; background: rgba(30, 74, 56, 0.35); box-shadow: inset 0 0 0 1px rgba(78, 156, 121, 0.5); opacity: 0; transform: translateY(8px); }
.ax-mail > span:first-child { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #08100c; background: var(--forest-bright); }
.ax-mail svg { width: 11px; height: 11px; }
.ax-mail b { display: block; font-weight: 500; color: var(--cream); line-height: 1.35; }
.ax-mail small { font-size: 7px; color: var(--smoke); }
.ax-appstat.active .ax-mail { animation: axIn .5s ease 3.9s forwards; }

/* Membership checkout */
.ax-periods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(199, 166, 92, 0.25); }
.ax-periods span { display: flex; flex-direction: column; align-items: center; padding: 5px 0; border-radius: 7px; font-size: 7.5px; color: var(--smoke); }
.ax-periods small { font-family: var(--font-mono); font-size: 6.5px; color: var(--forest-bright); }
.ax-membership.active .p12 { animation: perOn .3s ease .8s forwards; }
@keyframes perOn { to { color: var(--noir); background: var(--gold-bright); } }
.ax-mrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ax-mrow b { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1; }
.ax-mrow > span:last-child { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--cream); }
.ax-mrow small { font-size: 7px; color: var(--smoke); }
.ax-mrow.silver b { color: #E2E6EB; } .ax-mrow.gold b { color: var(--gold-bright); } .ax-mrow.black b { color: #E7A1B4; }
.ax-radio { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(242, 236, 223, 0.4); }
.ax-membership.active .ax-mrow.gold { animation: mrowOn .35s ease 1.4s forwards; }
.ax-membership.active .ax-mrow.gold .ax-radio { animation: radioOn .3s ease 1.4s forwards; }
@keyframes mrowOn { to { box-shadow: inset 0 0 0 1.5px var(--gold-bright); background: rgba(199, 166, 92, 0.08); } }
@keyframes radioOn { to { box-shadow: inset 0 0 0 3.5px var(--gold-bright); } }
.ax-total { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); opacity: 0; transform: translateY(6px); }
.ax-total span { font-size: 7.5px; color: var(--smoke); }
.ax-total b { font-family: var(--font-mono); font-weight: 500; font-size: 16px; color: var(--cream); }
.ax-total small { font-size: 7px; color: var(--smoke-dim); }
.ax-membership.active .ax-total { animation: axIn .4s ease 1.9s forwards; }
.ax-pay { position: relative; margin-top: auto; }
.ax-membership.active .t-pay { animation: axTap .7s ease 2.8s; }

/* Groups & events: contemporary product previews, scoped away from the brand typography. */
.together { --preview-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif; }
.together .together-grid { gap: 24px; align-items: start; }
.together .tg-visual { --preview-tone: 107, 26, 48; padding: 0; aspect-ratio: auto; border-radius: 12px; background: radial-gradient(ellipse 110% 60% at 0% 0%, rgba(var(--preview-tone), .32), transparent 78%), linear-gradient(155deg, #211a1b, #141214 65%, #191518); box-shadow: inset 0 1px 0 rgba(244,225,188,.13), inset 0 -1px 0 rgba(0,0,0,.45), 0 18px 38px rgba(0,0,0,.25), 0 3px 8px rgba(0,0,0,.18); overflow: hidden; border: 1px solid rgba(199,166,92,.24); }
.together .tg-visual--wine { --preview-tone: 126, 38, 63; }
.together .tg-visual--forest { --preview-tone: 115, 78, 44; }
.together .tg-visual--plum { --preview-tone: 100, 64, 116; }
.together .tg-visual::before { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(238,210,158,.55), transparent); }

.together .tgx { width: 100%; max-width: none; min-height: 420px; padding: 24px 22px; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #f1eff0; }
.together .tgx, .together .tgx * { font-family: var(--preview-font); font-style: normal; letter-spacing: normal; }
.together .tga-bar { gap: 8px; margin-bottom: 22px; }
.together .tga-eyebrow { font-size: 10px; font-weight: 600; color: #c3b6a0; text-transform: uppercase; letter-spacing: .12em; }
.together .tga-title { font-size: 27px; font-weight: 600; line-height: 1.15; letter-spacing: -.035em; }
.together .tga-tabs { gap: 22px; margin-bottom: 22px; font-size: 12px; font-weight: 500; color: #aaa4aa; border-color: #343036; }
.together .tga-tabs span { padding-bottom: 12px; }
.together .tga-tabs .on { color: #f1eff0; box-shadow: inset 0 -2px 0 var(--gold); }
.together .tga-card { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.together .tgx-top { align-items: flex-start; flex-wrap: wrap; gap: 9px; }
.together .tgx-chip { padding: 5px 8px; border-radius: 5px; background: #35222b; box-shadow: none; color: #e9bdcb; font-size: 10px; font-weight: 500; }
.together .tgx-loc { gap: 4px; padding: 4px 0; font-size: 11px; color: #b8b0b7; }
.together .tgx-loc svg { width: 12px; height: 12px; }
.together .tgx-name { margin: 20px 0 9px; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.together .tgx-desc { font-size: 13px; line-height: 1.6; color: #bdb6bc; }
.together .tgx-row { margin-top: 23px; gap: 12px; flex-wrap: wrap; }
.together .tgx-faces i { width: 25px; height: 25px; background: #6a4653; box-shadow: 0 0 0 2px #151416; filter: none; }
.together .tgx-faces i:nth-child(2) { background: #456153; }
.together .tgx-faces i:nth-child(3) { background: #80704f; }
.together .tgx-faces i:nth-child(4) { background: #615766; }
.together .tgx-faces i.you { width: 0; background: #d8be82; font-size: 11px; }
.together .tgx-faces b { margin-left: 15px; font-size: 10px; color: #bdb6bc; }
.together .tgx-join { padding: 9px 13px; border-radius: 6px; background: #d8be82; color: #201c14; font-size: 11px; font-weight: 600; }
.together .tgx-next { margin-top: 23px; padding-top: 18px; border-color: #343036; gap: 12px; }
.together .tgx-next small { font-size: 10px; color: #aaa4aa; text-transform: none; letter-spacing: normal; }
.together .tgx-next b { margin: 4px 0; font-size: 13px; font-weight: 600; }
.together .tgx-next em { font-size: 11px; color: #bdb6bc; }
.together .tga-date { width: 42px; height: 46px; border-radius: 6px; background: #252226; box-shadow: none; font-size: 20px; font-weight: 600; color: #e3c887; }
.together .tga-date small { margin-bottom: 5px; font-size: 9px; font-weight: 500; color: #bdb6bc; }
.together .tgx-month { margin-bottom: 17px; }
.together .tgx-month b { font-size: 15px; font-weight: 600; }
.together .tgx-month span { font-size: 17px; color: #bdb6bc; letter-spacing: .2em; }
.together .tgx-days span { padding-bottom: 8px; font-size: 10px; color: #aaa4aa; }
.together .tgx-dates span { line-height: 30px; font-size: 12px; color: #d0cbd0; }
.together .tgx-dates .pick::before { inset: 2px; border-radius: 6px; background: #d8be82; }
.together .tgx-dates .ev::after { background: #82b69b; width: 3px; height: 3px; }
.together .tgx-events .tgx-event { margin-top: 20px; padding-top: 18px; flex-wrap: wrap; gap: 12px; border-color: #343036; }
.together .tgx-event b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.together .tgx-event small { font-size: 11px; color: #bdb6bc; }
.together .tga-going { margin-top: 8px; }
.together .tga-going em { font-size: 10px; color: #bdb6bc; }
.together .tgx-rsvp { width: 100%; justify-content: flex-end; border-radius: 0; box-shadow: none; padding: 0; gap: 8px; font-size: 10px; font-weight: 500; }
.together .tgx-rsvp span { padding: 7px 11px; border-radius: 5px; background: #252226; color: #cfc8ce; }
.together .tgx-roomhead { padding-bottom: 18px; border-color: #343036; gap: 10px; }
.together .tga-av { width: 36px; height: 36px; border-radius: 8px; background: #30282a; box-shadow: none; color: #e3c887; font-size: 16px; font-weight: 600; }
.together .tgx-roomhead > span:nth-child(2) { min-width: 0; }
.together .tgx-roomhead > span:nth-child(2) b { font-size: 13px; font-weight: 600; line-height: 1.3; }
.together .tgx-tier { margin-top: 5px; padding: 2px 0; background: none; box-shadow: none; color: #c8b28b; font-size: 10px; }
.together .tgx-joinroom { padding: 7px 10px; border-radius: 5px; background: #252226; box-shadow: none; font-size: 10px; text-transform: none; font-weight: 500; }
.together .tgx-room .tgx-msgs { min-height: 225px; gap: 15px; padding: 22px 0; justify-content: flex-start; }
.together .tgx-room .tgx-msgs p { gap: 10px; font-size: 12px; line-height: 1.5; }
.together .tgx-room .tgx-msgs p > i { width: 25px; height: 25px; background: #514650; color: #ede8ec; font-size: 10px; font-weight: 600; }
.together .tgx-room .tgx-msgs p > i.a2 { background: #65404e; }
.together .tgx-room .tgx-msgs p > i.a3 { background: #385347; }
.together .tgx-room .tgx-msgs p > span { flex: 1; min-width: 0; padding: 0; border-radius: 0; background: none; }
.together .tgx-room .tgx-msgs p > span b { font-size: 11px; font-weight: 600; color: #e7d6df; margin-bottom: 3px; }
.together .tgx-room .tgx-msgs small { font-size: 9px; color: #aaa4aa; margin-top: 4px; }
.together .tgx-typing { margin-left: 35px; background: #252226; border-radius: 5px; }
.together .tgx-input { padding: 11px 12px; border-radius: 6px; background: #252226; box-shadow: none; font-size: 12px; color: #aaa4aa; }
.together .tgx-input i { border-radius: 4px; background: #d8be82; }
@media (min-width: 1101px) { .together .tg-visual { min-height: 480px; } }
@media (max-width: 1100px) {
  .together .together-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; gap: 44px; }
  .together .together-head { max-width: 520px; margin-left: auto; margin-right: auto; }
  .together .tgx { padding: 26px; min-height: 0; }
  .together .tgx-room .tgx-msgs { min-height: 220px; }
}
@media (max-width: 380px) {
  .together .tgx { padding: 20px 16px; }
  .together .tga-title { font-size: 25px; }
  .together .tgx-roomhead { flex-wrap: wrap; }
  .together .tgx-joinroom { margin-left: 46px; }
  .together .tgx-row { row-gap: 15px; }
}

/* Keep room labels and avatars on the same product typography. */
.together .tgx .tgx-roomhead b, .together .tgx .tgx-room .tgx-msgs p > i, .together .tgx-room .tgx-msgs p > i, .together .tgx .tga-av { font-family: var(--preview-font); font-style: normal; }

/* Preview typography follows Fantasi's editorial font hierarchy. */
.together { --preview-font: "Times New Roman", Times, serif; }
.together .tgx .tga-title,
.together .tgx .tgx-name,
.together .tgx .tgx-month b,
.together .tgx .tgx-event b,
.together .tgx .tgx-next b,
.together .tgx .tgx-roomhead > span:nth-child(2) b {
  font-family: var(--font-serif, "Garamond", serif);
  font-weight: 400;
  font-style: normal;
}
.together .tgx .tga-eyebrow,
.together .tgx .event-meta,
.together .tgx .tgx-next small,
.together .tgx .tgx-tier {
  font-family: var(--font-serif, "Garamond", serif);
  font-weight: 400;
}

.together .tgx .tgx-roomhead > span:nth-child(2) b { font-family: var(--font-serif, "Garamond", serif); font-style: italic; font-size: 19px; font-weight: 400; line-height: 1.15; color: #f2e5d3; }