/* ===================================================================
   Shop Manager Lite — shared site styles
   Linked by every page. Page-unique styles stay inline on their page.

   Design language: "pro, with edge." A clean, legible SANS base (so shop
   owners reading long copy don't fight a wall of monospace) with automotive
   MONO accents on labels, nav, badges, buttons, prices and spec decks — the
   spec-sheet flavor that says this was built in a real shop. Dark, cyan/green
   accents, subtle glow + motion.
   =================================================================== */
:root{
  --bg:#050508; --panel:#0b0c10; --panel2:#0e1017; --line:#1a1c23; --input:#020204;
  --tx:#f1f5f9; --mut:#8b97a8; --blue:#00d2ff; --green:#00ff66; --amber:#eab308; --red:#ef4444;
  /* type: sans for reading, mono for automotive accents */
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:var(--sans);}
html{scroll-behavior:smooth;scroll-padding-top:70px;}
body{background:var(--bg);color:var(--tx);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .35s ease,color .35s ease;}
a{color:var(--blue);text-decoration:none;}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px;}
/* accent utility — anything with a spec-sheet / label feel */
.mono,.kicker,.logo,.nav a,.badge,.dl-btn,.dl-nav,.langsw button,.pt-name,.pt-now,.pt-cur,.pt-launch,.pt-dev,.pt-ribbon,.pt-cta,.foot-links a,.beta,h2{font-family:var(--mono);}

/* top bar + nav */
.topbar{border-bottom:1px solid var(--line);background:var(--bg90,rgba(5,5,8,.9));position:sticky;top:0;backdrop-filter:blur(8px);z-index:10;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:13px 22px;gap:14px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;}
.logo{font-weight:700;letter-spacing:2px;color:var(--blue);font-size:.85rem;text-transform:uppercase;}
.logo small{display:block;color:var(--mut);font-size:.58rem;letter-spacing:1px;}
.nav{display:flex;align-items:center;flex-wrap:wrap;}
.nav a{font-size:.68rem;text-transform:uppercase;letter-spacing:.8px;color:var(--mut);margin-left:18px;transition:color .2s ease;}
.nav a:hover{color:var(--tx);}
.dl-nav{color:var(--bg)!important;background:var(--blue);padding:6px 15px;border-radius:5px;font-weight:700;margin-left:14px!important;transition:opacity .15s,box-shadow .2s;}
.dl-nav:hover{opacity:.9;color:var(--bg)!important;box-shadow:0 4px 18px rgba(0,210,255,.35);}

/* BETA badge — honest "still improving" marker (site is pre-1.0) */
.beta{display:inline-flex;align-items:center;gap:6px;font-size:.55rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--amber);background:rgba(234,179,8,.1);border:1px solid rgba(234,179,8,.42);border-radius:20px;padding:3px 9px 3px 8px;line-height:1;white-space:nowrap;}
.beta::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 7px var(--amber);flex-shrink:0;}
.beta-note{max-width:560px;margin:16px auto 0;font-size:.82rem;color:var(--mut);}
.beta-note b{color:var(--amber);}

/* language switcher */
.langsw{display:inline-flex;gap:2px;margin-left:16px;border:1px solid var(--line);border-radius:5px;overflow:hidden;}
.langsw button{background:transparent;border:0;color:var(--mut);font-size:.6rem;letter-spacing:.8px;text-transform:uppercase;padding:5px 8px;cursor:pointer;transition:background .18s ease,color .18s ease;}
.langsw button:hover{color:var(--tx);}
.langsw button.on{background:rgba(0,210,255,.14);color:var(--blue);}

/* badges */
.badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
.badge{font-size:.62rem;text-transform:uppercase;letter-spacing:.8px;padding:5px 11px;border:1px solid var(--line);border-radius:4px;color:var(--mut);background:var(--panel);}
.badge.b{color:var(--blue);border-color:rgba(0,210,255,.35);}
.badge.g{color:var(--green);border-color:rgba(0,255,102,.3);}
.badge.a{color:var(--amber);border-color:rgba(234,179,8,.35);}

/* download / action buttons */
.dl-wrap{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px;}
.dl-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;font-weight:700;font-size:.78rem;letter-spacing:1.2px;text-transform:uppercase;border-radius:6px;transition:opacity .25s cubic-bezier(.2,.8,.3,1),transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s cubic-bezier(.2,.8,.3,1);}
.dl-btn:hover{opacity:.95;transform:translateY(-2px);}
.dl-btn svg{flex-shrink:0;}
.dl-btn.primary{background:var(--blue);color:var(--bg);box-shadow:0 0 24px rgba(0,210,255,.25);}
.dl-btn.primary:hover{box-shadow:0 6px 30px rgba(0,210,255,.4);}
.dl-btn.secondary{background:transparent;color:var(--tx);border:1px solid var(--line);box-shadow:none;}
.dl-btn.secondary:hover{border-color:rgba(0,210,255,.5);}

/* sections + headings */
section{padding:64px 0 8px;}
h2{font-size:.82rem;letter-spacing:2px;text-transform:uppercase;color:var(--blue);border-left:3px solid var(--blue);padding-left:12px;margin-bottom:28px;}

/* cards + grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px;transition:transform .28s cubic-bezier(.2,.8,.3,1),border-color .28s ease,box-shadow .28s ease;}
.card:hover{transform:translateY(-4px);border-color:rgba(0,210,255,.4);box-shadow:0 12px 30px rgba(0,0,0,.45);}
.card .ic{font-size:1.35rem;margin-bottom:11px;display:block;}
.card h3{font-size:1rem;font-weight:700;letter-spacing:.2px;margin-bottom:8px;color:var(--tx);}
.card p{font-size:.9rem;color:var(--tx2);line-height:1.6;}
.card.hl{border-color:rgba(0,255,102,.3);} .card.hl h3{color:var(--green);}

/* prose (help / about / legal body copy) */
.prose{max-width:760px;}
.prose p{font-size:1rem;color:var(--tx2);margin:0 0 15px;line-height:1.7;}
.prose p.mut{color:var(--mut);font-size:.88rem;}
.prose h3{font-size:1.05rem;font-weight:700;letter-spacing:.2px;color:var(--tx);margin:30px 0 11px;}
.prose ul{padding-left:20px;margin:0 0 15px;}
.prose li{font-size:.98rem;color:var(--tx2);margin:6px 0;line-height:1.6;}
.prose li::marker{color:var(--blue);}
.prose b{color:var(--tx);}
.prose .lead{font-size:1.15rem;color:var(--tx);margin-bottom:24px;line-height:1.6;}

/* numbered steps */
.steps{counter-reset:s;display:grid;gap:10px;}
.step{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:15px 16px 15px 56px;position:relative;font-size:.92rem;color:var(--tx2);line-height:1.6;transition:border-color .25s ease;}
.step:hover{border-color:rgba(0,210,255,.3);}
.step::before{counter-increment:s;content:counter(s);font-family:var(--mono);position:absolute;left:16px;top:14px;width:26px;height:26px;border-radius:50%;background:rgba(0,210,255,.12);border:1px solid rgba(0,210,255,.4);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;}
.step b{color:var(--tx);}

/* FAQ / accordion */
.faq{border:1px solid var(--line);border-radius:6px;background:var(--panel);margin-bottom:10px;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease;}
.faq[open]{border-color:rgba(0,210,255,.35);box-shadow:0 6px 24px rgba(0,0,0,.35);}
.faq summary{cursor:pointer;list-style:none;padding:15px 16px;font-size:.95rem;font-weight:700;letter-spacing:.1px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--tx);transition:color .2s ease;}
.faq summary:hover{color:var(--blue);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-family:var(--mono);color:var(--blue);font-size:1.15rem;line-height:1;transition:transform .3s cubic-bezier(.2,.8,.3,1);}
.faq[open] summary::after{transform:rotate(45deg);}
.faq .fa{padding:0 16px 16px;font-size:.9rem;color:var(--mut);max-width:760px;line-height:1.65;}
.faq[open] .fa{animation:fadeUp .3s ease;}
.faq .fa b{color:#cbd5e1;}

/* hero (shared shell — pages may extend) */
.hero{padding:62px 0 12px;text-align:center;position:relative;overflow:hidden;}
.kicker{font-size:.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--mut);}
.hero h1{font-size:clamp(1.7rem,4vw,2.5rem);font-weight:800;letter-spacing:.3px;line-height:1.15;margin-top:10px;}
.hero h1 b{color:var(--blue);}
.hero .sub{color:var(--tx2);max-width:620px;margin:14px auto 0;font-size:1.02rem;line-height:1.6;}

/* footer */
footer{margin-top:72px;border-top:1px solid var(--line);padding:28px 0 44px;color:var(--mut);font-size:.78rem;text-align:center;line-height:1.6;}
footer b{color:var(--green);}
.foot-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;}
.foot-links a{color:var(--mut);text-transform:uppercase;letter-spacing:.8px;font-size:.62rem;transition:color .2s ease;}
.foot-links a:hover{color:var(--blue);}

/* ===== pricing tiers ===== */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;}
.ptier{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px 20px 22px;display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.2,.8,.3,1),border-color .28s ease,box-shadow .28s ease;}
.ptier:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.45);}
.ptier.feat{border-color:rgba(0,255,102,.45);box-shadow:0 0 0 1px rgba(0,255,102,.14),0 14px 40px rgba(0,0,0,.5);}
.pt-ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--green);color:#04120a;font-size:.55rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 12px;border-radius:20px;white-space:nowrap;}
.pt-name{font-size:.9rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue);}
.ptier.feat .pt-name{color:var(--green);}
.pt-tag{font-size:.85rem;color:var(--mut);margin:5px 0 16px;}
.pt-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.pt-now{font-size:2.1rem;font-weight:700;color:var(--tx);letter-spacing:1px;}
.pt-was{font-size:.9rem;color:var(--mut);text-decoration:line-through;}
.pt-cur{font-size:.6rem;color:var(--mut);text-transform:uppercase;letter-spacing:1px;}
.pt-launch{align-self:flex-start;margin:9px 0 2px;font-size:.54rem;letter-spacing:.7px;text-transform:uppercase;color:var(--amber);border:1px solid rgba(234,179,8,.4);border-radius:4px;padding:3px 8px;}
/* TBD / projected pricing — presentation placeholder, hi-vis lettering */
.pt-tbd{color:var(--mut);letter-spacing:3px;}
.pt-proj{display:inline-flex;align-items:baseline;gap:9px;align-self:flex-start;margin:11px 0 2px;padding:7px 12px;border:1px solid var(--amber);border-radius:8px;background:color-mix(in srgb, var(--amber) 12%, transparent);}
.pt-proj-lbl{font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--amber);opacity:.9;}
.pt-proj-val{font-family:var(--mono);font-size:1.75rem;font-weight:800;letter-spacing:.5px;color:var(--amber);text-shadow:0 0 12px color-mix(in srgb, var(--amber) 60%, transparent),0 0 2px color-mix(in srgb, var(--amber) 85%, transparent);}
.ptier.feat .pt-proj{border-color:var(--green);background:color-mix(in srgb, var(--green) 12%, transparent);}
.ptier.feat .pt-proj-lbl{color:var(--green);}
.ptier.feat .pt-proj-val{color:var(--green);text-shadow:0 0 12px color-mix(in srgb, var(--green) 60%, transparent),0 0 2px color-mix(in srgb, var(--green) 85%, transparent);}
/* Founders + projected-MSRP pairing: hi-vis Founders price beside a muted MSRP anchor */
.pt-proj{gap:12px;flex-wrap:wrap;}
.pt-proj-grp{display:inline-flex;align-items:baseline;gap:8px;}
.pt-proj-sep{width:1px;align-self:stretch;background:var(--line);}
.pt-msrp-val{font-family:var(--mono);font-size:1.05rem;font-weight:700;letter-spacing:.5px;color:var(--mut);}
.pt-proj-grp.msrp .pt-proj-lbl,.ptier.feat .pt-proj-grp.msrp .pt-proj-lbl{color:var(--mut);}
.pt-dev{font-size:.64rem;color:var(--blue);text-transform:uppercase;letter-spacing:1px;margin:14px 0 10px;}
.ptier ul{list-style:none;padding:0;margin:0 0 18px;flex:1;}
.ptier li{position:relative;padding-left:22px;font-size:.9rem;color:var(--tx2);margin:10px 0;line-height:1.55;}
.ptier li::before{content:'✓';position:absolute;left:0;top:0;color:var(--green);font-weight:700;}
.pt-cta{display:block;text-align:center;padding:12px 14px;border-radius:6px;font-weight:700;font-size:.72rem;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--line);color:var(--tx);background:transparent;transition:border-color .2s ease,color .2s ease,opacity .2s ease;}
.pt-cta:hover{border-color:var(--blue);color:var(--blue);}
.ptier.feat .pt-cta{background:var(--blue);color:var(--bg);border-color:var(--blue);}
.ptier.feat .pt-cta:hover{opacity:.9;color:var(--bg);}
.px-note{max-width:720px;margin:20px auto 0;text-align:center;font-size:.85rem;color:var(--mut);line-height:1.6;}
@media(max-width:820px){.price-grid{grid-template-columns:1fr;max-width:430px;margin:0 auto;}}

