/* byobuds.css — umbrella site for Duet + the group interpreter.
   Sibling of translate.gloomlab.com/duet.css: identical tokens & print devices,
   extended from a two-circle "duet" mark to a three-circle "bring your own buds" cluster. */

:root{
  --paper:#E9E4D6; --paper-2:#E2DCCC; --ink:#181410;
  --a:#FF4A1C;          /* FLARE — voice one */
  --b:#1F2BFF;          /* PULSE — voice two */
  --c:#2B7A4B;          /* GROVE — a third voice (groups) */
  --seam:#3A1846;       /* overprint */
  --muted:#6E6456; --line:rgba(24,20,16,.15); --blend:multiply; --grain-op:.30;
  --card:#F2EEE3;
  --font-disp:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#100D07;--paper-2:#17130C;--ink:#EFE7D6;--a:#FF5A2C;--b:#5A6BFF;--c:#4FBF82;
    --seam:#FF7AC4;--muted:#9A9082;--line:rgba(239,231,214,.16);--blend:screen;--grain-op:.22;--card:#1B1610;}
}
:root[data-theme="light"]{--paper:#E9E4D6;--paper-2:#E2DCCC;--ink:#181410;--a:#FF4A1C;--b:#1F2BFF;--c:#2B7A4B;
  --seam:#3A1846;--muted:#6E6456;--line:rgba(24,20,16,.15);--blend:multiply;--grain-op:.30;--card:#F2EEE3;}
:root[data-theme="dark"]{--paper:#100D07;--paper-2:#17130C;--ink:#EFE7D6;--a:#FF5A2C;--b:#5A6BFF;--c:#4FBF82;
  --seam:#FF7AC4;--muted:#9A9082;--line:rgba(239,231,214,.16);--blend:screen;--grain-op:.22;--card:#1B1610;}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.55;-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:var(--grain-op);mix-blend-mode:var(--blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
::selection{background:var(--a);color:#fff}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--b);outline-offset:3px}
.wrap{width:min(1180px,90vw);margin-inline:auto}
.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.15em;font-size:.7rem}

/* ============ THE CLUSTER GLYPH (3 overprinting buds) ============ */
.glyph{position:relative;width:26px;height:24px;flex:none}
.glyph i{position:absolute;width:15px;height:15px;border-radius:50%;mix-blend-mode:var(--blend)}
.glyph i:nth-child(1){left:0;top:0;background:var(--a)}
.glyph i:nth-child(2){right:0;top:1px;background:var(--b)}
.glyph i:nth-child(3){left:50%;transform:translateX(-50%);bottom:0;background:var(--c)}

/* ============ NAV ============ */
nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:13px min(5vw,26px);border-bottom:1.5px solid var(--ink);
  background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(7px)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-disp);font-weight:800;font-size:1.24rem;letter-spacing:-.02em}
.brand small{font-family:var(--font-mono);font-weight:400;font-size:.58rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;align-self:flex-end;margin-bottom:3px}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a.mono{color:var(--muted)}
.nav-links a.mono:hover{color:var(--ink)}
.btn{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:600;
  padding:12px 18px;min-height:44px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);
  cursor:pointer;transition:.18s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{background:var(--a);border-color:var(--a);color:#fff;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--b)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:transparent;color:var(--a);box-shadow:none;border-color:var(--a);transform:none}
.btn.big{padding:15px 24px;font-size:.78rem}
@media(max-width:760px){.nav-links a.mono{display:none}}

/* ============ HERO ============ */
header{position:relative;padding:clamp(40px,7vw,96px) 0 clamp(44px,6vw,80px);overflow:hidden}
.crop{position:absolute;width:14px;height:14px;pointer-events:none;opacity:.6}
.crop::before,.crop::after{content:"";position:absolute;background:var(--ink)}
.crop::before{width:100%;height:1.5px;top:50%}.crop::after{height:100%;width:1.5px;left:50%}
.crop.tl{top:18px;left:2.5vw}.crop.tr{top:18px;right:2.5vw}.crop.bl{bottom:18px;left:2.5vw}.crop.br{bottom:18px;right:2.5vw}

.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,68px);align-items:center}
.eyebrow{color:var(--muted);margin-bottom:20px;display:flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--a);flex:none}
h1{font-family:var(--font-disp);font-weight:800;letter-spacing:-.035em;line-height:.94;
  font-size:clamp(2.5rem,7.5vw,5.6rem);text-wrap:balance;max-width:13ch}
