:root{--ink:#31234b;--plum:#402c68;--lavender:#e9e1fa;--cream:#f9f6f0;--coral:#ed7662;--muted:#70677c;--line:#ddd5e8;
  /* One measure for every content column, so a wide window actually gets used.
     Full-bleed bands already span the viewport; it was the columns inside them that
     stayed pinned at 1200px and left the page floating in the middle of a big screen. */
  --page-max:1760px;--page:min(94vw,var(--page-max));--gutter:max(24px,calc((100% - var(--page)) / 2));}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif}button,a{font:inherit}button{cursor:pointer}.site-header{height:82px;max-width:var(--page);margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;color:var(--plum);font-size:21px;font-weight:700;text-decoration:none;letter-spacing:-.8px}.site-header,.app-header,.assessment-header,.sodacity-bar{min-height:116px}@media(max-width:600px){.site-header,.app-header,.assessment-header,.sodacity-bar{min-height:88px}.brand-mark{height:60px}}.brand-accent{color:var(--coral);margin-left:.26em}.brand-mark{width:auto;height:84px;display:inline-block;background:none;border-radius:0;margin-right:9px;vertical-align:middle}.site-header nav{display:flex;gap:31px;margin-left:90px}.site-header nav a,footer a{color:var(--ink);text-decoration:none;font-size:14px}.text-button{border:0;background:none;color:var(--plum);font-weight:600}.hero{min-height:548px;max-width:var(--page);margin:auto;padding:70px 55px 77px;display:grid;grid-template-columns:1fr 1fr;gap:50px}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:700;text-transform:uppercase;color:#776990;margin:0 0 17px}.eyebrow span{display:inline-block;width:20px;height:2px;background:var(--coral);vertical-align:middle;margin-right:8px}.hero h1,.section-title h2,.match-copy h2,.safety-section h2,.cta h2,dialog h2{font:600 clamp(45px,5vw,68px)/.98 'Fraunces',Georgia,serif;letter-spacing:-2.7px;margin:0}.hero h1 em,h2 em{font-style:italic;color:var(--coral)}.lede{font-size:17px;line-height:1.6;max-width:440px;margin:24px 0;color:#5e556b}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:31px}/* text-decoration:none matters: half the buttons on this site are <a class="button">, and
   without it they render as an underlined hyperlink inside a coloured box — underline
   running under the arrow and all. inline-flex also stops the arrow sitting on its own
   baseline away from the label. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:8px;padding:15px 20px;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s}
