/* Summit Studios brand system (Owen, 2026-09-28: "integrate all of the 3d generation websites in a more
   cohesive manner... links to each other and feel like the same brand. Very professional... professional
   creators"). One dark, cinematic system for SwapStudio, The Studio and ShapeStudio: graphite ground, warm
   off-white type, one accent, a condensed display face for headlines. Loaded by every app page and, from
   app.swapstudio.summitnet.io, by the marketing pages. Every rule is prefixed .sn- except the tokens. */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');
:root{
  --sn-bg:#0a0a0e; --sn-bg-2:#101018; --sn-panel:#15151f; --sn-panel-2:#1b1b27;
  --sn-line:rgba(255,255,255,.12); --sn-line-2:rgba(255,255,255,.22);
  --sn-ink:#f2f0ea; --sn-muted:#a6a6b4;
  --sn-accent:#c8ff3a; --sn-accent-ink:#0a0a0e; --sn-accent-rgb:200 255 58;
  --sn-ok:#7ee787; --sn-warn:#e3b341; --sn-bad:#ff7b72;
  --sn-display:"Big Shoulders Display","Avenir Next Condensed","Roboto Condensed","Arial Narrow",Impact,sans-serif;
  --sn-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sn-radius:12px; --sn-gutter:clamp(16px,4vw,40px); --sn-max:1180px;
}
.sn-head{position:sticky;top:0;z-index:50;background:rgba(10,10,14,.86);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--sn-line);color:var(--sn-ink);font-family:var(--sn-body)}
.sn-head .sn-wrap{max-width:var(--sn-max);margin:0 auto;padding:0 var(--sn-gutter);display:flex;align-items:center;gap:18px;min-height:62px}
.sn-home{display:flex;flex-direction:column;gap:1px;text-decoration:none;color:inherit;min-width:0}
.sn-family{font:600 .68rem/1 var(--sn-body);letter-spacing:.16em;text-transform:uppercase;color:var(--sn-muted)}
.sn-product{font:900 1.35rem/1 var(--sn-display);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.sn-product b{color:var(--sn-accent)}
.sn-tabs{display:flex;gap:4px;margin-left:8px;overflow-x:auto;scrollbar-width:none}
.sn-tabs::-webkit-scrollbar{display:none}
.sn-tabs a{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;color:var(--sn-muted);text-decoration:none;font:600 .85rem/1 var(--sn-body);white-space:nowrap;border:1px solid transparent}
.sn-tabs a:hover{color:var(--sn-ink);border-color:var(--sn-line)}
.sn-tabs a.on{color:var(--sn-ink);background:var(--sn-panel);border-color:var(--sn-line-2)}
.sn-tabs a .sn-soon{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sn-muted);border:1px solid var(--sn-line);border-radius:999px;padding:2px 6px}
.sn-spacer{flex:1}
.sn-acct{display:flex;align-items:center;gap:12px;font-size:.85rem;color:var(--sn-muted);white-space:nowrap}
.sn-acct a{color:var(--sn-ink);text-decoration:none;border-bottom:1px solid var(--sn-line-2)}
.sn-acct .pill,.sn-acct .sn-pill{background:var(--sn-panel);border:1px solid var(--sn-line);border-radius:999px;padding:4px 10px;color:var(--sn-ink);font-weight:600}
.sn-cta{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;background:var(--sn-accent);color:var(--sn-accent-ink);font:700 .88rem/1 var(--sn-body);text-decoration:none;white-space:nowrap}
.sn-login{display:inline-flex;align-items:center;padding:9px 14px;border-radius:999px;border:1px solid var(--sn-line-2);color:var(--sn-ink);font:600 .85rem/1 var(--sn-body);text-decoration:none;white-space:nowrap}
.sn-login:hover{border-color:var(--sn-accent);color:var(--sn-accent)}
.sn-acct .acct:not([hidden])~.sn-login{display:none}
.sn-cta:hover{filter:brightness(1.06)}
@media (max-width:720px){.sn-head .sn-wrap{min-height:56px;gap:10px;flex-wrap:wrap;padding-block:8px}.sn-tabs{order:3;width:100%;margin:0}.sn-product{font-size:1.15rem}.sn-cta{padding:8px 12px;font-size:.8rem}.sn-acct .sn-email{display:none}}

.sn-foot{margin-top:56px;border-top:1px solid var(--sn-line);background:var(--sn-bg-2);color:var(--sn-muted);font-family:var(--sn-body);font-size:.88rem}
.sn-foot .sn-wrap{max-width:var(--sn-max);margin:0 auto;padding:36px var(--sn-gutter) 28px;display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sn-foot h4{margin:0 0 10px;font:700 .68rem/1 var(--sn-body);letter-spacing:.16em;text-transform:uppercase;color:var(--sn-ink)}
.sn-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sn-foot a{color:var(--sn-ink);text-decoration:none}
.sn-foot a:hover{color:var(--sn-accent)}
.sn-foot .sn-desc{display:block;color:var(--sn-muted);font-size:.8rem;margin-top:2px}
.sn-foot .sn-bottom{max-width:var(--sn-max);margin:0 auto;padding:16px var(--sn-gutter) 30px;border-top:1px solid var(--sn-line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.8rem}
.sn-foot .sn-word{font:900 clamp(2.4rem,9vw,7rem)/1 var(--sn-display);text-transform:uppercase;letter-spacing:.02em;color:rgba(255,255,255,.05);text-align:center;padding:0 var(--sn-gutter) 18px;user-select:none}