/* ===== download gate ===== */
.dl-gated.locked{background:var(--panel2)!important;color:var(--mut)!important;border:1px solid var(--line)!important;box-shadow:none!important;cursor:pointer;}
.dl-gated.locked svg{opacity:.45;}
.dl-gated.locked::after{content:'🔒';margin-left:8px;font-size:.85em;}
.dl-unlock{max-width:540px;margin:22px auto 0;text-align:center;}
.dl-unlock form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px;}
.dl-unlock input{flex:1 1 260px;background:var(--input);border:1px solid var(--line);border-radius:6px;color:var(--tx);padding:12px 13px;font-family:var(--mono);font-size:.82rem;letter-spacing:1px;text-transform:uppercase;text-align:center;}
.dl-unlock input:focus{outline:none;border-color:var(--blue);}
.dl-lockhint{font-size:.82rem;color:var(--mut);}
.dl-msg{font-size:.82rem;margin-top:8px;min-height:1em;color:var(--mut);}
.dl-msg.ok{color:var(--green);} .dl-msg.err{color:#fca5a5;}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1);}
.rv.in{opacity:1;transform:none;}
h2.rv{transform:translateX(-10px);}
h2.rv.in{transform:none;}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

@media(max-width:900px){.grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.grid{grid-template-columns:1fr;}.nav a{margin-left:12px;}}
@media(prefers-reduced-motion:reduce){
  .card,.card:hover{transition:none;transform:none;}
  .rv,h2.rv{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ===================================================================
   SITE-WIDE THEME SKINS — the "Ten looks, one shop" tiles apply one of
   these classes to <html> (persisted in localStorage as sml_theme, so
   the choice follows the visitor across every page). Same palettes the
   in-app themes use; the hero demo deck inherits them too. Tactical
   Dark = no class = the :root defaults above.
   =================================================================== */
html.t-light{--bg:#eef1f6;--bg90:rgba(238,241,246,.92);--panel:#ffffff;--panel2:#f1f5f9;--line:#d8e0ea;--input:#f4f6fa;--tx:#0f172a;--mut:#64748b;--blue:#0369a1;--green:#059669;--amber:#b45309;--red:#dc2626;}
html.t-hivis{--bg:#dedac9;--bg90:rgba(231,227,216,.92);--panel:#e7e3d8;--panel2:#efece4;--line:#c9c2b2;--input:#f5f2ea;--tx:#2a2a26;--mut:#6b675c;--blue:#bd5a39;--green:#3f7d20;--amber:#a26a00;--red:#c0392b;}
html.t-midnight{--bg:#070d18;--bg90:rgba(7,13,24,.9);--panel:#0c1524;--panel2:#101d33;--line:#1e3555;--input:#060d18;--tx:#e6effb;--mut:#7e93b3;--blue:#4d9fff;--green:#3ddc84;--amber:#f2b53c;--red:#ff5c72;}
html.t-carbon{--bg:#0b0b0d;--bg90:rgba(11,11,13,.9);--panel:#141416;--panel2:#1b1b1e;--line:#2c2c31;--input:#0a0a0b;--tx:#ececed;--mut:#8a8a90;--blue:#9db2c8;--green:#9be15d;--amber:#e0b64a;--red:#e5695f;}
html.t-emerald{--bg:#060f0c;--bg90:rgba(6,15,12,.9);--panel:#0b1613;--panel2:#0f1e1a;--line:#1d3a30;--input:#050d0a;--tx:#e7f5ee;--mut:#7ba394;--blue:#2fd398;--green:#57e39a;--amber:#e0b24a;--red:#ef6a63;}
html.t-crimson{--bg:#0d0808;--bg90:rgba(13,8,8,.9);--panel:#17100f;--panel2:#201413;--line:#3a201d;--input:#0c0706;--tx:#f6e9e7;--mut:#b08a86;--blue:#ff4d4d;--green:#5fd08a;--amber:#f0a83c;--red:#ff5a5a;}
html.t-amber{--bg:#0d0a04;--bg90:rgba(13,10,4,.9);--panel:#181207;--panel2:#20180a;--line:#3a2c12;--input:#0d0904;--tx:#f7efdd;--mut:#b09a72;--blue:#ffb02e;--green:#8fce4a;--amber:#ffc24d;--red:#ef7a4a;}
html.t-neon{--bg:#0a0513;--bg90:rgba(10,5,19,.9);--panel:#12091f;--panel2:#1a0f2b;--line:#33204d;--input:#090414;--tx:#f2e9ff;--mut:#9a86c0;--blue:#00e5ff;--green:#39ff14;--amber:#ffd200;--red:#ff2e88;}
html.t-sepia{--bg:#e9dec8;--bg90:rgba(233,222,200,.92);--panel:#f3ead9;--panel2:#efe4cf;--line:#d8c8ab;--input:#f8f1e3;--tx:#3a2f22;--mut:#7a6a52;--blue:#9a5b1e;--green:#5e7d2a;--amber:#b3781a;--red:#b53a2b;}
/* soft body-copy tone (--tx2): brighter than --mut, calmer than --tx */
:root{--tx2:#d3dbe6;}
html.t-light{--tx2:#33415a;}
html.t-hivis{--tx2:#4a463c;}
html.t-midnight{--tx2:#c3d3e8;}
html.t-carbon{--tx2:#c9c9cd;}
html.t-emerald{--tx2:#cfe6da;}
html.t-crimson{--tx2:#e3cdc9;}
html.t-amber{--tx2:#e6d9bd;}
html.t-neon{--tx2:#d9c9f2;}
html.t-sepia{--tx2:#55483a;}