.button:hover{transform:translateY(-1px)}
.button b{font-weight:700;text-decoration:none}.button:hover{transform:translateY(-2px);box-shadow:0 8px 16px #35265025}.button b{font-size:18px;line-height:0;margin-left:17px}.button-primary{background:var(--plum);color:white}.button-dark{background:var(--ink);color:white}.button-light{background:white;color:var(--plum)}.cta-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px}.demo-link{display:inline-flex;align-items:center;background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff;text-decoration:none}.demo-link b{color:#fff!important}.demo-link:hover{background:rgba(255,255,255,.14);border-color:#fff}.fingerprint-orbit{--ring:150px;--cap:70px;position:relative;width:340px;height:340px;margin:0 auto;display:grid;place-items:center;perspective:900px;cursor:grab;touch-action:pan-y}.fingerprint-orbit.dragging{cursor:grabbing}.fingerprint-orbit::before{content:'';position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border:1px solid #d7c7ed;border-radius:50%;pointer-events:none}.orbit-core{position:relative;z-index:2;display:block;width:104px;height:104px;filter:drop-shadow(0 8px 18px rgba(57,35,77,.18))}.orbit-core svg,.orbit-counter svg{display:block;width:100%;height:100%}.orbit-ring{position:absolute;inset:0;transform:rotate(var(--spin,0deg))}.orbit-ring i{position:absolute;left:50%;top:50%;width:var(--cap);height:var(--cap);margin:calc(var(--cap)/-2) 0 0 calc(var(--cap)/-2);transform:rotate(var(--a)) translateY(calc(var(--ring)*-1)) rotate(calc(var(--a)*-1))}.orbit-counter{display:block;width:100%;height:100%;transform:rotate(calc(var(--spin,0deg)*-1))}.orbit-counter svg{animation:cap-tilt 7.5s ease-in-out infinite;filter:drop-shadow(0 5px 11px rgba(57,35,77,.2))}.orbit-ring i:nth-child(2n) .orbit-counter svg{animation-delay:-2.6s}.orbit-ring i:nth-child(3n) .orbit-counter svg{animation-delay:-4.9s}@keyframes cap-tilt{0%,100%{transform:perspective(420px) rotateY(-20deg)}50%{transform:perspective(420px) rotateY(20deg)}}@media(prefers-reduced-motion:reduce){.orbit-counter svg{animation:none}}@media(max-width:720px){.fingerprint-orbit{--ring:118px;--cap:58px;width:270px;height:270px;margin:55px auto 0}.fingerprint-orbit::before{width:236px;height:236px;margin:-118px 0 0 -118px}.orbit-core{width:82px;height:82px}}.watch-link{font-size:14px;color:var(--ink);font-weight:600;text-decoration:none}.watch-link i{font-style:normal;color:var(--coral);font-size:10px;margin-right:7px}.microcopy{color:#837990;font-size:12px;margin-top:23px}.hero-visual{position:relative;height:395px;max-width:470px;margin:0 auto;width:100%}.sun-shape{position:absolute;width:320px;height:320px;border-radius:50%;background:#e4d7fa;right:13px;top:5px}.profile-card{position:absolute;background:white;border-radius:13px;box-shadow:0 20px 50px #4a396422;overflow:hidden}.main-profile{right:44px;top:25px;width:244px;transform:rotate(3deg)}.main-profile img{display:block;width:100%;height:261px;object-fit:cover}.profile-info{padding:12px 15px 15px}.online{font-size:10px;color:#619874}.profile-info h3{font:600 22px 'Fraunces',serif;margin:5px 0}.profile-info p{margin:0;font-size:10px;color:var(--muted)}.profile-info p span{color:var(--coral)}.match-bubble{position:absolute;left:0;top:224px;background:white;border-radius:9px;padding:10px 13px 10px 10px;box-shadow:0 15px 30px #4a39642a;display:flex;align-items:center;gap:9px;font-size:11px}.small-avatar{width:34px;height:34px;border-radius:50%;overflow:hidden}.small-avatar img{height:100%;width:100%;object-fit:cover}.match-bubble div:nth-child(2){display:flex;flex-direction:column;gap:3px}.match-bubble strong{color:var(--coral)}.match-bubble span{color:#81758e;font-size:9px}.match-bubble>b{color:var(--plum);font-size:16px;margin-left:5px}.quote-chip{position:absolute;right:0;top:10px;background:#f6d7b3;padding:10px 13px;border-radius:7px;font:italic 13px 'Fraunces',serif;transform:rotate(-4deg)}.quote-chip span{color:var(--coral);font-style:normal}.dot{position:absolute;border-radius:50%;background:var(--coral)}.dot-one{width:10px;height:10px;right:5px;top:60px}.dot-two{width:5px;height:5px;left:37px;top:100px}.intro-stat{background:var(--plum);color:white;display:flex;align-items:center;justify-content:center;gap:0;padding:25px}.intro-stat>p{font:600 18px 'Fraunces',serif;margin:0 54px 0 0}.intro-stat div{border-left:1px solid #79699b;padding:0 32px;display:flex;flex-direction:column;max-width:152px}.intro-stat strong{font:600 22px 'Fraunces',serif}.intro-stat span{font-size:10px;color:#cfc5de;margin-top:3px}.how-section{max-width:var(--page);margin:auto;padding:113px 55px 120px}.section-title{display:flex;align-items:end;justify-content:space-between}.section-title h2,.match-copy h2,.safety-section h2{font-size:48px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:68px;margin-top:55px}.steps article{position:relative}.step-number{color:#b7aac7;font:600 14px 'Fraunces',serif}.step-icon{height:54px;width:54px;display:grid;place-items:center;background:var(--lavender);border-radius:50%;font-size:24px;color:var(--plum);margin:18px 0}.steps h3{font:600 21px 'Fraunces',serif;margin:0 0 12px}.steps p,.match-copy>p,.safety-section p{color:var(--muted);font-size:14px;line-height:1.65;margin:0}.match-preview{background:#eee6fb;padding:94px max(55px,calc((100vw - 1090px)/2));display:flex;gap:145px;align-items:center}.match-copy{width:408px}.match-copy>p{margin:20px 0 28px;font-size:15px}.compatibility-card{width:285px;background:white;padding:20px 20px 22px;border-radius:11px;box-shadow:0 20px 35px #4e3f7320}.compat-header{display:flex;justify-content:space-between;color:#756a81;font-size:11px}.compat-header button{border:0;background:none;color:#756a81}.circle-score{margin:19px auto;width:120px;height:120px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(white 60%,transparent 61%),conic-gradient(var(--coral) 0 92%,#eee7f5 92%)}.circle-score strong{font:600 33px 'Fraunces',serif}.circle-score span{font-size:9px;color:var(--coral)}.traits{margin-top:20px}.traits div{display:grid;grid-template-columns:1fr auto;gap:5px;margin-top:13px;color:#786e83;font-size:10px}.traits b{color:var(--ink);font-size:10px}.traits div:after{content:'';grid-column:1/-1;height:4px;border-radius:3px;background:linear-gradient(to right,var(--coral) var(--bar),#eee8f3 var(--bar))}.safety-section{max-width:840px;margin:auto;padding:115px 20px;display:grid;grid-template-columns:120px 1fr;gap:45px;align-items:start}.safety-icon{width:92px;height:92px;border-radius:50%;background:#f9d9d2;color:var(--coral);display:grid;place-items:center;font-size:47px}.safety-section h2{margin:0 0 16px}.safety-section p{max-width:545px}.safety-section a{display:inline-block;margin-top:21px;color:var(--plum);font-weight:700;font-size:13px}.cta{text-align:center;background:var(--coral);color:white;padding:90px 20px 96px}.cta .eyebrow{color:#ffe7dc}.cta .eyebrow span{background:white}.cta h2{font-size:53px;margin-bottom:27px}.cta .button b{color:var(--coral)}footer{max-width:var(--page);margin:auto;min-height:106px;padding:0 28px;display:flex;align-items:center;justify-content:space-between}footer p{font-size:11px;color:#8e8397}footer div{display:flex;gap:19px}footer div a{font-size:11px;color:#756c7f}dialog{width:min(470px,calc(100% - 32px));border:0;border-radius:14px;padding:38px;background:var(--cream);color:var(--ink);box-shadow:0 20px 70px #20153060}dialog::backdrop{background:#281b3e85;backdrop-filter:blur(4px)}dialog h2{font-size:35px;margin:8px 0 10px}dialog>p{color:var(--muted);line-height:1.5;font-size:14px}.close{position:absolute;right:15px;top:10px;border:0;background:transparent;font-size:29px;color:#83778c}form{display:grid;gap:13px;margin-top:22px}label{font-size:12px;font-weight:700;color:#665a70}input{margin-top:5px;width:100%;border:1px solid var(--line);border-radius:5px;padding:11px;background:white;font:14px 'DM Sans',sans-serif}.check{font-weight:400;display:flex;gap:8px;line-height:1.35}.check input{width:auto;margin:1px}.choices{display:grid;gap:9px;margin-top:22px}.choices button{background:white;border:1px solid var(--line);padding:13px;text-align:left;color:var(--ink);border-radius:7px;font-size:14px}.choices button:hover{border-color:var(--coral);background:#fff9f7}@media(max-width:720px){.site-header{height:70px;padding:0 20px}.site-header nav{display:none}.hero{display:block;padding:47px 27px 42px;min-height:0}.hero h1{font-size:49px}.hero-visual{height:405px;margin-top:34px;max-width:360px}.main-profile{right:30px}.intro-stat{display:grid;grid-template-columns:1fr 1fr;gap:17px;padding:25px}.intro-stat>p{grid-column:1/-1;margin:0;font-size:17px}.intro-stat div{padding-left:14px}.how-section{padding:70px 27px}.section-title{display:block}.steps{grid-template-columns:1fr;gap:35px;margin-top:42px}.match-preview{display:block;padding:70px 27px}.match-copy{width:auto}.compatibility-card{margin:39px auto 0}.safety-section{padding:75px 27px;grid-template-columns:1fr;gap:20px}.safety-icon{width:65px;height:65px;font-size:35px}.cta{padding:70px 20px}.cta h2{font-size:42px}footer{padding:25px 20px;display:grid;gap:16px}footer p{margin:0}footer div{flex-wrap:wrap}.hero-actions{align-items:flex-start;flex-direction:column;gap:17px}}.parallax-band{position:relative;display:block;width:100%;height:clamp(320px,58vh,620px);overflow:hidden;background:#39234d}/* 168%, not 134%: the drift available to the effect is (image height - band height), and
   that travel is spread across the whole time the band crosses the viewport. At 134% a
   620px band gave ~210px of movement over ~1500px of scrolling — technically parallax,
   visually nothing. 168% roughly doubles it. */
.parallax-band .parallax-image{position:absolute;left:0;top:0;width:100%;height:168%;object-fit:cover;object-position:center;display:block;will-change:transform;transform:translate3d(0,0,0)}.parallax-band .parallax-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(41,25,58,.34) 0%,rgba(41,25,58,.05) 38%,rgba(41,25,58,.64) 100%);pointer-events:none}.parallax-caption{position:absolute;left:0;right:0;bottom:0;padding:0 60px 48px;max-width:760px;color:#fff;pointer-events:none}.parallax-caption .eyebrow{color:#ffe7dc;margin:0 0 12px}.parallax-caption .eyebrow span{background:#ed7662}.parallax-caption h2{font:600 45px/.98 Fraunces,serif;letter-spacing:-1.7px;color:#fff;margin:0}.parallax-caption h2 em{font-style:normal;color:#ed7662}.parallax-caption p{font-size:16px;line-height:1.6;color:#efe6f5;margin:14px 0 0;max-width:46ch}@media (max-width:860px){.parallax-band{height:clamp(260px,42vh,380px)}.parallax-caption{padding:0 27px 32px}.parallax-caption h2{font-size:32px;letter-spacing:-1.1px}.parallax-caption p{font-size:15px}}@media (prefers-reduced-motion:reduce){.parallax-band .parallax-image{height:100%;transform:none!important}}

/* --- header nav + avatar ---------------------------------------------------
   Sizing lives in eight places (page <style> blocks, discover.css, social.css,
   account.css, and !important rules injected at runtime by script.js / menu.js /
   profile.js / matches.js / messages.js). Injected styles land in <head> after
   this sheet, so equal-specificity !important would lose — these selectors are
   deliberately more specific than any of them.

   Three things have to hold together or the header falls apart:
   1. nowrap everywhere. "Matches 3" wrapping to two lines was the actual bug —
      it made the nav taller, and because the nav defaults to align-items:stretch
      every sibling grew with it, which is why the active tab became a tall block.
   2. align-items:center on the nav, so no button can ever stretch to a sibling.
   3. one explicit height for every tab, scaled with clamp() rather than by
      content, so they stay identical and resize smoothly. */
header .brand{flex-wrap:nowrap;white-space:nowrap}
header.app-header,header.sodacity-bar{align-items:center!important}
header.app-header .app-nav,
header.app-header nav,
header.sodacity-bar .sodacity-nav,
header.sodacity-bar nav{
  display:flex!important;align-items:center!important;flex-wrap:nowrap!important;
  gap:clamp(2px,.5vw,8px)!important}
header.app-header nav a,
header.app-header .nav-button,
header.sodacity-bar nav a,
header.sodacity-bar .sodacity-nav a{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:7px!important;white-space:nowrap!important;flex:0 0 auto!important;
  height:clamp(36px,3.4vw,46px)!important;
  padding:0 clamp(11px,1.3vw,19px)!important;
  font-size:clamp(12.5px,1.1vw,16px)!important;
  line-height:1!important;border-radius:9px!important}
header.app-header .nav-button .count,
header.app-header nav b,
header.sodacity-bar nav b{
  flex:none!important;margin:0!important;white-space:nowrap!important;
  font-size:clamp(9px,.8vw,11px)!important;padding:2px 6px!important;border-radius:11px!important;
  line-height:1.35!important}
header.app-header>.user-avatar,
header.app-header .account-menu-button,
header.sodacity-bar>.profile-avatar,
header.assessment-header .user-avatar{
  flex:0 0 auto!important;
  width:clamp(40px,3.9vw,52px)!important;height:clamp(40px,3.9vw,52px)!important;
  font-size:clamp(18px,1.7vw,24px)!important}
@media(max-width:700px){
  header.app-header nav a,
  header.app-header .nav-button,
  header.sodacity-bar nav a,
  header.sodacity-bar .sodacity-nav a{height:38px!important;padding:0 10px!important;font-size:12.5px!important}
}

/* --- mobile hardening ------------------------------------------------------
   `viewport-fit=cover` lets the page paint under the notch/home indicator, so
   anything anchored to a screen edge needs safe-area padding or it lands under
   the hardware.

   Inputs are pinned to 16px because iOS Safari auto-zooms the page whenever you
   focus a field smaller than that, and then never zooms back out. The usual
   workaround is `user-scalable=no` in the viewport tag, which also kills
   pinch-zoom for everyone — fixing the font size solves it without that cost. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
@media(max-width:820px){
  input,select,textarea{font-size:16px!important}
  input[type=range],input[type=checkbox],input[type=radio]{font-size:inherit!important}
  /* Touch targets: 44px is the smallest reliably hittable control. */
  .button,.q-scale button,.seg button,.chips button,.chip,.mc-go,.cola-toggle,
  .pm-item figcaption button,.next-chip{min-height:44px}
  .mc-redo{width:44px;height:44px}
}
@supports(padding:max(0px)){
  .site-header,.app-header,.assessment-header,.sodacity-bar,.doc-header{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right))}
  footer,.doc-foot{padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .luvoa-menu,.sodacity-menu{margin-bottom:env(safe-area-inset-bottom)}
}
/* Wide content must scroll inside itself rather than widening the document. */
@media(max-width:700px){
  .doc table,.chart-host,.con-chart{overflow-x:auto}
  .app{grid-template-columns:1fr!important}
}

