/* Twinly site. Coral is always "you", lavender is always "your Twinly". */
:root{
  --paper:#F1ECFF;--paper-2:#E6DEFF;--ink:#1D1340;--ink-2:#4B4170;--white:#fff;
  --you:#FF8F5E;--you-soft:#FFE2D3;--twin:#9B82FF;--twin-ink:#6C4FE6;--twin-soft:#E3DAFF;
  --display:"Bricolage Grotesque","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,40px);--max:1160px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--white);padding:10px 14px;border-radius:10px;z-index:10}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:760px}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;letter-spacing:-.02em}
h2{font-size:clamp(32px,4.6vw,56px);line-height:1.02;font-weight:800;max-width:16ch}
h3{font-size:21px;line-height:1.2;font-weight:700}
.section-lede{max-width:58ch;color:var(--ink-2);font-size:clamp(17px,1.6vw,19px);margin:18px 0 0}

/* Header */
.bar{max-width:var(--max);margin:0 auto;padding:18px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 22px/1 var(--display);letter-spacing:-.02em}
.mark{width:34px;height:34px;flex:none}
.bar nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);font-weight:500}
.bar nav a{text-decoration:none}
.bar nav a:not(.pill):hover{text-decoration:underline;text-underline-offset:4px}
.pill{background:var(--ink);color:var(--white)!important;padding:9px 16px;border-radius:999px;font-weight:600;white-space:nowrap}
@media (max-width:640px){.bar nav a:not(.pill){display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;border-radius:999px;font:600 17px/1 var(--body);text-decoration:none;transition:transform .15s ease}
.btn svg{width:20px;height:20px}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--ink);color:var(--white)}
.btn.primary:hover{background:#2c1f5c}
.btn.ghost{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ghost:hover{background:var(--twin-soft)}

/* Hero */
.hero{max-width:var(--max);margin:0 auto;padding:clamp(16px,3.5vw,40px) var(--gutter) clamp(56px,8vw,112px);display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(46px,7.4vw,96px);line-height:.94;font-weight:800;letter-spacing:-.035em;max-width:10ch}
.lede{font-size:clamp(18px,1.8vw,21px);color:var(--ink-2);max-width:40ch;margin:24px 0 0}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.fine{margin:14px 0 0;font-size:14px;color:var(--ink-2)}
.stage{position:relative;display:grid;justify-items:center}
.split{position:relative;margin:0;width:min(330px,72vw);aspect-ratio:600/660}
.disc{position:absolute;inset:8% 3% 0;border-radius:999px 999px 28px 28px;background:linear-gradient(90deg,var(--you) 0 calc(50% - 3px),var(--white) calc(50% - 3px) calc(50% + 3px),var(--twin) calc(50% + 3px))}
.split img{position:relative;width:100%}
.split figcaption{position:absolute;inset:auto 0 -14px;display:flex;justify-content:space-between;pointer-events:none}
.tag{font:700 14px/1 var(--body);padding:9px 13px;border-radius:999px;background:var(--white);box-shadow:0 6px 18px rgba(29,19,64,.14)}
.tag.you{color:#B9471A}.tag.twin{color:#5B3FD6}
.chat{list-style:none;margin:30px 0 0;padding:0;width:min(420px,100%);display:grid;gap:8px}
.msg{display:flex;align-items:flex-end;gap:8px;animation:pop .45s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:var(--d)}
.msg img{width:30px;height:33px;flex:none}
.msg p{margin:0;padding:10px 14px;border-radius:20px;font-size:16px;line-height:1.4;max-width:30ch}
.msg b{display:block;font-size:12px;font-weight:600;opacity:.7;margin-bottom:2px}
.msg.friend p{background:var(--white);border-bottom-left-radius:6px}
.msg.twin{justify-content:flex-end}
.msg.twin p{background:var(--twin-ink);color:var(--white);border-bottom-right-radius:6px}
.msg.twin b{opacity:.85}
.chat.wait .msg{animation-play-state:paused}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media (max-width:880px){.hero{grid-template-columns:1fr}.hero h1{max-width:12ch}}

/* Learn */
.learn{background:var(--white);padding:clamp(64px,9vw,120px) 0;border-radius:40px 40px 0 0}
.pairs{display:grid;align-items:start;grid-template-columns:1fr 1.25fr;gap:clamp(16px,3vw,32px);margin-top:48px}
.col{border-radius:28px;padding:28px clamp(18px,3vw,32px);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.col h3{margin-bottom:8px}
.col.you{background:var(--you-soft)}
.col.twin{background:var(--twin-soft)}
.bubble{margin:0;padding:10px 15px;border-radius:20px;max-width:32ch;line-height:1.4}
.col.you .bubble{background:var(--you);color:var(--ink);border-bottom-left-radius:6px}
.col.twin .bubble{background:var(--twin-ink);color:var(--white);align-self:flex-end;border-bottom-right-radius:6px}
.col.twin .bubble.ask{background:var(--white);color:var(--ink);align-self:flex-start;border-radius:20px;border-bottom-left-radius:6px}
@media (max-width:760px){.pairs{grid-template-columns:1fr}}

/* How */
.how{background:var(--white);padding:0 0 clamp(64px,9vw,120px)}
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);counter-reset:s}
.steps li{counter-increment:s;border-top:3px solid var(--ink);padding-top:20px}
.steps li::before{content:counter(s);display:block;font:800 56px/1 var(--display);color:var(--twin-ink);margin-bottom:14px}
.steps p{color:var(--ink-2);margin:10px 0 0}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* Crowd */
.crowd{padding:clamp(64px,9vw,120px) 0 0;overflow:hidden}
.faces{list-style:none;margin:48px 0 0;padding:0 var(--gutter);display:flex;justify-content:center;gap:0}
.faces li{width:clamp(96px,13vw,170px);margin:0 clamp(-14px,-1.2vw,-6px);flex:none}
.faces li:nth-child(odd){transform:translateY(18px)}
.faces img{width:100%}
@media (max-width:640px){.faces li:nth-child(n+6){display:none}}

/* Privacy */
.privacy{background:var(--ink);color:var(--white);padding:clamp(64px,9vw,120px) 0}
.privacy h2{color:var(--white)}
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,48px) clamp(24px,5vw,72px);margin:48px 0 0}
.rules dt{font:700 22px/1.2 var(--display);letter-spacing:-.01em}
.rules dt::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg,var(--you) 50%,var(--twin) 50%);margin-right:12px;vertical-align:2px}
.rules dd{margin:10px 0 0;color:#CFC6EE;max-width:44ch}
@media (max-width:760px){.rules{grid-template-columns:1fr}}

/* FAQ */
.faq{padding:clamp(64px,9vw,120px) 0}
.faq h2{margin-bottom:32px}
details{border-bottom:2px solid var(--paper-2)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font:700 clamp(19px,2vw,22px)/1.3 var(--display);letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%231D1340' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .2s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 22px;color:var(--ink-2);max-width:62ch}

/* Last */
.last{text-align:center;padding:0 0 clamp(64px,9vw,120px)}
.split.mini{width:150px;margin:0 auto 24px}
.last h2{margin:0 auto 28px;max-width:14ch}

/* Footer */
.foot{border-top:2px solid var(--paper-2);padding:28px 0 40px;font-size:15px;color:var(--ink-2)}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.foot .brand{font-size:19px;color:var(--ink)}.foot .mark{width:28px;height:28px}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot p{margin:0}

/* Text pages (privacy, terms, support) */
.doc{max-width:720px;margin:0 auto;padding:clamp(24px,5vw,56px) var(--gutter) 80px}
.doc h1{font-size:clamp(38px,6vw,64px);line-height:1;font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.doc h2{font-size:24px;line-height:1.2;max-width:none;margin:36px 0 8px;font-weight:700}
.doc p,.doc li{color:var(--ink-2)}
.doc a{color:#5B3FD6}
.doc .updated{font-size:14px;margin-top:0}
.doc form{display:grid;gap:12px;margin-top:16px}
.doc select,.doc textarea,.doc input{width:100%;background:var(--white);color:var(--ink);border:2px solid var(--paper-2);border-radius:16px;padding:13px 14px;font:inherit}
.doc select:focus,.doc textarea:focus,.doc input:focus{border-color:var(--twin);outline:none}
.doc textarea{min-height:150px;resize:vertical}
.doc button.btn{border:0;cursor:pointer;justify-self:start}
.doc .done{display:none;background:var(--twin-soft);padding:14px 16px;border-radius:16px;color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}