/* On Me Beats Ent — brand stylesheet. ink #141210 · paper #f4efe6 · copper #d85a2a */
:root{--ink:#141210;--ink2:#1c1916;--ink3:#26221e;--paper:#f4efe6;--paper2:#fffaf2;--copper:#d85a2a;--copper-d:#b8481d;--muted:#a59c90;--muted-ink:#5a524a;--line:rgba(244,239,230,.14);
--serif:"Playfair Display",Georgia,"Times New Roman",serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--max:1200px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img{max-width:100%}
a{color:var(--copper)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
@media (min-width:768px){.wrap{padding:0 32px}}
:focus-visible{outline:3px solid var(--copper);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:200;background:var(--paper);color:var(--ink);padding:10px 14px}

/* ON ME mark */
.mark{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--paper);line-height:1;min-height:44px;justify-content:center}
.mark .mk-on{font-family:var(--serif);font-weight:800;font-size:26px;letter-spacing:1px;white-space:nowrap}
.mark .mk-bar{display:block;width:22px;height:3px;background:var(--copper);margin:5px 0 4px}
.mark .mk-beats{font-family:var(--sans);font-weight:600;font-size:8.5px;letter-spacing:4px;padding-left:4px}
.mark.lg .mk-on{font-size:64px;letter-spacing:2px}.mark.lg .mk-bar{width:48px;height:5px;margin:12px 0 10px}.mark.lg .mk-beats{font-size:13px;letter-spacing:8px;padding-left:8px}
.mark.ink{color:var(--ink)}

/* Header / nav */
.site-head{position:sticky;top:0;z-index:50;background:rgba(20,18,16,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}
.site-nav{display:flex;align-items:center;gap:2px}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--paper);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.3px}
.site-nav a:hover{color:var(--copper)}
.site-nav a.cta{background:var(--copper);color:#fff;border-radius:999px;padding:0 16px;margin-left:6px}
.site-nav a.cta:hover{background:var(--copper-d);color:#fff}
.site-nav .d-only{display:none}
@media (min-width:860px){.site-nav{gap:6px}.site-nav a{font-size:15px;padding:0 12px}.site-nav .d-only{display:inline-flex}}
@media (max-width:420px){.site-nav a{padding:0 7px;font-size:13.5px}.site-nav a.cta{padding:0 12px;margin-left:2px}.mark .mk-on{font-size:22px}}
@media (max-width:359px){.site-nav a.m-hide{display:none}}

/* Section heads (Pipeline model) */
section{padding:64px 0}
@media (min-width:1000px){section{padding:88px 0}}
.kicker{display:block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--copper);margin:0 0 10px}
.sh{text-align:center;margin:0 auto 36px;max-width:680px}
.sh h2,.h2{font-family:var(--serif);font-weight:700;font-size:36px;line-height:1.08;letter-spacing:.5px;margin:0;color:inherit}
@media (min-width:768px){.sh h2,.h2{font-size:46px}}
.rule{display:block;width:56px;height:3px;background:var(--copper);border:0;margin:18px auto 0}
.sh p{color:var(--muted);margin:16px 0 0;text-wrap:balance}
.paper{background:var(--paper);color:var(--ink)}
.paper .sh p{color:var(--muted-ink)}

/* Buttons */
.btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:12px 22px;border:2px solid var(--copper);border-radius:10px;background:var(--copper);color:#fff;font-weight:700;font-size:16px;text-decoration:none;text-align:center;letter-spacing:.2px;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--copper-d);border-color:var(--copper-d);color:#fff}
.btn.alt{background:transparent;color:var(--paper);border-color:rgba(244,239,230,.4)}
.btn.alt:hover{border-color:var(--paper);background:rgba(244,239,230,.06)}
.paper .btn.alt{color:var(--ink);border-color:var(--ink)}
.paper .btn.alt:hover{background:var(--ink);color:var(--paper)}

/* Footer */
.site-foot{border-top:1px solid var(--line);padding:56px 0 28px;background:#100e0c}
.foot-grid{display:grid;gap:32px}
@media (min-width:768px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.foot-brand p{color:var(--muted);margin:14px 0 0;max-width:320px;font-size:15px}
.site-foot h4{font-family:var(--sans);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--copper);margin:0 0 8px}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li a{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);text-decoration:none;font-size:15px}
.site-foot li a:hover{color:var(--copper)}
.foot-base{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;border-top:1px solid var(--line);margin-top:36px;padding-top:20px;color:var(--muted);font-size:13px}
.foot-base a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot-base a:hover{color:var(--paper)}
.foot-base .fb-links{display:flex;gap:18px}
.foot-base .fb-copy{display:flex;align-items:center;min-height:44px}

/* Legal / document pages */
.doc{padding:56px 0 80px}
.doc .card{background:var(--paper);color:var(--ink);border-radius:14px;padding:36px 22px;max-width:820px;margin:0 auto}
@media (min-width:768px){.doc .card{padding:56px 64px}}
.doc h1{font-family:var(--serif);font-size:40px;line-height:1.1;margin:0 0 6px}
.doc .updated{color:var(--muted-ink);font-size:14px;margin:0}
.doc h2{font-family:var(--serif);font-size:24px;margin:34px 0 8px}
.doc p,.doc li{font-size:16px;line-height:1.65}
.doc ul{padding-left:20px}
.doc li{margin:0 0 6px}
.doc a{color:var(--copper-d);font-weight:600}
.doc .rule{margin:18px 0 8px}
h1,h2,h3,h4,.price{font-variant-numeric:lining-nums}
@media (min-width:860px){.site-head .mark .mk-on{font-size:30px}.site-head .mark .mk-bar{width:26px}.site-head .mark .mk-beats{font-size:9.5px}}