/* --- testimonial marquee --- */
.testimonials{padding:84px 0 90px;background:#faf6fc;overflow:hidden}
.tm-head{max-width:var(--page);margin:0 auto 34px;padding:0 max(24px,4vw);
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.tm-head h2{font:600 clamp(32px,4.4vw,44px)/1 'Fraunces',Georgia,serif;letter-spacing:-1.8px;margin:0;color:#39234d}
.tm-head h2 em{font-style:italic;color:#ed7662}
.tm-head .eyebrow{width:100%;margin:0 0 6px}
.tm-demo{margin-left:auto;align-self:center;background:#fff0c9;border:1px solid #e8cf8a;color:#8a6a13;
  border-radius:20px;padding:6px 13px;font:700 11px 'DM Sans',sans-serif}
.tm-viewport{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tm-track{display:flex;gap:16px;width:max-content;animation:tm-scroll var(--tm-duration,56s) linear infinite}
.tm-viewport:hover .tm-track{animation-play-state:paused}
@keyframes tm-scroll{to{transform:translateX(-50%)}}
.tm-card{flex:0 0 330px;margin:0;padding:24px 26px;background:#fff;border:1px solid #ece4f2;
  border-radius:14px;box-shadow:0 8px 24px rgba(57,35,77,.06);display:flex;flex-direction:column;gap:16px}
.tm-card blockquote{margin:0;font:400 16px/1.55 'Fraunces',Georgia,serif;color:#39234d}
/* Both marks, not just the opener — an unclosed quotation reads as a typo. line-height:0
   keeps the oversized glyphs from stretching the line they sit on. */
.tm-card blockquote:before{content:'“';color:#ed7662;font-size:26px;line-height:0;margin-right:2px}
.tm-card blockquote:after{content:'”';color:#ed7662;font-size:26px;line-height:0;margin-left:2px}
.tm-card figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.tm-card figcaption b{font:700 13px 'DM Sans',sans-serif;color:#402c68}
.tm-card figcaption span{font-size:11.5px;color:#8a7b95;font-weight:600}
@media(prefers-reduced-motion:reduce){
  .tm-track{animation:none}
  .tm-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
@media(max-width:600px){.testimonials{padding:60px 0 64px}.tm-card{flex-basis:270px;padding:20px}}

/* --- landing header: log-in button + collapsible nav ------------------------
   `.text-button` was `border:0;background:none`, so "Log in" rendered as a bare
   underlined anchor butted against FAQ. And the nav was simply `display:none`
   below the breakpoint with nothing in its place — every landing link was
   unreachable on a phone. It now collapses into the same ☰ pattern the app
   pages use rather than disappearing. */
header.site-header{position:relative}
header.site-header .text-button{
  display:inline-flex!important;align-items:center;justify-content:center;
  height:clamp(38px,3.4vw,46px);padding:0 clamp(15px,1.5vw,22px);
  margin-left:clamp(14px,2vw,30px);flex:0 0 auto;
  border:1.5px solid var(--plum);border-radius:9px;background:transparent;
  color:var(--plum);font:700 clamp(13px,1.1vw,15px) 'DM Sans',sans-serif;
  text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
header.site-header .text-button:hover{background:var(--plum);color:#fff8f5}
header.site-header nav{gap:clamp(14px,2.2vw,31px)!important;margin-left:clamp(20px,4vw,90px)!important}
header.site-header nav a{white-space:nowrap}

.nav-toggle{display:none;width:44px;height:44px;flex:0 0 auto;margin-left:auto;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--plum);
  font-size:20px;line-height:1;cursor:pointer}
.nav-toggle[aria-expanded="true"]{background:var(--plum);color:#fff8f5;border-color:var(--plum)}

@media(max-width:820px){
  .nav-toggle{display:grid;place-items:center}
  header.site-header nav{display:none!important}
  header.site-header.nav-open nav{
    display:flex!important;flex-direction:column;align-items:stretch;
    position:absolute;top:calc(100% - 1px);right:16px;left:16px;z-index:60;
    margin:0!important;gap:2px!important;padding:10px;
    background:#fff;border:1px solid var(--line);border-radius:12px;
    box-shadow:0 18px 40px rgba(48,32,61,.16)}
  header.site-header.nav-open nav a{padding:13px 12px;border-radius:8px;font-size:15px}
  header.site-header.nav-open nav a:hover{background:#f4eef8}
  /* The log-in button moves into the panel so the collapsed bar stays clean. */
  header.site-header .text-button{display:none!important}
  header.site-header.nav-open nav .text-button{
    display:inline-flex!important;margin:6px 0 0!important;background:var(--plum);color:#fff8f5}
}
/* Active tab, for both the <button> nav on Discover and the <a> navs elsewhere. */
header.app-header nav a.active,
header.app-header .nav-button.active{background:var(--plum)!important;color:#fff!important}
header.app-header nav a.active b,
header.app-header .nav-button.active .count{background:#ed7662!important;color:#fff!important}

/* --- dual-range slider (age) ------------------------------------------------
   Two range inputs share one track. The inputs themselves are transparent and
   pointer-events:none so they do not block each other; only the thumbs take
   pointer events, which is what makes two overlaid sliders usable at all. */
.dual-range-ui{position:relative;display:block;height:46px;margin-top:4px}
.dual-range-ui .dr-rail,.dual-range-ui .dr-span{position:absolute;top:8px;height:5px;border-radius:3px}
.dual-range-ui .dr-rail{left:0;right:0;background:#e6ddec}
.dual-range-ui .dr-span{background:var(--coral)}
/* Both inputs are stacked over the same rail, transparent, with only their thumbs taking
   pointer events — that is what makes two overlaid sliders usable. The input is exactly as tall
   as a thumb so the thumb centres on the rail with no guesswork. */
/* The bare `input{}` rule up top gives every input a white bordered pill with 11px padding,
   which was being drawn behind the rail and is most of why this looked odd. Reset it here. */
.dual-range-ui input[type=range]{position:absolute;left:0;top:0;width:100%;height:21px;margin:0;
  padding:0;border:0;border-radius:0;box-shadow:none;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none}
.dual-range-ui input[type=range]:focus{outline:none}
.dual-range-ui input[type=range]::-webkit-slider-runnable-track{background:none;height:21px}
.dual-range-ui input[type=range]::-moz-range-track{background:none;height:21px}
.dual-range-ui input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;
  width:18px;height:18px;margin-top:1.5px;border-radius:50%;background:#fff;
  border:2px solid var(--coral);box-shadow:0 1px 3px rgba(57,35,77,.22);cursor:grab}
.dual-range-ui input[type=range]::-moz-range-thumb{pointer-events:auto;
  width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--coral);
  box-shadow:0 1px 3px rgba(57,35,77,.22);cursor:grab}
.dual-range-ui input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(237,118,98,.32)}
/* The scale ends sit BELOW the track. At top:26 they were level with the bottom of an 18px
   thumb, so "18" and "60" appeared to be printed on the slider. */
.dual-range-ui .dr-ends{position:absolute;left:0;right:0;top:24px;display:flex;
  justify-content:space-between;font:600 10.5px 'DM Sans',sans-serif;color:#a99cba;
  pointer-events:none}

/* --- page ground -----------------------------------------------------------
   Flat tan read as unfinished. This is a fixed, very low-contrast wash: two
   soft colour pools (lavender top-left, warm coral bottom-right) over the cream
   base. `background-attachment:fixed` keeps it still while content scrolls, so
   it behaves like paper stock rather than a moving gradient. Kept faint on
   purpose — the cards and charts carry the colour, the ground only warms it. */
body{
  background-color:#fdfaf6;
  background-image:
    radial-gradient(ellipse 900px 620px at 8% -8%, rgba(179,150,226,.20), transparent 62%),
    radial-gradient(ellipse 780px 560px at 104% 6%, rgba(237,118,98,.14), transparent 60%),
    radial-gradient(ellipse 1000px 700px at 50% 108%, rgba(122,86,201,.13), transparent 62%);
  background-attachment:fixed;
  background-repeat:no-repeat}
/* Full-bleed bands set their own ground and must stay opaque over the wash. */
.intro-stat,.cta,.parallax-band,.community-section,.testimonials,
.app-header,.site-header,.assessment-header,.sodacity-bar,.doc-header,footer{
  position:relative;z-index:0}


/* --- app navigation on EVERY header ----------------------------------------
   The tab styling used to live only in social.css, which matches.html,
   messages.html and columbia.html load — so on assessment.html and
   fingerprint.html the same markup rendered as bare underlined links. These
   rules are in styles.css (loaded everywhere) and are one step more specific
   than social.css's, so the two agree instead of fighting. */
header.assessment-header{
  max-width:none;gap:clamp(12px,2.2vw,34px);justify-content:flex-start;
  padding:0 var(--gutter);
  background:#fff;border-bottom:1px solid #e9e3ec}
header.assessment-header{align-items:center!important}
header.assessment-header .app-nav{
  display:flex!important;align-items:center!important;flex-wrap:nowrap!important;
  gap:clamp(2px,.5vw,8px)!important}
header.app-header .app-nav a,
header.assessment-header .app-nav a,
header.sodacity-bar .app-nav a{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:7px!important;white-space:nowrap!important;flex:0 0 auto!important;
  height:clamp(36px,3.4vw,46px)!important;
  padding:0 clamp(11px,1.3vw,19px)!important;
  font:600 clamp(12.5px,1.1vw,16px)/1 'DM Sans',sans-serif!important;
  border-radius:9px!important;text-decoration:none!important;
  background:transparent;color:#72677a}
header .app-nav a.active{background:#402c68;color:#fff}
header .app-nav a:hover{background:#f0eafa;color:#402c68}
header .app-nav a.active:hover{background:#33215a;color:#fff}
/* A digit in a pill is not centred by padding: the line box and the glyph's own bearings put
   it slightly high and left. A fixed circle with grid centring puts it dead centre at any count. */
header .app-nav a b{
  flex:none;display:inline-grid;place-items:center;box-sizing:border-box;
  min-width:clamp(17px,1.5vw,21px);height:clamp(17px,1.5vw,21px);padding:0 5px;
  border-radius:999px;background:#ed7662;color:#fff;line-height:1;
  font:700 clamp(9.5px,.85vw,11.5px)/1 'DM Sans',sans-serif;
  font-variant-numeric:tabular-nums}
/* the trailing utility link — "Check-ins", "Save & exit" — reads as a button too */
header.assessment-header .hdr-util{
  margin-left:auto;display:inline-flex;align-items:center;white-space:nowrap;
  height:clamp(36px,3.4vw,46px);padding:0 clamp(12px,1.3vw,18px);
  border:1px solid #e2d8ea;border-radius:9px;background:#fff;
  font:600 clamp(12.5px,1.05vw,14.5px) 'DM Sans',sans-serif;
  color:#4b3a58;text-decoration:none}
header.assessment-header .hdr-util:hover{border-color:#c9b6e8;background:#faf6fe;color:#402c68}
@media(max-width:700px){
  header.app-header .app-nav a,
  header.assessment-header .app-nav a{height:38px!important;padding:0 10px!important;font-size:12.5px!important}
  header.assessment-header .hdr-util{height:38px;padding:0 11px;font-size:12px}
}

/* --- phone: the nav becomes a bottom tab bar --------------------------------
   Five tabs plus a wordmark plus an avatar cannot fit 390px, and the old answer
   was display:none — which left a phone with no way between Discover, Matches
   and Messages except the account menu. (The rules above set display:flex with
   !important, so that old hide had stopped working anyway and the header was
   overflowing sideways instead.) Below 760px the same markup is pinned to the
   bottom of the screen, which is where a phone app keeps its tabs. */
@media(max-width:760px){
  header.app-header .app-nav,
  header.assessment-header .app-nav,
  header.sodacity-bar .sodacity-nav{
    /* top:auto matters: with only bottom set, the nav's static position inside the header
       still resolves as a top edge and the bar stretches the whole screen height. */
    position:fixed!important;inset:auto 0 0 0!important;height:auto!important;z-index:70;
    display:flex!important;justify-content:space-around!important;gap:0!important;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:#fffdfbf2;backdrop-filter:blur(9px);
    border-top:1px solid #ece4f2;box-shadow:0 -6px 20px rgba(57,35,77,.07)}
  header.app-header .app-nav a,
  header.assessment-header .app-nav a,
  header.sodacity-bar .sodacity-nav a{
    flex:1 1 0!important;min-width:0!important;
    height:44px!important;padding:0 4px!important;
    font-size:11.5px!important;font-weight:700!important;
    border-radius:8px!important;overflow:hidden;text-overflow:ellipsis}
  header.app-header .app-nav a b,
  header.sodacity-bar .sodacity-nav a b{
    position:absolute;transform:translate(14px,-11px);padding:1px 5px}
  header.app-header .app-nav a,
  header.sodacity-bar .sodacity-nav a{position:relative}
  body{padding-bottom:64px}
  /* The edit chrome sits above the tab bar. Its own height is handled by editor.js, which
     measures the dock; only the tab-bar clearance belongs here. */
  body:has(header .app-nav) #cms-dock{bottom:58px}
}
@media(max-width:560px){
  header.assessment-header .app-nav{display:flex!important}   /* the bottom bar, not hidden */
}

/* --- phone: the header itself has to fit ------------------------------------
   The logo is 84px tall (doubled on purpose so it reads on the landing page),
   which makes the brand block 282-352px wide — most of a 390px phone before the
   trailing button is even placed. Shrink the mark and the wordmark here only.
   script.js / menu.js / profile.js each inject height:84px!important, so this
   has to be !important too, and later in the cascade than any of them. */
@media(max-width:620px){
  header.app-header .brand-mark,header.assessment-header .brand-mark,
  header.sodacity-bar .brand-mark,header.site-header .brand-mark{
    height:40px!important;margin-right:7px!important}
  header.app-header .brand,header.assessment-header .brand,
  header.sodacity-bar .brand,header.site-header .brand{
    font-size:19px!important;letter-spacing:-.6px!important;gap:0!important}
  header.app-header,header.assessment-header{padding-left:14px!important;padding-right:14px!important;
    gap:8px!important}
  header.sodacity-bar{padding-left:14px!important;padding-right:14px!important}
  header.assessment-header .hdr-util{height:34px;padding:0 11px;font-size:11.5px}
  header.app-header>.user-avatar,header.app-header .account-menu-button,
  header.sodacity-bar>.profile-avatar{width:40px!important;height:40px!important;font-size:19px!important}
}

/* Standalone links on a phone want a finger-sized target, not a 14px text box.
   Inline links inside a sentence are left alone — padding them would break the line. */
@media(max-width:620px){
  footer div{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px}
  footer div a{display:inline-flex;align-items:center;min-height:40px;padding:0 10px}
  .watch-link{display:inline-flex;align-items:center;min-height:42px}
}

/* --- footer ----------------------------------------------------------------
   The footer is one flex row (brand · copyright · legal links) and editor.js
   appends a fourth item to it. Wrap is on so that item drops to its own line
   instead of competing for width, and the wordmark is nowrap so "Soda City
   Match" can never break across two lines. */
footer{flex-wrap:wrap;gap:14px 24px;min-height:0;padding:22px 28px}
/* script.js injects `.brand-mark{height:84px!important}` unscoped, and !important beats
   specificity — so the footer's smaller mark has to be !important too. */
footer .brand{flex:0 0 auto;white-space:nowrap;font-size:25px!important;letter-spacing:-1px!important}
footer .brand-mark{height:52px!important;margin-right:8px!important}
footer p{flex:1 1 auto;min-width:0}
footer>div{flex:0 0 auto}
footer #cms-open{flex:0 0 auto;margin:0}
@media(max-width:620px){
  footer{justify-content:center;text-align:center}
  footer .brand{width:100%;justify-content:center}
  footer p{flex:1 0 100%}
  footer #cms-open{flex:1 0 100%;justify-content:center}
}

/* The landing nav sat at the body's 400 while every other nav in the app is 600+,
   so it read as body copy rather than navigation. 700 is loaded for DM Sans, so
   this is the real face and not a synthesised bold. */
header.site-header nav a{font-weight:700;letter-spacing:-.1px}
header.site-header nav a:hover{color:var(--plum)}

/* --- the credo -------------------------------------------------------------
   Deliberately the quietest section on the page: no card, no illustration, no
   button. It is the one place the site states a belief rather than a feature,
   and the surrounding sections are busy enough that stillness is what makes it
   read. The one pulled-out line is set in the display face at the same size as
   a section heading, because it is one. */
.credo-section{max-width:var(--page);margin:auto;padding:96px 28px 40px;text-align:center}
.credo-section .eyebrow{text-align:center}
.credo-section h2{margin:0 auto;font:600 clamp(34px,4.4vw,52px)/1.04 'Fraunces',Georgia,serif;
  letter-spacing:-1.6px;color:var(--ink);text-wrap:balance}
.credo-section h2 em{font-style:italic;color:var(--coral)}
.credo-lede{max-width:60ch;margin:22px auto 0;font-size:16.5px;line-height:1.66;color:var(--muted)}
.credo-lede em{font-style:italic;color:var(--ink)}
.credo-line{max-width:26ch;margin:34px auto;padding:26px 0;
  border-top:1px solid #e8dff0;border-bottom:1px solid #e8dff0;
  font:600 clamp(22px,2.6vw,30px)/1.28 'Fraunces',Georgia,serif;color:var(--plum);
  text-wrap:balance}
@media(max-width:620px){.credo-section{padding:64px 20px 28px}}