h1 .em{color:var(--a);font-style:italic}
h1 .em2{color:var(--b);font-style:italic}
.lede{max-width:44ch;font-size:clamp(1rem,1.4vw,1.16rem);color:var(--ink);margin-top:24px}
.lede strong{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--a) 40%,transparent) 0);padding:0 .08em}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* hero trust row — the three UX/privacy wins, stated plainly */
.props{list-style:none;display:flex;flex-wrap:wrap;gap:11px 24px;margin-top:30px}
.props li{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:var(--ink)}
.props .pk{width:8px;height:8px;flex:none;border-radius:50%;background:var(--a);mix-blend-mode:var(--blend)}
.props li:nth-child(2) .pk{background:var(--b)}
.props li:nth-child(3) .pk{background:var(--c)}

/* hero: two doors — Duet (for two) / Chorus (for groups) */
.doors{display:flex;flex-direction:column;gap:16px}
.door{position:relative;display:flex;align-items:center;gap:18px;
  border:1.5px solid var(--ink);background:var(--card);padding:22px 24px;transition:transform .18s}
.door::after{content:"";position:absolute;inset:6px -6px -6px 6px;border:1.5px solid var(--b);z-index:-1;opacity:.4;transition:inset .18s}
.door:hover{transform:translate(-3px,-3px)}
.door:hover::after{inset:8px -8px -8px 8px}
.door .dglyph{flex:none;width:30px;height:26px}
.door .dbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.door .dk{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.13em;font-size:.6rem;color:var(--muted)}
.door .dname{font-family:var(--font-disp);font-weight:800;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.03em;line-height:1;margin:1px 0 3px}
.door .dsub{font-size:.86rem;color:var(--muted);max-width:32ch;line-height:1.4}
.door .dgo{flex:none;align-self:center;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:.6rem;color:var(--a)}
.door .dgo.b{color:var(--b)}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:32px}h1{max-width:16ch}}
@media(max-width:420px){.door{gap:14px;padding:18px 18px}.door .dsub{display:none}}

