/* Site one pass, October 2026. Loaded after site.css.
   Palette: white ground, cool gray panels, near-black ink, slate, hairline,
   terracotta the only accent, espresso only in the footer.
   Motion kept: the wheel signal orbit, headlines rising in once on load,
   the privacy card hover on hover devices. Everything is still under
   reduced motion. Squared corners throughout. No bold, no italics. */

:root{
  --cream:#FFFFFF; --cream-ink:#1B1D22; --cream-accent:#C45C3A;
  --gray:#F2F2F2; --gray-ink:#1B1D22; --gray-accent:#C45C3A;
  --ink-0:#1B1D22; --slate:#5A5D66; --hair:#E6E7EA; --tc:#C45C3A;
  --tc-text:#B05030; /* terracotta for small text: 5.2:1 on white, 4.65:1 on #F2F2F2 */
  --tc-text-dark:#D3814F; /* terracotta for small text on espresso: 5.2:1 */
  --hb:44px;
}
html,body{overflow-x:clip}
body{background:#fff;color:var(--ink-0)}
b,strong{font-weight:inherit}
em,i,cite{font-style:normal}

/* espresso stays in the footer only */
main .g-espresso,body.g-espresso{background:var(--gray);color:var(--ink-0);--ink:var(--ink-0);--ground:var(--gray);--accent:var(--tc)}
body.g-espresso{background:#fff}

/* motion cut: no scroll reveals, no typing, no tilt */
html.js .rv,.rv{opacity:1!important;transform:none!important;transition:none!important}

/* type scale: one giant moment per page, the rest set calm */
.h1{font-size:60px;line-height:1.04;letter-spacing:-.02em}
.h2{font-size:44px}
.giant{font-family:var(--head);font-weight:300;font-size:120px;line-height:.98;letter-spacing:-.03em}
.label{color:inherit}

/* ---------- header */
.op-top{background:#fff;color:var(--ink-0);--ink:var(--ink-0);--ground:#fff;border-bottom:1px solid var(--hair)}
.op-top .wrap{height:84px}
.op-top .logo img{height:46px;width:auto}
.op-top .logo .lg-short{display:none}
.op-top .nav{gap:32px}
.op-top .nav>ul{gap:30px}
.op-top .navlink{font-size:12px;letter-spacing:.16em}
.op-top .dd ul{background:#fff;border:1px solid var(--hair)}
.op-top .hbtns>*{border:0}
.hb-connect{display:inline-flex;align-items:center;height:var(--hb);padding:0 22px;background:var(--ink-0);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--ink-0)}
.hb-connect:hover{background:#fff;color:var(--ink-0)}
.op-top .hb-menu{display:none;margin-left:8px;width:var(--hb);height:var(--hb);border:1px solid var(--ink-0)}

/* menu and search panels: light */
.panel{background:#fff;color:var(--ink-0);--ink:var(--ink-0);--ground:#fff}
.panel .big a:hover{color:var(--tc)}
.panel .meta{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.panel button.link{background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer}

/* ---------- footer */
.op-foot .cols{grid-template-columns:4fr 2.5fr 2.5fr 2.5fr;gap:40px}
.op-foot .logo img{height:44px;width:auto}
.op-foot .f-brand p{margin-top:18px}
.op-foot .label{margin-bottom:14px;opacity:.72}
.op-foot .f-connect{color:var(--tc-text-dark)}
.op-foot .legal{display:flex;flex-wrap:wrap;gap:6px 20px}
.op-foot .social{display:inline-flex;gap:18px;margin-top:0}
.op-foot{font-size:15px;padding:80px 0 56px}
.op-foot li{padding:4px 0}
.op-foot .social a{font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none;border:0;padding:0;margin:0}
.op-foot .social a:hover{text-decoration:underline;text-underline-offset:5px}
.op-foot .wellness{max-width:none;font-size:14px;margin-top:64px}
.op-foot .legal{font-size:14px;align-items:baseline}

/* ---------- shared one-pass blocks */
.op-sec{padding:112px 0;background:#fff}
.op-sec+.op-sec{border-top:1px solid var(--hair)}
.op-num{color:var(--slate);margin-bottom:28px;display:flex;gap:18px}
.op-h1{font-family:var(--head);font-weight:300;font-size:60px;line-height:1.06;letter-spacing:-.02em;max-width:12.5em}
.op-h2{font-family:var(--head);font-weight:300;font-size:44px;line-height:1.08;letter-spacing:-.02em;margin-bottom:24px}
.op-h3{font-family:var(--head);font-weight:300;font-size:28px;line-height:1.2;letter-spacing:-.01em;margin:14px 0 14px}
.op-h4{font-family:var(--head);font-weight:400;font-size:21px;line-height:1.3;margin:12px 0 10px}
.op-sub{font-size:21px;line-height:1.5;color:var(--ink-0);margin-bottom:20px;max-width:640px}
.op-fine{font-size:15px;line-height:1.55;color:var(--slate)}
.op-ctas{display:flex;flex-wrap:wrap;gap:36px;align-items:center;margin-top:36px}
.op-white{background:#fff}
.op-gray{background:var(--gray)}

/* ---------- wheel */
.wheel{display:block;width:100%;height:auto;overflow:visible}
.w-ring-o{fill:none;stroke:#D9DBDF;stroke-width:1}
.w-ring{fill:none;stroke:#B4B7BE;stroke-width:1.1}
.w-node{fill:#fff;stroke:#8E929A;stroke-width:1.1}
.w-core{fill:#fff;stroke:#8E929A;stroke-width:1.1}
.w-lit{fill:var(--tc)}
.w-halo{fill:none;stroke:var(--tc);stroke-width:1;opacity:.55}
.w-next{fill:none;stroke:var(--tc);stroke-width:1;stroke-dasharray:2 2.4}
.w-next-in{fill:#fff;stroke:var(--tc);stroke-width:1.2}
.w-sig{fill:var(--tc);opacity:.85}
.w-orbit{transform-origin:100px 100px;transform-box:view-box;animation:w-orbit 60s linear infinite}
@keyframes w-orbit{to{transform:rotate(360deg)}}

/* ---------- headline rise, once on load */
[data-rise]{animation:op-rise .8s cubic-bezier(.2,.7,.2,1) both}
[data-rise]:nth-child(2){animation-delay:.08s}
[data-rise]:nth-child(3){animation-delay:.16s}
[data-rise]:nth-child(4){animation-delay:.24s}
@keyframes op-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- home hero C */
.op-hero{padding:96px 0 104px}
.op-hero-grid{display:grid;grid-template-columns:6.4fr 5.6fr;gap:64px;align-items:center}
.op-kicker{margin-bottom:28px;color:var(--ink-0)}
.op-hero .op-sub{margin-top:30px;font-size:19px;color:var(--slate)}
.op-ledger{margin-top:28px;border-top:1px solid var(--hair);max-width:560px}
.op-ledger>div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.op-ledger dt{font-size:12px}
.op-ledger dd{font-size:17px}
.op-wheel-panel{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:14%}

/* ---------- chapter rail: vertical at the left on wide screens */
.op-rail{background:#fff}
.rail ol{overscroll-behavior-x:contain}
@media (min-width:1360px){
  .op-rail{position:fixed;top:50%;left:24px;transform:translateY(-50%);width:120px;border:0;background:transparent!important;z-index:20}
  .op-rail .wrap{display:block;height:auto;padding:0 0 0 14px;border-left:1px solid var(--hair)}
  .op-rail ol{flex-direction:column;gap:2px;overflow:visible}
  .op-rail a{padding:4px 0;font-size:11px;color:var(--slate)}
  .op-rail a[aria-current="true"]{color:var(--tc-text)}
  .op-rail a[aria-current="true"] .t{border:0}
  .op-rail .n{font-size:11px}
  .op-rail .bar{left:-1px;top:0;bottom:auto;width:2px;height:100%;transform-origin:50% 0}
}

/* ---------- proof: the giant moment on Home */
.op-giant{display:flex;flex-wrap:wrap;gap:24px 72px;margin-top:8px}
.g-fig{display:flex;flex-direction:column}
.g-n{font-family:var(--head);font-weight:300;font-size:168px;line-height:.92;letter-spacing:-.04em}
.g-l{margin-top:18px;color:var(--slate)}

/* ---------- hear, score, act */
.op-hsa{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink-0)}
.op-hsa>li{padding:28px 32px 8px 0}
.op-hsa>li+li{padding-left:32px;border-left:1px solid var(--hair)}
.op-hsa .label{font-size:12px}

/* ---------- products */
.op-products{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.op-products>li{border:1px solid var(--hair);display:flex;flex-direction:column}
.op-pcard{display:flex;flex-direction:column;flex:1}
.op-pvis{display:flex;align-items:center;justify-content:center;background:var(--gray);aspect-ratio:4/3;padding:12% 24%}
.op-pbody{display:flex;flex-direction:column;padding:24px 24px 12px}
.op-pn{color:var(--slate);font-size:12px}
.op-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.op-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid #C9CBD0;padding:3px 8px;color:var(--slate)}
.op-tag.live{border-color:var(--tc);color:var(--tc-text)}
.label.accent{color:var(--tc-text)}
.op-pname{font-family:var(--head);font-weight:300;font-size:32px;line-height:1.1;margin-top:18px}
.op-pdesc{margin-top:10px;font-size:16px;line-height:1.5;color:var(--slate)}
.op-plink{align-self:flex-start;margin:4px 24px 24px;font-size:12px}
.op-pcard:hover .op-pname{color:var(--tc)}
.op-pfoot{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;margin-top:36px;font-size:16px}
.op-pfoot .link{font-size:12px}

/* ---------- privacy doctrine */
.op-priv{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.op-priv .op-sub{color:var(--slate);font-size:19px}
.op-priv .link{font-size:12px}
.op-cards{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.op-cards>li{background:var(--gray);padding:26px 26px 28px;border:1px solid transparent;transition:none}
.op-cards>li.wide{grid-column:1/-1}
.op-cards .label{font-size:11px;color:var(--slate)}
.op-cards p:not(.label){font-size:15px;line-height:1.55;color:var(--slate)}
@media (hover:hover) and (pointer:fine){
  .op-cards>li{transition:transform .2s ease,background-color .2s ease,border-color .2s ease}
  .op-cards>li:hover{transform:translateY(-3px);background:#F6E9E3;border-color:#E3B9A8}
}

/* ---------- inner page hero (Bitbit, Technology, About) */
.op-page{padding:96px 0 104px;background:#fff}
.op-split{display:grid;grid-template-columns:6fr 5fr;gap:72px;align-items:center}
.op-split .op-wheel-panel{background:var(--gray)}
.op-name{font-family:var(--head);font-weight:300;font-size:120px;line-height:.98;letter-spacing:-.035em;margin:22px 0 28px}
.op-actline{margin-top:56px;font-size:19px;line-height:1.55;max-width:460px}
.op-links{display:flex;gap:32px;margin-top:36px}
.op-links .link{font-size:12px}
.op-btn{display:inline-flex;align-items:center;height:48px;padding:0 24px;background:var(--ink-0);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--ink-0);margin-top:8px}
.op-btn:hover{background:#fff;color:var(--ink-0)}

/* Technology */
.op-tech .op-h1{font-size:76px;max-width:none}
.op-tech .op-lead{font-size:21px;line-height:1.5;margin-top:32px;max-width:560px}
.op-tech .op-body{margin-top:22px;font-size:17px;line-height:1.6;color:var(--slate);max-width:560px}
.op-tech .op-fine{margin-top:22px;max-width:560px}
.op-today{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.op-today>li{border:1px solid var(--hair);padding:24px 24px 28px}
.op-future-list{list-style:none;border-top:1px solid var(--hair);max-width:820px;margin-bottom:40px}
.op-future-list li{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--hair)}
.op-future-list .label{font-size:12px;color:var(--slate);padding-top:4px}
.op-fda{font-family:var(--head);font-weight:300;font-size:28px;line-height:1.25;max-width:760px}

/* About: the manifesto opens the page */
.op-manifesto{padding:96px 0 104px;background:#fff}
.op-manifesto .op-h1{font-size:60px;max-width:13em}
.op-manifesto .m-body{max-width:640px;margin-top:40px}
.op-manifesto .m-body p{font-size:19px;line-height:1.62;margin-top:1.05em}
.op-manifesto .m-close{font-family:var(--head);font-weight:300;font-size:44px;line-height:1.12;letter-spacing:-.015em;margin-top:56px;max-width:13em}
.op-manifesto .m-well{margin-top:36px;font-size:14px;line-height:1.55;color:var(--slate);max-width:560px}
.op-manifesto .m-a11y{margin-top:14px;font-size:14px;color:var(--slate)}

/* Nightsong page: the night band, plain espresso */
.op-nightband{background:var(--espresso);color:var(--espresso-ink);padding:120px 0}
.op-nightband .accent{color:var(--espresso-accent)}
.op-nightband .h1{font-size:76px}
.op-nightband .lead{margin-top:36px;max-width:660px}

/* How we work: the questions grid, still */
.qa.cards.three{grid-template-columns:repeat(3,1fr)}

/* ---------- iPhone and small screens */
@media (max-width:1100px){
  .op-top .nav>ul{display:none}
  .op-top .hb-menu{display:inline-flex}
}
@media (max-width:900px){
  .op-top .wrap{height:68px}
  .op-top .logo .lg-full{display:none}
  .op-top .logo .lg-short{display:block;height:28px}
  .hb-connect{height:40px;padding:0 16px;font-size:11px}
  .op-top .hb-menu{width:40px;height:40px}
  .h1{font-size:40px}
  .h2,.op-h2{font-size:34px}
  .giant{font-size:64px}
  .op-sec{padding:72px 0}
  .op-hero{padding:56px 0 64px}
  .op-hero-grid,.op-split,.op-priv{grid-template-columns:1fr;gap:40px}
  .op-h1{font-size:34px;line-height:1.1}
  .op-hero .op-sub{font-size:17px}
  .op-ledger>div{grid-template-columns:110px 1fr}
  .op-ledger dd{font-size:15px}
  .op-wheel-panel{max-width:420px;width:100%;padding:12%}
  .g-n{font-size:84px}
  .op-giant{flex-direction:column;gap:28px}
  .op-hsa{grid-template-columns:1fr}
  .op-hsa>li,.op-hsa>li+li{padding:26px 0;border-left:0}
  .op-hsa>li+li{border-top:1px solid var(--hair)}
  .op-products,.op-today{grid-template-columns:1fr}
  .op-cards{grid-template-columns:1fr}
  .op-page,.op-manifesto{padding:56px 0 72px}
  .op-name{font-size:64px}
  .op-tech .op-h1{font-size:56px;line-height:1.02}
  .op-manifesto .op-h1{font-size:48px;line-height:1.04}
  .op-manifesto .m-close{font-size:32px}
  .op-future-list li{grid-template-columns:1fr;gap:6px}
  .op-fda{font-size:24px}
  .op-nightband .h1{font-size:44px}
  .qa.cards.three{grid-template-columns:1fr}
  .op-foot .cols{grid-template-columns:1fr 1fr;gap:36px 24px}
  .op-foot .f-brand{grid-column:1/-1}
  .wrap{min-width:0}
}
@media (max-width:360px){
  .op-h1{font-size:30px}
  .g-n{font-size:68px}
  .op-name{font-size:52px}
  .op-tech .op-h1{font-size:46px}
  .op-manifesto .op-h1{font-size:40px}
  .op-pname{font-size:28px}
}

@media (prefers-reduced-motion:reduce){
  .w-orbit{animation:none}
  [data-rise]{animation:none;opacity:1;transform:none}
  .op-cards>li,.op-cards>li:hover{transition:none!important;transform:none!important}
}

/* Trademark marks sit raised without opening up the line spacing. */
sup{line-height:0}