/* =============================================================================
   Rangmel — design system, v3: a native app, not a web page

   The reference class is the apps this one sits next to on somebody's phone —
   Grindr, Scruff, Bumble — and what they share is a set of conventions, not a
   colour: a dark, photo-first canvas; heavy grotesk type; big pill buttons; round
   floating actions; filled tab icons; grouped lists; sheets that slide up. People
   read those conventions as "this is an app". A serif and hairline rules read as
   "this is an article", which is what the previous version got wrong.

   So:
     - Dark always. Photographs look best on black, it is what the category uses,
       and a dark screen is harder to read over somebody's shoulder.
     - System UI font for everything functional. It is literally the font of the
       phone the app is running on, which is the whole trick of feeling native.
       One display face (Bricolage Grotesque) for the wordmark and big moments.
     - Colour is coded the way swipe apps have taught everyone to read it:
       lime = go / primary, pink = like, blue = standout, red = pass.
     - Every pair below was contrast-checked before it was used (WCAG 2.1 AA).

   Class names are unchanged from v1/v2, so no view had to move.
   ========================================================================== */

:root{
  color-scheme:dark;

  --paper:#0B0B10;          /* canvas */
  --card:#16161D;           /* raised surface */
  --paper-2:#22222C;        /* raised again: inputs, chips */
  --ink:#F5F5F7;            /* 18:1 on canvas */
  --ink-2:#A3A3AF;          /* 7.9:1 */
  --ink-3:#8B8B98;          /* 5.8:1 — still text, so still AA */
  --line:#24242E;           /* decorative divider */
  --line-2:#6B6B78;         /* boundary OF a control: 3.7:1 */

  --ember:#D4FF3A;          /* lime: primary action. 17:1 on canvas */
  --ember-2:#D4FF3A;
  --ember-soft:#232B0C;
  --on-ember:#0B0B10;       /* dark on lime: 17:1 */

  --rose:#FF4F81;           /* like. Carries DARK content: white on it is only 3.1:1 */
  --on-rose:#0B0B10;
  --blue:#5AB8FF;           /* standout */
  --plum:#16161D;--plum-2:#22222C;
  --gold:#FBBF24;
  --mint:#4ADE80;--mint-soft:#0F2A1A;
  --warn:#FBBF24;--warn-soft:#2B2207;
  --danger:#FF6B6B;--danger-soft:#2E1212;

  --pride:linear-gradient(90deg,#E40303 0 16.66%,#FF8C00 0 33.33%,#FFED00 0 50%,#008026 0 66.66%,#24408E 0 83.33%,#732982 0);
  --pride-soft:var(--pride);
  --trans:linear-gradient(90deg,#5BCEFA 0 20%,#F5A9B8 0 40%,#FFFFFF 0 60%,#F5A9B8 0 80%,#5BCEFA 0);

  --cream:var(--paper);--cream-2:var(--paper-2);
  --bg:var(--paper);--surface:var(--card);--surface-2:var(--paper-2);
  --text:var(--ink);--muted:var(--ink-2);--faint:var(--ink-3);

  --radius:20px;            /* photographs, cards, sheets */
  --radius-sm:14px;         /* inputs, list groups */
  --shadow:none;
  --shadow-lg:0 20px 50px -18px rgba(0,0,0,.9);

  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Bricolage Grotesque",var(--font-body);
  --font-mono:var(--font-body);   /* v2 used mono labels; v3 has none, the alias keeps old rules harmless */

  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --tab-h:58px;--top-h:60px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* WCAG 2.4.7. Lime clears 15:1 on every surface here, so one ring works everywhere. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--ember);outline-offset:2px;border-radius:6px}
.opt:has(input:focus-visible),.choice:has(input:focus-visible),
.seg label:has(input:focus-visible),.check:has(input:focus-visible),
.consent-item:has(input:focus-visible){outline:3px solid var(--ember);outline-offset:2px}
.seg label:has(input:focus-visible){outline-offset:-3px}
.btn-primary:focus-visible,.swipe-btn.go:focus-visible{outline-color:var(--ink)}

/* A class that sets `display` beats the browser's own [hidden] rule. Say it once. */
[hidden]{display:none!important}

/* 1.4.4: font sizes are rem so they follow the reader's own setting; lengths stay px. */
html{-webkit-text-size-adjust:100%;font-size:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);
  font-size:0.9688rem;line-height:1.5;min-height:100dvh;overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased}

h1,h2,h3,.display{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0}
h1{font-size:2.125rem}h2{font-size:1.5rem}
h3{font-size:1.0625rem;font-family:var(--font-body);font-weight:700;letter-spacing:-.01em;line-height:1.25}
p{margin:0}a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--ember);color:var(--on-ember)}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}

/* ---- shell --------------------------------------------------------------- */
.frame-bg{position:fixed;inset:0;background:#000;z-index:-1}
.app{position:relative;max-width:430px;margin:0 auto;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column}
@media (min-width:600px){
  body{padding:20px 0}
  .app{min-height:calc(100dvh - 40px);border-radius:36px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
  .app.no-frame{box-shadow:none;border:0;border-radius:0;max-width:none}
}

/* Large-title navigation bar, the iOS way: bold, left, no rule under it. */
.app-top{position:sticky;top:0;z-index:20;padding:calc(10px + var(--safe-t)) 16px 8px;display:flex;align-items:center;gap:8px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.app-top .title{font-family:var(--font-display);font-size:1.625rem;font-weight:800;flex:1;letter-spacing:-.035em;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-body{flex:1;padding:8px 16px calc(var(--tab-h) + 26px + var(--safe-b))}
.app-body.flush{padding-left:0;padding-right:0}

.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;
  min-height:calc(var(--tab-h) + var(--safe-b));padding-bottom:var(--safe-b);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-top:1px solid var(--line);z-index:30;user-select:none;-webkit-user-select:none}
@media (min-width:600px){.tabbar{bottom:20px;border-radius:0 0 36px 36px;max-width:428px}}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;
  padding:7px 3px;text-align:center;overflow-wrap:anywhere;position:relative;
  font-size:0.625rem;font-weight:600;color:var(--faint);transition:color .15s,transform .12s}
.tabbar a:active{transform:scale(.9)}
.tabbar a svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:fill .15s}
.tabbar a.active{color:var(--ember)}
/* Filled when active, outlined when not — the convention every tab bar has used since iOS 7. */
.tabbar a.active svg{fill:color-mix(in srgb,var(--ember) 26%,transparent)}
.tab-badge{position:absolute;top:3px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 5px;
  border-radius:999px;background:var(--rose);color:var(--on-rose);font-size:0.625rem;font-weight:800;
  display:grid;place-items:center;border:2px solid var(--bg)}

/* ---- buttons: pills, tall enough for a thumb ----------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  border-radius:999px;padding:0 24px;min-height:52px;font-weight:700;font-size:1rem;letter-spacing:-.01em;
  transition:transform .12s,filter .15s,background .15s;text-align:center;white-space:nowrap;line-height:1.2;
  user-select:none;-webkit-user-select:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ember);color:var(--on-ember)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-ghost{background:var(--paper-2);color:var(--text)}
.btn-line{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-block{width:100%}
.btn-sm{min-height:44px;padding:0 18px;font-size:0.875rem}
.btn-xs{min-height:34px;padding:0 13px;font-size:0.75rem;position:relative}
.btn-xs::after{content:"";position:absolute;inset:-5px -3px}
.btn[disabled]{opacity:.4;pointer-events:none}

.icon-btn{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--card);border:0;cursor:pointer;color:var(--text);flex:none;transition:transform .12s}
.icon-btn:active{transform:scale(.9)}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- surfaces ------------------------------------------------------------ */
.card{background:var(--card);border-radius:var(--radius);padding:18px}
/* `.card.soft` is the grouped list: one rounded block, rows divided inside it. */
.card.soft{background:var(--card);padding:15px 16px;border-radius:var(--radius)}
.card.soft:has(> .fact){padding:2px 16px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two{display:grid;gap:16px}@media(min-width:900px){.two{grid-template-columns:1fr 1fr;align-items:start}}
.divider{height:1px;background:var(--line);margin:16px 0}

.muted{color:var(--muted)}.faint{color:var(--faint)}
.small{font-size:0.875rem}.tiny{font-size:0.75rem;line-height:1.5}.bold{font-weight:700}.center{text-align:center}
.big{font-size:1.1875rem}

/* Section labels: small, bold, sentence case — the grouped-list header of a settings app. */
.eyebrow,.sx-eyebrow{font-size:0.8125rem;font-weight:700;letter-spacing:-.005em;color:var(--ink-3)}

.pill,.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;
  font-size:0.75rem;font-weight:700;background:var(--paper-2);color:var(--ink)}
.pill.ember{background:var(--ember);color:var(--on-ember)}
.pill.plum{background:var(--ink);color:var(--paper)}
.pill.gold{background:var(--warn-soft);color:var(--gold)}
.pill.mint{background:var(--mint-soft);color:var(--mint)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.danger{background:var(--danger-soft);color:var(--danger)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ---- forms ---------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:8px}
/* Only the field's OWN caption. `.choice`, `.opt` and `.check` are <label>s too. */
.field > label:not(.choice):not(.opt):not(.check){font-size:0.8125rem;font-weight:700;color:var(--ink-2)}
.input,textarea.input,select.input{width:100%;padding:15px 16px;border-radius:var(--radius-sm);
  border:1.5px solid var(--line-2);background:var(--card);outline:0;font-size:1rem;color:var(--ink);
  transition:border-color .15s,background .15s}
.input::placeholder{color:var(--ink-3)}
.input:focus{border-color:var(--ember);background:var(--paper-2)}
textarea.input{min-height:96px;resize:vertical;line-height:1.5}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23A3A3AF' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
input[type=date].input{color-scheme:dark}

/* Segmented control, as on iOS: a track with a sliding-looking selected thumb. */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;background:var(--card);padding:4px;border-radius:999px;
  box-shadow:inset 0 0 0 1.5px var(--line-2)}
.seg label{position:relative}.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:block;text-align:center;padding:10px 8px;border-radius:999px;font-weight:700;font-size:0.8125rem;color:var(--muted);transition:background .15s,color .15s}
.seg input:checked+span{background:var(--ember);color:var(--on-ember)}

