/* Sidecar product pages — Black Hart "Warm Mono" theme (self-contained, ported
   from the main site's globals.css + components.css so static pages match). */
:root{
  --color-ink:#1A1713;--color-ivory:#EFE9D9;--color-cream:#F3EEE1;
  --color-brass:#B08D57;--color-brass-dark:#8E6E3F;--color-brass-text:#6E5530;
  --color-bg:#EFE9D9;--color-fg:#1A1713;--color-fg-muted:#5A5349;--color-fg-faint:#8A8073;
  --color-surface:#E7E0CF;--color-surface-raised:#DED6C2;
  --color-border:rgba(26,23,19,0.14);--color-border-strong:rgba(26,23,19,0.26);
  --color-accent:#6E5530;--color-accent-fg:#F3EEE1;--color-link:#6E5530;
  --band-bg:#1A1713;--band-fg:#F3EEE1;--accent-soft:#EBE3D2;--logo:#1A1713;--shadow-color:26,23,19;
  --font-sans:'Manrope',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-serif:'Fraunces',Georgia,serif;--font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --radius-md:14px;--radius-lg:22px;--radius-xl:30px;--radius-pill:999px;
  --ease:cubic-bezier(0.22,1,0.36,1);--fast:180ms;--med:420ms;
  --maxw:1180px;--gutter:clamp(1.25rem,1rem+3vw,4rem);
  --step-0:clamp(0.95rem,0.9rem+0.25vw,1.05rem);--step-1:clamp(1.1rem,1rem+0.5vw,1.3rem);
  --step-3:clamp(1.7rem,1.3rem+1.9vw,2.6rem);--step-4:clamp(2.1rem,1.5rem+3vw,3.6rem);
}
@media (prefers-color-scheme:dark){:root{
  --color-cream:#1C1813;--color-bg:#15120E;--color-fg:#EFE9D9;--color-fg-muted:#ABA290;--color-fg-faint:#7E776A;
  --color-surface:#211C16;--color-surface-raised:#2A241C;--color-border:rgba(239,233,217,0.16);--color-border-strong:rgba(239,233,217,0.30);
  --color-brass:#C9A36B;--color-brass-dark:#B0894E;--color-brass-text:#C9A36B;--color-accent:#C9A36B;--color-link:#C9A36B;
  --band-bg:#100D0A;--accent-soft:#241F18;--logo:#FFFFFF;--shadow-color:0,0,0;
}}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark light;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-fg);font-family:var(--font-sans);font-size:var(--step-0);line-height:1.6;letter-spacing:-0.005em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:600;letter-spacing:-0.022em;line-height:1.06;text-wrap:balance;margin:0}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(3rem,7vw,5.5rem);position:relative}
.surface{background:var(--color-surface)}
.eyebrow{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--color-brass-text);font-weight:500}
.eyebrow-row{display:inline-flex;align-items:center;gap:0.6rem;margin-bottom:0.8rem}
.eyebrow-row .rule{width:28px;height:1px;background:var(--color-brass)}
.mark{display:inline-block;background:var(--logo);-webkit-mask:url('/brand/black-hart-icon.svg') center/contain no-repeat;mask:url('/brand/black-hart-icon.svg') center/contain no-repeat}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5em;font-family:var(--font-sans);font-weight:600;letter-spacing:0.01em;border-radius:var(--radius-pill);cursor:pointer;border:1px solid transparent;line-height:1;text-decoration:none;transition:background-color var(--fast) var(--ease),color var(--fast),border-color var(--fast)}
.btn:active{transform:translateY(1px)}
.btn-lg{height:56px;padding-inline:30px;font-size:1rem}.btn-md{height:46px;padding-inline:20px;font-size:0.92rem}
.btn-brass{background:var(--color-brass);color:var(--color-ink)}.btn-brass:hover{background:var(--color-brass-dark);color:var(--color-ivory)}
.btn-ink{background:var(--color-fg);color:var(--color-bg)}.btn-ink:hover{background:var(--color-brass);color:var(--color-ink)}
.btn-outline{background:transparent;color:var(--color-fg);border-color:var(--color-border-strong)}.btn-outline:hover{background:var(--color-fg);color:var(--color-bg);border-color:var(--color-fg)}
.cta-row{display:flex;flex-wrap:wrap;gap:0.8rem;margin-top:1.8rem;align-items:center}
.site-head{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--color-bg) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;height:66px}
.brandlink{display:inline-flex;align-items:center;gap:0.55rem;font-family:var(--font-serif);font-weight:600;font-size:1.05rem}
.brandlink .mark{width:19px;height:23px}
.head-right{display:flex;align-items:center;gap:1.1rem}
.head-right .muted{font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-fg-muted)}
@media(max-width:620px){.head-right .muted{display:none}}
.hero{padding-block:clamp(2.6rem,6vw,4.6rem) clamp(1.5rem,4vw,3rem)}
.pill{display:inline-flex;align-items:center;gap:0.55rem;margin-bottom:1.3rem;padding:0.4rem 0.9rem 0.4rem 0.6rem;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-accent) 22%,transparent)}
.pill span{font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--color-fg-muted)}
.hero h1{font-size:clamp(2.1rem,1.3rem+3.4vw,4.1rem);letter-spacing:-0.03em;line-height:1.08;max-width:17ch}
.hero h1 .accent{font-style:italic;font-weight:500;color:var(--color-accent)}
.hero .lede{margin-top:1.4rem;max-width:50ch;font-size:var(--step-1);color:var(--color-fg-muted);line-height:1.55}
.hero-shot{margin-top:clamp(2.2rem,4vw,3.2rem);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 50px 90px -55px rgba(var(--shadow-color),0.55);background:var(--color-surface-raised)}
.hero-shot img{display:block;width:100%;height:auto}
.section-head{max-width:52ch;margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.section-head h2{font-size:var(--step-4);letter-spacing:-0.025em}
.section-head .lede{margin-top:0.9rem;font-size:var(--step-1);color:var(--color-fg-muted);line-height:1.55}
.svc-grid{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media(min-width:680px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.svc-grid.four{grid-template-columns:repeat(4,1fr)}}
.svc{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.5rem;background:var(--color-cream);transition:border-color var(--med),transform var(--med)}
.svc:hover{border-color:var(--color-brass);transform:translateY(-2px)}
.svc .ic{width:44px;height:44px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--accent-soft);color:var(--color-accent);margin-bottom:1rem}
.svc .ic svg{width:22px;height:22px}
.svc h3{font-size:1.18rem}
.svc p{font-size:0.9rem;color:var(--color-fg-muted);margin-top:0.5rem;line-height:1.55}
.split{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
.colcount{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.colcount .num{font-family:var(--font-serif);font-size:clamp(3rem,2rem+3vw,4.4rem);line-height:1;letter-spacing:-0.02em}
.colcount .num.dim{color:var(--color-fg-faint)}.colcount .num.hot{color:var(--color-accent)}
.colcount .arrow{color:var(--color-brass);font-size:1.6rem}
.chips{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.2rem}
.chip{font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.06em;padding:0.35rem 0.65rem;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--color-accent)}
.chip.muted{background:var(--color-surface);color:var(--color-fg-muted)}
.pricing-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;max-width:760px;margin-inline:auto}
@media(min-width:680px){.pricing-grid{grid-template-columns:1fr 1fr}}
.tier{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-cream);padding:1.7rem;position:relative}
.tier.featured{border-color:var(--color-brass);box-shadow:0 0 0 1px var(--color-brass)}
.tier .tier-badge{position:absolute;top:-11px;left:1.7rem;background:var(--color-brass);color:#1A1713;font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;padding:0.3rem 0.7rem;border-radius:var(--radius-pill);font-weight:600}
.tier .t-name{font-family:var(--font-serif);font-size:1.35rem;font-weight:600}
.tier .t-price{display:flex;align-items:baseline;gap:0.45rem;margin-top:0.7rem}
.tier .t-price b{font-family:var(--font-serif);font-size:2.4rem;line-height:1;letter-spacing:-0.02em}
.tier .t-price span{color:var(--color-fg-faint)}
.tier .t-note{font-family:var(--font-mono);font-size:0.68rem;color:var(--color-brass-text);margin-top:0.5rem}
.tier ul{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:0.6rem}
.tier li{display:flex;gap:0.55rem;font-size:0.9rem;line-height:1.4;align-items:flex-start}
.tier li svg{width:17px;height:17px;color:var(--color-accent);flex:none;margin-top:2px}
.tier .t-cta{margin-top:auto;padding-top:1.4rem}.tier .t-cta .btn{width:100%}
.cta-band{border-radius:var(--radius-xl);padding:clamp(2.2rem,5vw,3.6rem);text-align:center;background:var(--band-bg);color:var(--band-fg)}
.cta-band h2{color:var(--band-fg);font-size:var(--step-4);max-width:20ch;margin-inline:auto}
.cta-band p{margin-top:1rem;color:color-mix(in srgb,var(--band-fg) 74%,var(--band-bg));max-width:46ch;margin-inline:auto}
.cta-band .cta-row{justify-content:center;margin-top:1.6rem}
.prose{max-width:70ch}
.prose .updated{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-fg-faint);margin-top:0.6rem}
.prose h2{font-size:var(--step-3);margin-top:2.2rem}.prose h3{font-size:1.18rem;margin-top:1.6rem}
.prose p,.prose li{color:var(--color-fg-muted);line-height:1.7;margin-top:0.8rem}
.prose ul{padding-left:1.2rem;margin-top:0.5rem}
.prose a{color:var(--color-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose code{font-family:var(--font-mono);font-size:0.86em;background:var(--color-surface);padding:0.12em 0.4em;border-radius:6px}
.lede-page{font-size:var(--step-1);color:var(--color-fg-muted);max-width:56ch;margin-top:1rem;line-height:1.55}
.site-foot{background:var(--band-bg);color:var(--band-fg);padding-block:clamp(2.4rem,5vw,3.4rem) 1.8rem;margin-top:clamp(3rem,6vw,5rem)}
.foot-grid{display:flex;flex-wrap:wrap;gap:2.2rem;justify-content:space-between;align-items:flex-start}
.foot-brand .mark{width:27px;height:33px;background:var(--band-fg);margin-bottom:0.8rem}
.foot-brand p{font-size:0.86rem;color:color-mix(in srgb,var(--band-fg) 72%,var(--band-bg));max-width:32ch;line-height:1.6;margin:0}
.foot-links{display:flex;gap:2.6rem;flex-wrap:wrap}
.foot-col h4{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--color-brass);margin:0 0 0.8rem}
.foot-col a{display:block;font-size:0.86rem;color:color-mix(in srgb,var(--band-fg) 82%,var(--band-bg));padding-block:0.32rem}
.foot-col a:hover{color:var(--color-brass)}
.foot-bottom{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid color-mix(in srgb,var(--band-fg) 14%,transparent);font-size:0.76rem;color:color-mix(in srgb,var(--band-fg) 60%,var(--band-bg))}
.unaff{font-size:0.78rem;color:var(--color-fg-faint);margin-top:1.2rem}