/* ============ MARQUEE ============ */
.marq{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);overflow:hidden;padding:8px 0;background:var(--paper-2)}
.marq-track{display:flex;width:max-content;animation:scroll 72s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
.marq-track span{font-family:var(--font-mono);text-transform:uppercase;font-weight:500;font-size:clamp(.72rem,1.1vw,.9rem);letter-spacing:.08em;padding:0 clamp(13px,1.8vw,24px);white-space:nowrap;display:flex;align-items:center;gap:clamp(13px,1.8vw,24px);color:var(--muted)}
.marq-track span::before{content:"·";color:var(--a);font-size:1.1em}
.marq-track span:nth-child(even)::before{color:var(--b)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
section.blk{padding:clamp(70px,10vw,150px) 0;position:relative}
h2{font-family:var(--font-disp);font-weight:800;letter-spacing:-.03em;line-height:1;font-size:clamp(2rem,5.2vw,4rem);text-wrap:balance;max-width:18ch}
.sec-eye{color:var(--muted);margin-bottom:20px;display:flex;align-items:center;gap:11px}
.sec-eye::before{content:"";width:30px;height:2px;background:var(--a);flex:none}
.note{margin-top:26px;color:var(--muted);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em}

/* ============ THE TWO PRODUCTS ============ */
.rack{margin-top:clamp(42px,6vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,32px)}
@media(max-width:820px){.rack{grid-template-columns:1fr}}
.prod{position:relative;background:var(--card);border:1.5px solid var(--ink);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:18px;transition:.2s}
.prod::after{content:"";position:absolute;inset:7px -7px -7px 7px;border:1.5px solid var(--b);z-index:-1;opacity:.45;transition:.2s}
.prod:hover{transform:translate(-3px,-3px)}
.prod:hover::after{inset:9px -9px -9px 9px}
.prod .tophead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.prod .status{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-size:.62rem;padding:5px 9px;border:1.5px solid currentColor}
.prod .status.live{color:var(--a)}
.prod .status.soon{color:var(--b)}
.prod h3{font-family:var(--font-disp);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.03em;line-height:.95;display:flex;align-items:center;gap:12px}
.prod .who{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.13em;font-size:.66rem;color:var(--muted)}
.prod p{color:var(--ink);max-width:42ch}
.prod ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:2px}
.prod li{display:flex;gap:10px;align-items:baseline;font-size:.96rem;color:var(--ink)}
.prod li::before{content:"→";color:var(--a);font-weight:700;flex:none}
.prod .go{margin-top:auto;padding-top:6px}
.prod.feature{background:var(--ink);color:var(--paper)}
.prod.feature::after{border-color:var(--a);opacity:.6}
.prod.feature p,.prod.feature li{color:color-mix(in srgb,var(--paper) 88%,transparent)}
.prod.feature .who{color:color-mix(in srgb,var(--paper) 62%,transparent)}
.prod.feature li::before{color:var(--b)}
.prod.feature .btn.ghost{color:var(--paper);border-color:var(--paper)}
.prod.feature .btn.ghost:hover{color:var(--a);border-color:var(--a)}

/* ============ HOW (group ritual) ============ */
.steps{margin-top:clamp(44px,6vw,76px);border:1.5px solid var(--ink)}
.step{display:grid;grid-template-columns:clamp(72px,11vw,150px) 1fr;gap:clamp(18px,3vw,44px);padding:clamp(24px,3.4vw,44px);border-top:1.5px solid var(--ink);align-items:start;transition:background .2s}
.step:first-child{border-top:none}
.step:hover{background:color-mix(in srgb,var(--ink) 4%,var(--paper))}
.step .no{font-family:var(--font-disp);font-weight:800;font-size:clamp(2.6rem,7vw,5rem);line-height:.8;color:var(--b);position:relative}
.step .no::after{content:attr(data-n);position:absolute;left:2px;top:3px;color:var(--a);mix-blend-mode:var(--blend);z-index:-1}
.step h3{font-family:var(--font-disp);font-weight:800;font-size:clamp(1.25rem,2.6vw,1.85rem);letter-spacing:-.02em;margin-bottom:10px}
.step p{max-width:52ch;color:var(--ink)}
.step .tag{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.11em;font-size:.65rem;color:var(--muted);margin-top:13px;display:inline-block}
@media(max-width:560px){.step{grid-template-columns:1fr;gap:8px;padding:26px 22px}.step .no{font-size:3.2rem}}

/* ============ PLEDGE ============ */
.pledge{background:var(--paper-2);border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:clamp(56px,8vw,120px) 0}
.pledge .peye{color:var(--muted);margin-bottom:22px;display:flex;align-items:center;gap:11px}
.pledge .peye::before{content:"";width:30px;height:2px;background:var(--b);flex:none}
.pledge .big{font-family:var(--font-disp);font-weight:800;letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.5rem,3.6vw,2.7rem);max-width:20ch;text-wrap:balance}
.big .em{color:var(--a);font-style:italic}.big .em2{color:var(--b);font-style:italic}

/* ============ EARLY ACCESS ============ */
.signup{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(30px,4vw,48px);max-width:520px}
.signup input{flex:1;min-width:220px;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.02em;
  padding:14px 16px;min-height:48px;border:1.5px solid var(--ink);background:var(--card);color:var(--ink)}
.signup input:focus{outline:none;border-color:var(--b);box-shadow:2px 2px 0 var(--b)}
.signup input::placeholder{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}

/* ============ FOOTER ============ */
footer{border-top:1.5px solid var(--ink);padding:clamp(52px,7vw,92px) 0 38px}
.foot-top{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;align-items:flex-start}
.foot-meta{display:flex;flex-direction:column;gap:9px;color:var(--muted);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase}
.foot-meta a:hover{color:var(--a)}
.foot-rule{margin:clamp(38px,5vw,54px) 0 22px;height:1px;background:var(--line)}
.foot-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--muted);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase}
.private{display:inline-flex;align-items:center;gap:8px}
.private .k{width:7px;height:7px;background:var(--b);border-radius:1px;flex:none}

/* ============ REVEAL ============ */
.rev{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .rev{opacity:1;transform:none}.marq-track{animation:none}
}