.check{display:flex;gap:10px;align-items:flex-start;font-size:0.875rem;cursor:pointer;line-height:1.5}
.check input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--ember)}
.form-grid{display:grid;gap:12px}@media(min-width:620px){.form-grid{grid-template-columns:1fr 1fr}}

.upload{border:1.5px dashed var(--line-2);border-radius:var(--radius-sm);padding:20px;text-align:center;cursor:pointer;
  position:relative;background:var(--card);transition:border-color .15s}
.upload:hover{border-color:var(--ember)}
.upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload img{max-height:170px;margin:0 auto 8px;border-radius:12px;object-fit:cover}

/* ---- flash / toast: a banner, like a system notification ------------------ */
.flash{padding:13px 16px;border-radius:16px;font-size:0.875rem;font-weight:600;margin-bottom:12px;
  background:var(--paper-2);color:var(--ink);display:flex;gap:10px;align-items:flex-start}
.flash-mark{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:0.75rem;font-weight:800;
  background:var(--ink-3);color:var(--paper)}
.flash.success .flash-mark{background:var(--mint)}
.flash.error .flash-mark,.flash.danger .flash-mark{background:var(--danger)}
.flash.warn .flash-mark{background:var(--warn)}
.flash.error,.flash.danger{background:var(--danger-soft)}
.flash.success{background:var(--mint-soft)}
.flash.warn{background:var(--warn-soft)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100}
.skip-link:focus{left:8px;top:8px;background:var(--ember);color:var(--on-ember);padding:0 18px;border-radius:999px;
  font-weight:700;font-size:0.8125rem;min-height:44px;display:inline-flex;align-items:center}
.app-foot a{display:inline-block;padding:6px 2px;min-height:26px;line-height:1.5}

