/* Shared styles for the Bittings feature pages (index.html and legal.html keep their own inline CSS). */
:root{ --red:#b3242f; --red2:#8f1c26; --redtext:#e5484d;
  --bg:#191c22; --bg2:#1f232b; --card:#232830; --edge:rgba(255,255,255,.10); --ink:#f3f4f6; --dim:#a3abb6; --faint:#8a929e; --phone:#12151b; }
html[data-theme="light"]{ --bg:#f5f6f8; --bg2:#ffffff; --card:#ffffff; --edge:rgba(20,23,27,.12); --ink:#14171b; --dim:#4b5563; --faint:#5b6472; --phone:#e9ecf1; --redtext:#b3242f; }
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 "Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit} img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
/* nav */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--edge)}
.nav .wrap{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:24px;letter-spacing:-.02em;text-decoration:none}
.brand i{font-style:normal;color:var(--redtext)}
.mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(180deg,#c92c38,var(--red2));display:grid;place-items:center;flex:0 0 26px}
.mark::before{content:"";width:8px;height:8px;border-radius:50%;background:#16181d;box-shadow:0 7px 0 -2px #16181d}
.links{display:flex;gap:30px;margin:0 auto;font-weight:700;color:var(--dim)}
.links a{text-decoration:none;padding:10px 2px;min-height:44px;display:inline-flex;align-items:center} .links a:hover{color:var(--ink)}
.navr{display:flex;align-items:center;gap:10px}
.ghost{background:none;border:0;color:var(--dim);font:inherit;font-weight:700;cursor:pointer;padding:10px 8px;min-height:44px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:11px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer;border:1px solid var(--edge);background:var(--bg2);color:var(--ink);white-space:nowrap}
.btn.red{background:linear-gradient(180deg,#c22a36,var(--red2));border-color:transparent;color:#fff}
.btn.big{min-height:60px;padding:14px 28px;font-size:19px;border-radius:13px}
/* page head */
.fhead{padding:64px 0 40px;background:radial-gradient(1200px 500px at 70% 0%,color-mix(in srgb,var(--bg2) 80%,transparent),transparent)}
.eyebrow{font:600 13px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--redtext);margin:0 0 20px}
h1{font-stretch:118%;font-weight:900;font-size:clamp(36px,5vw,64px);line-height:1.04;letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance}
h1 i,.dot{font-style:normal;color:var(--redtext)}
.lede{font-size:clamp(18px,1.7vw,23px);color:var(--dim);max-width:34em;margin:0}
/* sections */
section{padding:72px 0;border-top:1px solid var(--edge);scroll-margin-top:70px}
section.show{padding:24px 0 64px;border-top:0}
h2{font-stretch:115%;font-weight:900;font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.02em;margin:0 0 12px}
.sub{color:var(--dim);font-size:19px;max-width:40em;margin:0 0 32px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--edge);border-radius:16px;padding:22px}
.card .k{font:600 12px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--redtext);margin-bottom:12px}
.card h3{margin:0 0 8px;font-size:21px;font-weight:800;letter-spacing:-.01em}
.card p{margin:0;color:var(--dim);font-size:16px}
/* showcase */
.showcase{max-width:1100px;margin:0 auto}
.showcase figure{margin:0}
.showcase figcaption{margin-top:12px;color:var(--faint);font-size:15px;text-align:center}
.laptop{width:min(100%,1100px);margin:0 auto}
.laptop .scr{border:10px solid #0c0e12;border-bottom-width:12px;border-radius:14px 14px 0 0;background:#0c0e12;aspect-ratio:1440/900;overflow:hidden}
.laptop .base{height:14px;margin:0 -4%;border-radius:2px 2px 14px 14px;background:linear-gradient(180deg,#d3d7de,#8d949f);position:relative;box-shadow:0 18px 30px rgba(0,0,0,.3)}
.laptop .base::after{content:"";position:absolute;left:50%;top:0;width:16%;height:5px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#7b828d}
.tablet{border:9px solid #0c0e12;border-radius:18px;background:#0c0e12;aspect-ratio:1024/768;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.4)}
.dphone{border:5px solid #0c0e12;border-radius:22px;background:#0c0e12;aspect-ratio:390/844;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.45)}
.laptop img,.tablet img,.dphone img{width:100%;height:100%;object-fit:cover;object-position:top}
.pair{display:grid;grid-template-columns:62fr 26fr;gap:6%;justify-content:center;align-items:end;margin-top:56px}
.pair.solo{grid-template-columns:min(62%,680px);justify-content:center}
.regnote{max-width:40em;margin:24px auto 0;text-align:center;color:var(--dim)}
/* points */
.points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.points li{background:var(--card);border:1px solid var(--edge);border-left:3px solid var(--red);border-radius:14px;padding:16px 18px;color:var(--dim);font-size:16.5px}
.points b{display:block;color:var(--ink);font-size:18px;font-weight:800;margin-bottom:3px}
.note{color:var(--faint);font-size:15px;margin:18px 0 0;max-width:46em}
/* updates strip */
.strip{padding:36px 0;background:var(--bg2)}
.strip .wrap{display:flex;gap:10px 24px;align-items:baseline;flex-wrap:wrap}
.strip b{font-stretch:110%;font-weight:900;font-size:20px;white-space:nowrap}
.strip p{margin:0;color:var(--dim);flex:1 1 320px}
/* CTA */
.band{text-align:center}
.band h2{margin-bottom:22px}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* more links */
.more{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.more a{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:12px 16px;border-radius:14px;border:1px solid var(--edge);background:var(--card);text-decoration:none;font-weight:800}
.more a:hover{border-color:var(--red)}
.more small{font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--redtext);margin-bottom:6px}
/* footer */
footer{border-top:1px solid var(--edge);padding:30px 0 44px;color:var(--faint);font-size:15px}
footer .wrap{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}
.flinks{display:flex;flex-wrap:wrap;gap:6px 22px} .flinks a{padding:8px 0;display:inline-block;min-height:44px}
/* focus */
.btn:focus-visible,a:focus-visible,.ghost:focus-visible{outline:2px solid #f2b43a;outline-offset:2px}
@media (max-width:900px){
  .links{display:none} .fhead{padding:40px 0 28px} section{padding:52px 0} .wrap{padding:0 18px}
  .navr .btn.red{display:none} .navr{margin-left:auto;gap:4px}
  .nav .wrap{gap:8px} .brand{font-size:21px} .navr .ghost{font-size:15px;padding:10px 6px} .navr .btn{padding:8px 14px;min-height:44px}
}
@media (max-width:700px){
  .laptop .scr{border-width:5px;border-radius:8px 8px 0 0} .laptop .base{height:8px}
  .tablet{border-width:5px;border-radius:10px} .dphone{border-width:3px;border-radius:14px}
  .pair{grid-template-columns:1fr;gap:36px;margin-top:40px}
  .pair.solo{grid-template-columns:1fr}
  .pair figure.ph{max-width:300px;width:100%;margin:0 auto}
  .points{grid-template-columns:1fr}
  .cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }