/* Shared marketing chrome: skip, nav, buttons, footer, mobile menu.
   Pages own only page-body styles. Do not re-declare these rules in page <style>. */

*,*::before,*::after{box-sizing:border-box;border:0 solid transparent}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:16.5px;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  max-width:100vw;
}
/* Paper vignette: side gutters deepen toward the viewport edges while the
   content column stays on pure --bg, pulling the eye to the center. The
   calc() stops pin the flat region to the 1150px column, so the tint only
   exists where real gutters exist and vanishes on narrow screens. Fixed
   full-viewport layer (not body background) so it doesn't stretch with
   document height or break on iOS background-attachment. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,
    #F0DFC5 0,
    var(--bg) calc(50% - 600px),
    var(--bg) calc(50% + 600px),
    #F0DFC5 100%);
}
a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--ink)}
button{font-family:var(--font-ui);cursor:pointer;background:none;color:inherit;font-size:inherit}
code,pre,kbd{font-family:var(--font-mono);letter-spacing:0}
h1,h2,h3{font-weight:inherit;font-size:inherit;margin:0}
p{margin:0}
img{display:block;max-width:100%}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:3px;
}

.skip{
  position:absolute;left:0;top:0;z-index:100;
  transform:translateY(-150%);transition:transform .15s;
  background:var(--ink);color:var(--bg);padding:.75rem 1rem;
  font-size:.875rem;text-decoration:none;
}
.skip:focus{transform:translateY(0)}

/* nav */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  border-bottom:1px solid var(--hairline);background:rgba(255,248,238,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:0 1.5rem;
  display:flex;align-items:center;height:3.75rem;min-width:0;width:100%;box-sizing:border-box;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);min-width:0}