/* ---- bottom sheet: slides up, like the real thing ------------------------- */
.sheet{position:fixed;inset:0;z-index:60;display:none}
.sheet.open{display:block}
.sheet .bg{position:absolute;inset:0;background:rgba(0,0,0,.62);animation:fade .2s ease}
.sheet .panel{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:430px;
  background:var(--card);border-radius:26px 26px 0 0;padding:12px 18px calc(24px + var(--safe-b));
  max-height:90dvh;overflow:auto;animation:sheet-up .28s cubic-bezier(.2,.9,.3,1)}
.sheet .panel::before{content:"";display:block;width:38px;height:5px;border-radius:999px;background:var(--line-2);margin:0 auto 16px}
.sheet .panel .grip{display:none}
.sheet .panel .input,.sheet .panel select.btn{background:var(--paper-2)}
.sheet-cta{position:sticky;bottom:0;background:var(--card);padding-top:10px}
@keyframes sheet-up{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}

/* ---- tables (admin + legal) ----------------------------------------------- */
.table{width:100%;border-collapse:collapse;font-size:0.875rem}
.table th{text-align:left;font-size:0.75rem;font-weight:700;color:var(--ink-3);padding:10px;border-bottom:1px solid var(--line)}
.table td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.table tr:last-child td{border-bottom:0}

/* ---- brand ---------------------------------------------------------------- */
.brand{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.045em;
  display:inline-flex;align-items:center;gap:9px;text-transform:lowercase}
.brand i{width:28px;height:28px;border-radius:9px;flex:none;display:inline-block;font-style:normal;
  /* Two interlocking rings: two people, one mark. Inline so the wordmark needs no request. */
  background:var(--ember) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%230B0B10' stroke-width='2.4'%3E%3Ccircle cx='10.8' cy='14' r='4.6'/%3E%3Ccircle cx='17.2' cy='14' r='4.6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.brand i::before{content:none}
.pride-bar{height:4px;border-radius:999px;background:var(--pride)}

/* ---- plans / stats -------------------------------------------------------- */
.plan{border-radius:var(--radius);padding:18px;position:relative;background:var(--card)}
.plan.hot{box-shadow:inset 0 0 0 2px var(--ember)}
.plan .ribbon{position:absolute;top:14px;right:14px;background:var(--ember);color:var(--on-ember);border-radius:999px;
  font-size:0.6875rem;font-weight:800;padding:4px 10px}
.plan .price{font-family:var(--font-display);font-size:2.25rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.plan .price small{font-size:0.8125rem;font-family:var(--font-body);font-weight:600;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px}
.plan li{font-size:0.875rem;padding-left:22px;position:relative;color:var(--muted)}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--ember);font-weight:800}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font-family:var(--font-display);font-size:1.875rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.stat span{font-size:0.75rem;color:var(--ink-3);font-weight:600}

/* ---- onboarding / auth ---------------------------------------------------- */
.onb{padding:calc(14px + var(--safe-t)) 20px 44px;display:flex;flex-direction:column;min-height:100dvh;gap:20px;width:100%;max-width:430px;margin:0 auto}
.onb .steps{display:flex;gap:5px}
.onb .steps i{flex:1;height:4px;border-radius:999px;background:var(--paper-2)}
.onb .steps i.done{background:var(--ember)}
.auth-wrap{padding:calc(28px + var(--safe-t)) 22px 44px;display:flex;flex-direction:column;gap:20px;
  min-height:100dvh;justify-content:center;width:100%;max-width:430px;margin:0 auto}

/* ---- motion --------------------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.rise{animation:rise .38s cubic-bezier(.2,.9,.3,1) both}
.d1{animation-delay:.04s}.d2{animation-delay:.08s}.d3{animation-delay:.12s}
.d4{animation-delay:.16s}.d5{animation-delay:.2s}.d6{animation-delay:.24s}
/* Each screen fades in, so moving between tabs does not feel like a page load.
   Opacity only, and no fill-mode: an animation that touches `transform` and stays applied
   turns the element into the containing block for every position:fixed descendant, which
   un-pins the chat composer and the bottom sheets from the viewport. */
.app-body>*{animation:fade .22s ease}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =============================================================================
   Dating components
   ========================================================================== */

.strip{font-size:0.8125rem;color:var(--muted);font-weight:600}
.pronoun{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--paper-2);color:var(--ink);font-size:0.6875rem;font-weight:700}
.verified-ring{position:relative}
.verified-ring::after{content:"";position:absolute;inset:-4px;border-radius:inherit;padding:2.5px;
  background:var(--ember);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.badge-verified,.badge-v{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:999px;
  background:var(--blue);color:#06121C;font-family:var(--font-body);font-size:0.6875rem;font-weight:800;letter-spacing:0;vertical-align:middle}
.badge-verified svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:3}
.dot-online{width:10px;height:10px;border-radius:50%;background:var(--mint);display:inline-block;flex:none;box-shadow:0 0 0 2px rgba(0,0,0,.55)}

/* --- swipe deck: the card fills the screen; the actions float over its foot -- */
.deck{position:relative;height:clamp(380px,calc(100dvh - 292px),660px);margin:0 0 0;touch-action:pan-y}
.deck-card{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:var(--card);
  box-shadow:var(--shadow-lg);will-change:transform,opacity;user-select:none;-webkit-user-select:none}
.deck-card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.deck-card .shade{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.6) 30%,rgba(0,0,0,0) 58%),linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,0) 18%)}
.deck-card .info{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 48px;color:#fff}
.deck-card .info h2{font-size:1.875rem;color:#fff;display:flex;align-items:center;gap:8px;flex-wrap:wrap;letter-spacing:-.035em}
.deck-card .info .strip{color:rgba(255,255,255,.86);margin-top:3px}
.deck-card .info .pill{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.deck-card .card-open{position:absolute;inset:0;z-index:1}
.deck-card .card-open:focus-visible{outline:3px solid var(--ember);outline-offset:-6px;border-radius:22px}
.deck-card .card-flags{position:absolute;top:14px;left:14px;right:14px;display:flex;flex-wrap:wrap;gap:6px;z-index:2;pointer-events:none}
.deck-card .blurred-note{padding:6px 11px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;
  font-size:0.6875rem;font-weight:700;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.deck-card .stamp{position:absolute;top:34px;padding:6px 16px;border:4px solid;border-radius:12px;
  font-family:var(--font-display);font-weight:800;font-size:1.75rem;letter-spacing:.02em;opacity:0;text-transform:uppercase;z-index:3}
.deck-card .stamp.yes{left:22px;color:var(--mint);border-color:var(--mint);transform:rotate(-14deg)}
.deck-card .stamp.no{right:22px;color:var(--danger);border-color:var(--danger);transform:rotate(14deg)}
.deck-card .stamp.sup{left:50%;top:auto;bottom:130px;transform:translateX(-50%);color:var(--blue);border-color:var(--blue)}

/* Round, floating, overlapping the card's foot — the most recognisable shape in the category. */
.deck-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:-34px;padding-bottom:6px;position:relative;z-index:5}
.swipe-btn{width:56px;height:56px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:var(--paper-2);box-shadow:0 8px 22px -6px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .12s;user-select:none;-webkit-user-select:none}
.swipe-btn:active{transform:scale(.86)}
.swipe-btn svg{width:24px;height:24px;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.swipe-btn.nope svg{stroke:var(--danger)}
.swipe-btn.yes{width:68px;height:68px;background:var(--rose)}
.swipe-btn.yes svg{width:30px;height:30px;stroke:none;fill:var(--on-rose)}
.swipe-btn.sup svg{stroke:var(--blue);fill:color-mix(in srgb,var(--blue) 25%,transparent)}
.swipe-btn.rewind{width:46px;height:46px}
.swipe-btn.rewind svg{width:20px;height:20px;stroke:var(--gold)}
.swipe-btn[disabled]{opacity:.35;pointer-events:none}

/* --- match moment ----------------------------------------------------------- */
.match-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:fade .2s ease}
.match-overlay .inner{text-align:center;max-width:340px;width:100%;color:#fff}
.match-overlay h1{font-size:3rem;color:var(--ember);margin-bottom:6px;letter-spacing:-.05em;animation:pop .45s cubic-bezier(.2,.9,.3,1) both}
.match-overlay .faces{display:flex;justify-content:center;margin:26px 0}
.match-overlay .faces img{width:116px;height:116px;border-radius:50%;object-fit:cover;border:4px solid var(--bg);animation:pop .5s .1s cubic-bezier(.2,.9,.3,1) both}
.match-overlay .faces img+img{margin-left:-24px;animation-delay:.18s}

/* --- the grid: three across, photo to the edge, name and a dot -------------- */
.pgrid,.match-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:0 -13px}
.pcard,.mcard{position:relative;border-radius:12px;overflow:hidden;background:var(--card);aspect-ratio:3/4;display:block;transition:transform .12s}
.pcard:active{transform:scale(.97)}
.pcard img,.mcard img{width:100%;height:100%;object-fit:cover}
.pcard .shade,.mcard .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0) 46%)}
.pcard .meta,.mcard .info{position:absolute;left:0;right:0;bottom:0;padding:7px 8px;color:#fff}
.pcard .meta b,.mcard .info b{font-size:0.8125rem;font-weight:700;display:block;line-height:1.2;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .meta span{font-size:0.6563rem;opacity:.85;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .flag,.mcard .flag{position:absolute;top:6px;right:6px;left:6px;display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
.pcard .flag .pill{padding:2px 7px;font-size:0.625rem;background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(6px)}
.pcard .flag .pill.ember{background:var(--ember);color:var(--on-ember)}
.pcard .flag .pill.mint{background:var(--blue);color:#06121C}

/* --- profile page ------------------------------------------------------------ */
.gallery{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery img{flex:0 0 100%;scroll-snap-align:center;border-radius:24px;aspect-ratio:4/5;object-fit:cover}
.gallery img:not(:only-child){flex-basis:88%}
.prompt{background:var(--card);border-radius:var(--radius);padding:18px}
.prompt .q{font-size:0.8125rem;font-weight:700;color:var(--ink-3);margin-bottom:8px}
.prompt .a{font-family:var(--font-display);font-size:1.4375rem;font-weight:700;line-height:1.2;letter-spacing:-.03em}
.fact{display:flex;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);font-size:0.9375rem;min-height:48px}
.fact:last-child{border-bottom:0}
.fact .k{color:var(--ink-3);min-width:104px;font-size:0.8125rem;font-weight:600}

/* --- matches + chat ---------------------------------------------------------- */
.match-rail,.hscroll{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:4px 16px 12px;scrollbar-width:none}
.match-rail::-webkit-scrollbar,.hscroll::-webkit-scrollbar{display:none}
.match-rail a{flex:0 0 auto;width:72px;text-align:center}
.match-rail img{width:72px;height:72px;border-radius:50%;object-fit:cover;margin-bottom:6px}
.match-rail .verified-ring{border-radius:50%;display:inline-block}
.match-rail .nm{font-size:0.75rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-row{display:flex;gap:13px;align-items:center;padding:11px 0;min-height:76px;transition:opacity .12s}
.thread-row:active{opacity:.6}
.thread-row img{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:none}
.thread-row .t{flex:1;min-width:0;border-bottom:1px solid var(--line);padding:9px 0 17px;margin-bottom:-11px}
.thread-row .t b{display:block;font-size:1rem;font-weight:700;letter-spacing:-.01em}
.thread-row .t p{font-size:0.875rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.unread-dot{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--ember);color:var(--on-ember);
  font-size:0.75rem;font-weight:800;display:grid;place-items:center}

/* --- choices / toggles -------------------------------------------------------- */
.choice{display:block;border-radius:var(--radius-sm);padding:15px 48px 15px 16px;cursor:pointer;background:var(--card);
  box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .15s,background .15s;position:relative}
.choice::after{content:"";position:absolute;right:16px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--line-2);transition:.15s}
.choice:has(input:checked){box-shadow:inset 0 0 0 2px var(--ember);background:var(--ember-soft)}
.choice:has(input:checked)::after{box-shadow:inset 0 0 0 7px var(--ember)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice b{display:block;font-size:0.9688rem;font-weight:700;margin-bottom:2px}
.choice span{font-size:0.8125rem;color:var(--muted);line-height:1.45;display:block}
.opt{display:inline-flex;align-items:center;gap:6px;padding:0 16px;min-height:44px;border-radius:999px;
  background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line-2);cursor:pointer;font-size:0.875rem;font-weight:600;
  transition:background .12s,color .12s,transform .12s;position:relative;user-select:none;-webkit-user-select:none}
.opt:active{transform:scale(.95)}
.opt:has(input:checked){background:var(--ember);color:var(--on-ember);box-shadow:none}
.opt input{position:absolute;opacity:0;pointer-events:none}
.meter,.progress,.track{height:6px;border-radius:999px;background:var(--paper-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-2)}
.meter i,.progress i{display:block;height:100%;border-radius:999px;background:var(--ember);transition:width .35s}

/* --- notes --------------------------------------------------------------------- */
.upsell{border-radius:var(--radius);padding:16px;background:var(--card)}
.locked-face{filter:saturate(.5)}
.safety-note{font-size:0.8125rem;color:var(--muted);background:var(--card);border-radius:16px;padding:13px 15px;line-height:1.5}
.safety-note b{color:var(--ink)}
.sample-tag{font-size:0.625rem;font-weight:700;color:var(--ink-3);background:var(--paper-2);border-radius:999px;padding:2px 7px}
.avatar{border-radius:50%;object-fit:cover}
.skeleton{background:var(--card);border-radius:var(--radius-sm)}
.empty,.deck-empty{text-align:center;padding:40px 10px;display:flex;flex-direction:column;gap:10px;align-items:center}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:18px}
.topbar,.topline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.doc-frame{width:100%;height:340px;border:0;border-radius:var(--radius-sm);background:var(--paper-2)}
.contact-box{border-radius:var(--radius-sm);padding:14px;background:var(--card)}
.list-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}

/* --- consent --------------------------------------------------------------------- */
.consent-panel{max-width:560px}
.consent-docs{display:flex;flex-wrap:wrap;gap:6px}
.consent-docs a{font-size:0.75rem;font-weight:700;padding:7px 12px;border-radius:999px;background:var(--paper-2);color:var(--text)}
.consent-item{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--radius-sm);cursor:pointer;
  font-size:0.875rem;line-height:1.5;background:var(--paper-2);box-shadow:inset 0 0 0 1.5px transparent;color:var(--muted)}
.consent-item b{display:block;font-size:0.875rem;color:var(--ink);margin-bottom:3px;font-weight:700}
.consent-item input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--ember)}
.consent-item:has(input:checked){box-shadow:inset 0 0 0 2px var(--ember)}
.consent-foot{position:sticky;bottom:calc(-24px - var(--safe-b));background:var(--card);padding:12px 0 4px;display:grid;gap:8px}

