[hidden]{display:none!important}
:root{
  --paper:#F4EDE1; --card:#FCF8F1; --ink:#2A211B; --ink-2:#6B5B4E; --rule:#E2D6C4;
  --accent:#C42C5E; --accent-ink:#FFFFFF; --mustard:#D99A1B; --plinth:#3A2E26; --plinth-ink:#F4EDE1;
  --tab:#E9B94A; --tab-ink:#2A211B; --glow:rgba(196,44,94,.10);
  --display:"DM Serif Display", "New York", "Iowan Old Style", Georgia, serif;
  --body:"Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#15110E; --card:#231D18; --ink:#F1E7D8; --ink-2:#B9A794; --rule:#3A3029;
    --accent:#FF597D; --accent-ink:#1A0D10; --mustard:#F2BD4B; --plinth:#2D241E; --plinth-ink:#F1E7D8;
    --tab:#F2BD4B; --tab-ink:#1D1610; --glow:rgba(255,89,125,.12);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#15110E; --card:#231D18; --ink:#F1E7D8; --ink-2:#B9A794; --rule:#3A3029;
  --accent:#FF597D; --accent-ink:#1A0D10; --mustard:#F2BD4B; --plinth:#2D241E; --plinth-ink:#F1E7D8;
  --tab:#F2BD4B; --tab-ink:#1D1610; --glow:rgba(255,89,125,.12);
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;padding-inline:20px}
.wrap{max-width:var(--wrap);margin-inline:auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* Labels: the app sets its small print in a tracked mono */
.label{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}

/* Top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-mark{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--accent) 0 22%,#111 23% 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.brand b{font-family:var(--display);font-weight:400;font-size:26px;line-height:1}
.nav{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.nav a{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:8px 12px;border-radius:999px}
.nav a:hover{background:var(--card)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;align-items:center;padding-block:28px 64px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(46px,7.2vw,92px);line-height:.98;letter-spacing:-.01em;margin:14px 0 22px;text-wrap:balance}
.hero h1 em{color:var(--accent);font-style:italic}
.hero p.lede{font-size:20px;max-width:34ch;color:var(--ink-2);margin:0 0 28px}
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--card);border:1px solid var(--rule);font-weight:600;font-size:15px}
.pill.solid{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.8}
.hero-art{position:relative;padding-bottom:30px}
.hero-art .pad{width:86%;margin-left:auto}
.hero-art .phone{position:absolute;left:0;bottom:0;width:34%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.28))}
.hero-art .pad{filter:drop-shadow(0 30px 50px rgba(0,0,0,.18))}

/* The crate: sections are divider cards with a tab */
.divider{position:relative;margin-top:56px;background:var(--card);border-radius:4px 22px 22px 22px;padding:48px clamp(20px,4vw,56px) 56px;box-shadow:0 1px 0 var(--rule),0 18px 40px -28px rgba(0,0,0,.35)}
.divider::before{content:attr(data-tab);position:absolute;top:-30px;left:0;height:30px;padding:0 22px;display:flex;align-items:center;background:var(--tab);color:var(--tab-ink);font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;border-radius:12px 12px 0 0}
.divider.alt::before{left:auto;right:28%}
.divider.far::before{left:auto;right:0}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.row.flip > .copy{order:2}
h2{font-family:var(--display);font-weight:400;font-size:clamp(36px,4.6vw,58px);line-height:1.02;margin:10px 0 18px;text-wrap:balance}
.copy p{max-width:52ch;margin:0 0 14px;color:var(--ink)}
.copy p.soft{color:var(--ink-2)}
.facts{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;max-width:52ch}
.facts li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline}
.facts li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);transform:translateY(-1px)}
.devices{display:flex;align-items:flex-end;gap:18px;justify-content:center}
.devices .pad{flex:0 1 72%;min-width:0}
.devices .phone{flex:0 1 26%;min-width:0}
.devices.two-phones .phone{flex:0 1 44%}
.devices.solo .pad{flex:0 1 92%}

/* Clerk request card */
.ask{margin-top:24px;background:var(--paper);border:1px solid var(--rule);border-radius:18px;padding:18px}
.ask .field{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;padding:12px 18px;font-size:17px}
.ask .caret{width:2px;height:20px;background:var(--accent);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{padding:7px 13px;border-radius:999px;background:var(--glow);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);font-size:15px}
.chip b{font-weight:600}
.ask small{display:block;margin-top:12px;color:var(--ink-2);font-size:14px}

/* Stat strip, real figures from the library in the shots */
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 8px;max-width:52ch}
.num{border-top:2px solid var(--ink);padding-top:10px}
.num b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.num span{font-size:14px;color:var(--ink-2)}

/* Looks: a rack of sleeves */
.looks-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.rack{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px;margin-top:32px}
.rack figure{margin:0;display:grid;gap:10px;justify-items:center}
.rack figcaption{text-align:center;font-size:14px;line-height:1.35}
.rack figcaption b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.rack figcaption span{color:var(--ink-2)}

/* Two ways in */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.svc{background:var(--paper);border-radius:16px;padding:22px}
.svc h3{font-family:var(--display);font-weight:400;font-size:26px;margin:6px 0 8px;line-height:1.1}
.svc p{margin:0;color:var(--ink-2);font-size:16px}

footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:56px 40px;color:var(--ink-2);font-size:14px}
footer b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--ink)}


/* Back Room deck: the looks stand in a crate like divider cards */
.br-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.br-how{margin:0 0 18px;max-width:44ch;color:var(--ink-2)}
.deck-wrap{margin-top:28px}
.deck-controls{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-bottom:10px}
.seg{display:inline-flex;align-items:center;gap:4px;background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:4px}
.seg-label{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:0 8px 0 10px}
.seg button,.flip button{font:600 15px/1 var(--body);color:var(--ink);background:transparent;border:0;border-radius:999px;padding:9px 14px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.flip{display:inline-flex;align-items:center;gap:6px}
.flip button{background:var(--paper);border:1px solid var(--rule)}
.flip button:hover,.seg button:hover{filter:brightness(.97)}
.count{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink-2);min-width:7ch;text-align:center;font-variant-numeric:tabular-nums}
.deck{position:relative;perspective:1600px;perspective-origin:50% 0%;outline:none;padding-top:120px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.deck:focus-visible{outline:3px solid var(--accent);outline-offset:6px;border-radius:12px}
.deck-sizer{visibility:hidden;display:block;width:100%;height:auto}
.card{position:absolute;left:0;right:0;bottom:0;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease,filter .45s ease;will-change:transform}
.card img.shot{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 30px rgba(0,0,0,.22));cursor:pointer}
.card .tab{position:absolute;top:-34px;height:34px;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:12px 12px 0 0;background:var(--tabbg);color:var(--tabink);font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border:0;cursor:pointer;white-space:nowrap;box-shadow:0 -1px 0 rgba(0,0,0,.06) inset}
.card .tab i{width:9px;height:9px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
.card.past{pointer-events:none}
.deck-caption{display:flex;gap:10px 14px;align-items:baseline;flex-wrap:wrap;justify-content:center;margin-top:18px;text-align:center}
.deck-caption b{font-family:var(--display);font-weight:400;font-size:28px}
.deck-caption span{color:var(--ink-2)}
@media (max-width:900px){.br-head{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){
  .deck{padding-top:78px}
  .card .tab{top:-26px;height:26px;padding:0 9px;font-size:0;gap:0}
  .card .tab i{width:10px;height:10px}
  .card.front .tab{font-size:10px;gap:6px}
}
@media (prefers-reduced-motion:reduce){.card{transition:none}}

@media (max-width:900px){
  .hero,.row{grid-template-columns:minmax(0,1fr)}
  .row.flip > .copy{order:0}
  .rack{grid-template-columns:repeat(4,minmax(0,1fr))}
  .services{grid-template-columns:minmax(0,1fr)}
  .nav{display:none}
  .divider.alt::before,.divider.far::before{right:auto;left:0}
}
@media (max-width:520px){
  body{font-size:16px;padding-inline:16px}
  .rack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .divider{padding-inline:18px}
  .hero p.lede{font-size:18px}
  .nums{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.ask .caret{animation:none}}

/* Screens that have a dark version swap with the reader's appearance */
picture{display:contents}

/* Hero reel */
.reel{margin:0 0 8px;display:grid;gap:14px;justify-items:center}
.reel video{width:100%;max-width:1100px;height:auto;display:block}
.reel figcaption{font-size:15px;color:var(--ink-2);text-align:center;max-width:60ch}

/* Discord */
.discord{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600}
.discord svg{width:20px;height:20px;flex:none}
.nav a.discord{background:#5865F2;color:#fff;letter-spacing:.06em}
.nav a.discord:hover{background:#4752C4}
.pill.discord{background:#5865F2;color:#fff;border-color:transparent}
.soon{opacity:.75}

/* Footer links */
.foot-links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.foot-links a{color:var(--ink);text-decoration:none;font-weight:600}
.foot-links a:hover{color:var(--accent)}

/* Plain pages: privacy and support */
.doc{max-width:720px;margin:0 auto;padding-block:8px 24px}
.doc h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,64px);line-height:1;margin:10px 0 14px;text-wrap:balance}
.doc h2{font-size:clamp(26px,3.2vw,34px);margin:40px 0 10px}
.doc h3{font-size:18px;margin:26px 0 6px;font-family:var(--body);font-weight:700}
.doc p,.doc li{max-width:65ch}
.doc ul{padding-left:20px;display:grid;gap:8px}
.doc .lede{font-size:19px;color:var(--ink-2)}
.doc .updated{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.doc table{width:100%;border-collapse:collapse;font-size:15px;margin-top:10px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px;border-top:1px solid var(--rule)}
.doc th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.table-wrap{overflow-x:auto}
.card-box{background:var(--card);border-radius:18px;padding:22px 24px;margin-top:18px}
.faq details{border-top:1px solid var(--rule);padding:14px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:17px}
.faq details p{margin:10px 0 0;color:var(--ink)}
.copy-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.copy-row code{font-family:var(--mono);font-size:15px;background:var(--paper);padding:8px 12px;border-radius:10px;border:1px solid var(--rule)}
.copy-row button{font:600 15px/1 var(--body);background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:10px 16px;cursor:pointer}

/* Three phones side by side (Liner Notes) */
.devices.three-phones .phone{flex:0 1 31%}
.deck-controls > .seg-label{padding:0}