.brand:hover{color:var(--ink)}
.brand-mark{
  width:1.7rem;height:1.7rem;border-radius:9px;flex:none;
  display:block;overflow:hidden;
}
.brand-mark img,.brand-mark svg{display:block;width:100%;height:100%}
.brand-name{font-family:var(--font-display);font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.nav-links{display:none;align-items:center;gap:1.75rem;margin-left:2.25rem}
.nav-links a{
  font-size:.875rem;font-weight:500;text-decoration:none;
  color:var(--ink-secondary);padding:.75rem 0;transition:color .15s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-cta-wrap{display:flex;align-items:center;gap:.5rem;margin-left:auto;min-width:0}

/* Primary CTA: ink black only (not saffron). */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-ui);text-decoration:none;
  padding:.6rem 1.35rem;font-size:.875rem;font-weight:600;letter-spacing:.005em;
  color:var(--bg);background:var(--ink);border:1px solid var(--ink);border-radius:999px;
  transition:background .15s,border-color .15s,opacity .15s;
}
.btn-primary:hover{background:#2a2118;border-color:#2a2118;color:var(--bg)}
.btn-primary:disabled{cursor:not-allowed;background:#4a3f35;border-color:#4a3f35;opacity:.85}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--font-ui);text-decoration:none;
  padding:.6rem 1.15rem;font-size:.875rem;font-weight:600;
  color:var(--ink);background:transparent;border:1px solid var(--hairline-strong);border-radius:999px;
  transition:border-color .15s,background .15s;
}
.btn-outline:hover{border-color:var(--ink);background:var(--bg-card)}
.btn-lg{padding:.85rem 1.55rem;font-size:.9375rem}

.menu-btn{
  margin-left:.5rem;padding:.5rem;min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid var(--hairline-strong);flex:none;
}
.menu-btn:hover{background:rgba(26,18,11,.05)}
@media(min-width:768px){
  .nav-links{display:flex}
  .menu-btn{display:none}
}
@media(max-width:767px){
  .nav-inner{padding:0 .85rem 0 1rem;gap:.45rem}
  .brand-name{font-size:1.05rem}
  .nav-cta-wrap .btn-primary{
    padding:.55rem 1rem;font-size:.8125rem;letter-spacing:0;line-height:1.2;
    white-space:nowrap;min-height:44px;max-width:none;
  }
  .nav-cta-wrap .btn-primary .cta-full{display:none}
  .nav-cta-wrap .btn-primary .cta-short{display:inline}
  .menu-btn{margin-left:0;flex:none}
}
.btn-primary .cta-short{display:none}

.mobile-menu{
  display:none;position:fixed;inset:3.75rem 0 auto 0;z-index:49;
  background:var(--bg-card);border-bottom:1px solid var(--hairline);
  padding:1rem 1.5rem 1.25rem;
}
.mobile-menu.open{display:block}
.mobile-menu a{
  display:block;padding:.75rem 0;font-size:.9375rem;font-weight:500;
  text-decoration:none;color:var(--ink-secondary);border-bottom:1px solid var(--hairline);
}
.mobile-menu a:last-of-type{border-bottom:0}
.mobile-menu a[aria-current="page"]{color:var(--ink)}
/* CTA already in sticky nav on mobile — hide duplicate in drawer if present */
.mobile-menu [data-open-cta]{display:none}

/* footer */
footer{
  margin-top:clamp(2rem,5vw,3.25rem);padding:2.5rem 1.5rem;
  border-top:0;background:var(--bg-card);position:relative;
}
footer::before{
  content:"";
  display:block;position:absolute;left:50%;top:0;
  transform:translateX(-50%);
  width:min(var(--max), calc(100% - 3rem));
  height:1px;border:0;
  background:var(--section-rule);
}
.foot-links{
  max-width:var(--max);margin:0 auto;
  display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center;align-items:center;
}
.foot-links a{
  font-size:.875rem;font-weight:500;text-decoration:none;
  color:var(--ink-secondary);padding:.5rem 0;transition:color .15s;
}
.foot-links a:hover{color:var(--accent-ink)}
/* Footer CTA is often <a.btn-primary>; .foot-links a must not steal text color. */
.foot-links a.btn-primary,
.foot-links .btn-primary{
  color:var(--bg);background:var(--ink);border:1px solid var(--ink);
  padding:.45rem 1rem;font-size:.8rem;font-weight:600;
}
.foot-links a.btn-primary:hover,
.foot-links .btn-primary:hover{color:var(--bg);background:#2a2118;border-color:#2a2118}
.foot-meta{
  max-width:var(--max);margin:1.5rem auto 0;text-align:center;
  font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);line-height:1.7;
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* —— Setup popover (plain copy-paste line; opens in place on every page) —— */
.popover{
  position:fixed;z-index:80;width:min(30rem,calc(100vw - 2rem));
  background:var(--bg-card);border:1px solid var(--hairline-strong);border-radius:12px;
  box-shadow:0 18px 44px -18px rgba(26,18,11,.35);padding:1rem 1.1rem 1.1rem;
  text-align:left;
  left:var(--pop-left, 50%);
  top:var(--pop-top, 4.5rem);
  transform:var(--pop-transform, translateX(-50%));
  max-height:min(70vh,520px);overflow:auto;
}
.popover[hidden]{display:none!important}
.popover-backdrop{
  position:fixed;inset:0;z-index:55;background:rgba(26,18,11,.28);
  border:0;padding:0;margin:0;cursor:default;
}
.popover-backdrop[hidden]{display:none!important}
@media(max-width:640px){
  .popover{
    left:0!important;right:0!important;top:auto!important;bottom:0!important;
    transform:none!important;width:auto!important;border-radius:14px 14px 0 0;
    max-height:min(80vh,560px);
    --pop-top:auto;--pop-left:0;--pop-transform:none;
  }
}
.install-title{
  font-size:1rem;font-weight:600;color:var(--ink);margin:0 0 .85rem;line-height:1.35;
}
.cmd-bar{
  display:flex;align-items:center;gap:.6rem;
  width:100%;margin:0 0 .75rem;
  background:#0c0c0c;color:#FFF8EE;
  border:1px solid rgba(255,255,255,.12);border-radius:999px;
  padding:.7rem .55rem .7rem 1.1rem;
}
.cmd-prompt{flex:0 0 auto;color:rgba(255,248,238,.75);font-family:var(--font-mono);font-size:.85rem}
.cmd-text{
  flex:1 1 auto;min-width:0;
  font-family:var(--font-mono);font-size:.78rem;line-height:1.4;
  color:rgba(255,248,238,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;
}
.cmd-copy{
  flex:0 0 auto;width:2.2rem;height:2.2rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);color:rgba(255,248,238,.92);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.cmd-copy:hover{background:rgba(255,255,255,.14)}
.cmd-copy:focus-visible{outline:2px solid rgba(255,248,238,.55);outline-offset:2px}
.cmd-copy svg{width:15px;height:15px;display:block}
.cmd-copy .icon-check{display:none}
.cmd-copy.is-ok{background:#15803d;border-color:#15803d;color:#fff}
.cmd-copy.is-ok .icon-copy{display:none}
.cmd-copy.is-ok .icon-check{display:block}
.works-with{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .55rem;
  margin:.15rem 0 0;font-size:.78rem;color:var(--ink-muted);line-height:1.4;
}
.works-with .ww-label{color:var(--ink-secondary);font-weight:600}
.works-logos{list-style:none;margin:0;padding:0;display:inline-flex;gap:.4rem;flex-wrap:wrap}
.works-logo{
  display:inline-flex;align-items:center;gap:.35rem;
  height:1.85rem;padding:0 .5rem 0 .35rem;border-radius:8px;
  border:1px solid var(--hairline);background:var(--bg);color:var(--ink);
}
.works-logo img{width:16px;height:16px;display:block}
.works-name{font-size:.72rem;font-weight:600;color:var(--ink-secondary)}
.ww-more{color:var(--ink-muted);font-size:.76rem}