/* --- photo manager ---------------------------------------------------------------- */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.photo-tile{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--card)}
.photo-tile img{width:100%;height:100%;object-fit:cover}
.photo-tile .tags{position:absolute;top:6px;left:6px;display:flex;gap:4px;flex-wrap:wrap}
.photo-tile .tools{position:absolute;left:0;right:0;bottom:0;display:flex;background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.photo-tile .tools form{flex:1;display:flex}
.photo-tile .tools button{flex:1;min-height:36px;border:0;background:transparent;color:#fff;cursor:pointer;font-size:0.6875rem;font-weight:700}
.photo-tile .tools form+form button{border-left:1px solid rgba(255,255,255,.2)}
.photo-tile .tools button:active{background:var(--ember);color:var(--on-ember)}
.photo-add{display:grid;place-items:center;text-align:center;border:1.5px dashed var(--line-2);border-radius:16px;aspect-ratio:3/4;
  cursor:pointer;position:relative;color:var(--muted);font-size:0.75rem;font-weight:700;background:var(--card)}
.photo-add:hover{border-color:var(--ember);color:var(--ember)}
.photo-add input{position:absolute;inset:0;opacity:0;cursor:pointer}
.photo-add b{width:40px;height:40px;border-radius:50%;background:var(--ember);color:var(--on-ember);display:grid;place-items:center;
  font-size:1.5rem;font-weight:500;line-height:1;margin:0 auto 8px}

/* --- long-form pages (legal, blog) -------------------------------------------------- */
.sx-crumbs{font-size:0.75rem;font-weight:600;color:var(--ink-3);padding:16px 0}
.sx-crumbs a{color:var(--muted)}.sx-crumbs span{margin:0 6px}
.sx-hero{padding:10px 0 28px}
.sx-lede2{font-size:1.125rem;line-height:1.6;color:var(--muted);margin-top:14px;max-width:60ch}
.sx-sec{padding:30px 0;border-top:1px solid var(--line)}
.sx-sec h2{font-size:clamp(1.5rem,3.4vw,2.125rem);margin-bottom:16px}
.sx-article{font-size:1.0313rem;line-height:1.72;max-width:68ch}
.sx-article h2{font-size:1.5rem;margin:32px 0 10px}
.sx-article h3{font-size:1.125rem;margin:24px 0 6px}
.sx-article p,.sx-article ul,.sx-article ol,.sx-article table{margin:0 0 16px}
.sx-article ul,.sx-article ol{padding-left:20px}
.sx-article li{margin-bottom:6px}
.sx-article a{color:var(--ember);text-decoration:underline;text-underline-offset:3px}
.sx-links{display:flex;flex-wrap:wrap;gap:6px}
.sx-links a{font-size:0.7813rem;font-weight:700;padding:8px 14px;border-radius:999px;background:var(--card);color:var(--text)}
.sx-cards{display:grid;gap:16px}
@media(min-width:720px){.sx-cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}

/* --- filter bar: a row of chips that scrolls sideways and applies on change ---------- */
.filterbar{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 12px;padding:2px 16px 6px;scrollbar-width:none}
.filterbar::-webkit-scrollbar{display:none}
.filterbar select,.filterbar .opt{flex:none;min-height:40px;border-radius:999px;border:0;background:var(--card);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line-2);font-size:0.8125rem;font-weight:700;padding:0 34px 0 14px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23A3A3AF' stroke-width='2.2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.filterbar .opt{background-image:none;padding:0 14px}
.filterbar select.on{background-color:var(--ember);color:var(--on-ember);box-shadow:none}

/* --- share bar under an article ------------------------------------------------------- */
.sharebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:18px 0 6px;border-top:1px solid var(--line)}
.sharebar>span{margin-right:4px}
.sx-final{background:var(--card);border-radius:var(--radius);padding:28px 22px;margin:30px 0 10px;text-align:center}
.sx-final h2{margin-bottom:8px}.sx-final p{color:var(--muted);max-width:52ch;margin:0 auto 18px}
.sx-posts{display:grid;gap:12px}@media(min-width:720px){.sx-posts{grid-template-columns:repeat(3,1fr)}}
.sx-post{display:block;background:var(--card);border-radius:var(--radius);padding:18px}
.sx-post b{display:block;font-size:1rem;margin-bottom:6px}.sx-post span{font-size:0.8125rem;color:var(--muted)}

/* --- programmatic pages: comparison table and FAQ ------------------------------------ */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px;border-radius:var(--radius);background:var(--card)}
.cmp{width:100%;border-collapse:collapse;font-size:0.875rem;min-width:520px}
.cmp th,.cmp td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{font-size:0.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cmp thead th a{color:var(--ink);text-decoration:none}
.cmp tbody th{font-weight:600;color:var(--ink);width:34%}
.cmp td.ours{color:var(--ember);font-weight:600}
.cmp-wide{min-width:1100px}.cmp-wide tbody th{width:auto;min-width:180px}
.faq{display:grid;gap:10px;margin-top:14px}
.faq details{padding:0}.faq summary{cursor:pointer;padding:16px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--muted)}.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}.faq details p{padding:0 18px 16px}
.swipe-hint{margin-top:12px}@media(min-width:1180px){.cmp:not(.cmp-wide)~.swipe-hint,.swipe-hint.wide-only{display:none}}@media(min-width:760px){.swipe-hint:not(.wide){display:none}}
.qq{padding:22px}.qq legend{padding:0}.qq .btn{width:100%;min-height:52px;line-height:1.35}