/* site-chrome.css — Oct 31 2026. The landing page's top bar and footer, shared by
   the other public pages (stack, partners, terms, privacy, support, repricer,
   replace-your-stack) so they all look like one site. Copied from index.html's
   header/nav/footer rules; everything is scoped to .oc-header / .oc-footer and
   uses its own --oc-* variables, because each page has bare nav{}, footer{},
   a{}, p{}, details{} and summary{} rules of its own that would otherwise leak in.
   Load it after the page's own <style> (and after Tailwind on repricer.html). */

.oc-header,.oc-footer,.oc-light{
  --oc-night:#0B1410; --oc-paper:#13221A; --oc-moss:#1E382A;
  --oc-ink:#F2FAF6; --oc-inksoft:#93B0A2;
  --oc-forest:#247C5C; --oc-deep:#388F71; --oc-mint:#58D68D;
  --oc-lightbg:#F4F9F5; --oc-lightink:#1A3326; --oc-lightsoft:#547569; --oc-lightmute:#DCE8E1;
  --oc-grad:linear-gradient(135deg,var(--oc-forest),var(--oc-deep) 55%,var(--oc-mint));
  --oc-display:"Fraunces",Georgia,serif; --oc-sans:"DM Sans",system-ui,-apple-system,sans-serif;
  --oc-r:14px; --oc-gutter:20px; --oc-max:1100px;
}

/* Base light page (body class="oc-light"): the landing page's light sections. */
body.oc-light{background:var(--oc-lightbg);color:var(--oc-lightink);font-family:var(--oc-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* Shared resets inside the chrome, against the pages' own element rules. */
.oc-header *,.oc-footer *{box-sizing:border-box;margin:0;padding:0}
.oc-header a,.oc-footer a{border:0;text-decoration:none;margin:0}
.oc-header a:hover,.oc-footer a:hover{text-decoration:none}

/* ── Top bar (index.html: header / nav / .navlinks / .navdd) ───────────────── */
.oc-header{position:sticky;top:0;z-index:50;padding:.7rem var(--oc-gutter) 0;font-family:var(--oc-sans);line-height:1.55;text-align:left}
.oc-header .oc-nav{max-width:var(--oc-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem .6rem .6rem 1rem;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:rgba(11,20,16,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 32px rgba(0,0,0,.35)}
.oc-header .oc-logo,.oc-footer .oc-logo{font-family:var(--oc-display);font-weight:800;font-size:1.45rem;line-height:1.2;letter-spacing:-.02em;text-decoration:none;background:var(--oc-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline-block}
.oc-header .oc-navlinks{display:flex;align-items:center;gap:.25rem}
.oc-header .oc-signin{font-size:.9rem;font-weight:500;color:var(--oc-inksoft);text-decoration:none;padding:.5rem .7rem;border-radius:8px;white-space:nowrap}
.oc-header .oc-signin:hover{color:var(--oc-ink)}
.oc-header .oc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;padding:.65rem 1rem;font-size:.9rem;border-radius:var(--oc-r);text-decoration:none;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s;white-space:nowrap;color:#fff;background:linear-gradient(135deg,#1F6E51,#247C5C 60%,#2B7F61);box-shadow:0 4px 18px rgba(88,214,141,.3)}
.oc-header .oc-btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(88,214,141,.5);color:#fff}
.oc-header .oc-xs{display:none}
.oc-header .oc-navdd,.oc-header .oc-navdd[open]{position:relative;background:none;border:0;border-radius:0;overflow:visible;margin:0}
.oc-header .oc-navdd summary{list-style:none;cursor:pointer;display:block;padding:.5rem .7rem;font-size:.9rem;font-weight:500;color:var(--oc-inksoft);gap:0}
.oc-header .oc-navdd summary:hover,.oc-header .oc-navdd[open] summary{color:var(--oc-ink)}
.oc-header .oc-navdd summary::before,.oc-header .oc-navdd summary::after{content:none}
.oc-header .oc-navdd summary::-webkit-details-marker{display:none}
.oc-header .oc-navdd-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:250px;background:rgba(11,20,16,.97);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.4rem;box-shadow:0 14px 40px rgba(0,0,0,.4);z-index:60}
.oc-header .oc-navdd-menu a{display:block;padding:.6rem .75rem;border-radius:8px;color:var(--oc-ink);text-decoration:none;font-weight:600;font-size:.9rem;line-height:1.4}
.oc-header .oc-navdd-menu a span{display:block;font-weight:400;font-size:.76rem;color:var(--oc-inksoft);margin-top:.1rem}
.oc-header .oc-navdd-menu a:hover{background:rgba(88,214,141,.1)}
@media(max-width:760px){.oc-header .oc-navx{display:none}}
@media(max-width:420px){.oc-header .oc-nav{padding:.5rem .5rem .5rem .85rem;gap:.4rem}.oc-header .oc-logo{font-size:1.2rem}.oc-header .oc-signin{padding-inline:.45rem;font-size:.85rem}.oc-header .oc-btn{padding:.6rem .8rem;font-size:.86rem}.oc-header .oc-xl{display:none}.oc-header .oc-xs{display:inline}}

/* ── Footer (index.html: footer / .top / .legal / .copy) ───────────────────── */
.oc-footer{background:var(--oc-night);color:var(--oc-inksoft);border-top:1px solid var(--oc-moss);font-family:var(--oc-sans);font-size:.88rem;line-height:1.55;text-align:left;padding:0;margin:0}
.oc-footer .oc-wrap{max-width:var(--oc-max);margin:0 auto;padding-inline:var(--oc-gutter)}
.oc-footer .oc-logo{font-size:1.25rem}
.oc-footer .oc-tag{margin-top:.25rem}
.oc-footer .oc-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;padding-block:2.8rem}
.oc-footer nav{display:flex;flex-wrap:wrap;gap:1.2rem;padding:0;border:0;background:none;box-shadow:none;max-width:none;margin:0}
.oc-footer a{color:var(--oc-inksoft)}
.oc-footer a:hover{color:var(--oc-ink)}
.oc-footer .oc-legal{gap:1.1rem;font-size:.8rem;padding-bottom:1.8rem}
@media(pointer:coarse){.oc-footer nav a{display:inline-block;padding-block:.7rem}.oc-footer nav{gap:.2rem 1.2rem}}
.oc-footer .oc-copy{text-align:center;font-size:.78rem;padding:1.4rem var(--oc-gutter);border-top:1px solid var(--oc-moss);line-height:1.6}

/* In-page links (#how-it-works, the privacy contents) land below the sticky top bar. */
html:has(.oc-header){scroll-padding-top:5.5rem}