/* Kitted style guides: monochrome Kitted palette, ISOLATED to /stylist/guides/*.
   Mirrors the scoped styles on /stylist/. si187 brand mark kept as-is in nav/footer. */
:root {
  --bg: #0A0A0A; --bg-card: #141414; --bg-raised: #1A1A1A; --bg-border: #262626;
  --green: #FFFFFF; --green-dim: #BDBDBD;
  --magenta: #9A9A9A; --magenta-dim: #6B6B6B;
  --text1: #FFFFFF; --text2: #A3A3A3; --text3: #8A8A8A;
  --st-gold: #FFFFFF; --st-line: rgba(255,255,255,0.18);
}
.st-light { background: #F4F3F0; color: #0A0A0A; --text1: #0A0A0A; --text2: #4A4A4A; --text3: #767676; --bg-card: #FFFFFF; --bg-border: #E2E0DB; --st-gold: #0A0A0A; --st-line: rgba(0,0,0,0.15); }
.nav-cta { color: #0A0A0A !important; }
body { background: var(--bg); overflow-x: hidden; }
.st-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--st-gold); display: block; margin-bottom: 18px; }
.st-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.st-section { padding: 96px 0; border-top: 1px solid var(--bg-border); }
.st-h2 { font-family: 'Inter Tight', 'Helvetica Neue', sans-serif; font-weight: 500; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -1.6px; color: var(--text1); margin-bottom: 20px; }
.st-h2 em { font-style: normal; color: var(--text3); }
.st-lede { font-size: 17px; line-height: 1.75; color: var(--text2); max-width: 620px; }
.st-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--text1); color: var(--bg); font-weight: 600; font-size: 14px; letter-spacing: 0.3px; padding: 15px 28px; border-radius: 100px; text-decoration: none; transition: opacity .2s; }
.st-btn:hover { opacity: .85; }
.st-light .st-btn { color: #F4F3F0; }
.st-btn-ghost { background: transparent; color: var(--text1); border: 1px solid var(--bg-border); margin-left: 10px; }
.st-light .st-btn-ghost { color: var(--text1); }
.st-btn-ghost:hover { background: var(--bg-card); }

/* Kitted brand bar (sits under the fixed studio nav) */
.kt-bar { padding-top: 66px; background: var(--bg); }
.kt-bar-in { max-width: 1180px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--bg-border); }
.kt-brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.kt-word { font-family: 'Inter Tight', 'Helvetica Neue', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: 5px; text-transform: uppercase; color: #FFFFFF; text-decoration: none; line-height: 1; }
.kt-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #8A8A8A; }
.kt-links { display: flex; gap: 22px; }
.kt-links a { font-size: 13px; font-weight: 500; color: #A3A3A3; text-decoration: none; }
.kt-links a:hover, .kt-links a[aria-current="page"] { color: #FFFFFF; }

/* Guide hero */
.g-hero { position: relative; overflow: hidden; }
.g-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 70% at 80% 30%, rgba(255,255,255,0.05) 0%, transparent 70%); pointer-events: none; }
.g-narrow { max-width: 820px; }
.g-hero .st-wrap { position: relative; padding-top: 56px; padding-bottom: 72px; }
.g-crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; padding: 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); }
.g-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--text3); }
.g-crumbs a { color: var(--text2); text-decoration: none; }
.g-crumbs a:hover { color: var(--text1); }
.g-h1 { font-family: 'Inter Tight', 'Helvetica Neue', sans-serif; font-weight: 500; font-size: clamp(40px, 6vw, 76px); line-height: 1; letter-spacing: -2.4px; color: var(--text1); margin-bottom: 24px; }
.g-aim { font-family: 'Inter Tight', 'Helvetica Neue', sans-serif; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; letter-spacing: -0.3px; color: var(--text2); max-width: 680px; }
.g-meta { margin-top: 28px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); }

/* Guide body */
.g-body { padding: 72px 0 96px; }
.g-body p, .g-body li, .g-body dd { font-size: 17px; line-height: 1.75; color: var(--text2); }
.g-intro { font-size: 18px !important; color: var(--text1) !important; margin-bottom: 8px; }
.g-body h2 { font-family: 'Inter Tight', 'Helvetica Neue', sans-serif; font-weight: 500; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.8px; line-height: 1.15; color: var(--text1); margin: 56px 0 20px; }
.g-pieces { border-top: 1px solid var(--bg-border); margin: 0; }
.g-piece { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--bg-border); }
.g-piece dt { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text1); padding-top: 6px; }
.g-piece dd { margin: 0; }
.g-avoid { list-style: none; padding: 0; margin: 0; }
.g-avoid li { position: relative; padding: 10px 0 10px 32px; border-bottom: 1px solid var(--bg-border); }
.g-avoid li::before { content: "\00D7"; position: absolute; left: 4px; top: 8px; font-size: 20px; color: var(--text3); }
.g-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.g-look { background: var(--bg-card); border: 1px solid var(--bg-border); border-radius: 16px; padding: 28px; }
.g-look .st-eyebrow { margin-bottom: 12px; }
.g-look p { font-size: 16px !important; }
.g-faq h3 { font-size: 17px; font-weight: 600; color: var(--text1); margin: 24px 0 6px; }
.g-cta { margin-top: 64px; background: #0A0A0A; color: #FFFFFF; border-radius: 20px; padding: 40px; }
.g-cta .st-eyebrow { color: #FFFFFF; }
.g-cta h2 { color: #FFFFFF !important; margin-top: 0 !important; }
.g-cta p { color: #A3A3A3 !important; margin-bottom: 28px; max-width: 560px; }
.g-cta .st-btn { background: #FFFFFF; color: #0A0A0A; }
.g-cta .st-btn-ghost { background: transparent; color: #FFFFFF; border-color: #3A3A3A; }
.g-cta .st-small { font-size: 12px !important; color: #8A8A8A !important; margin: 20px 0 0; }
.g-cta .st-small a { color: #D0D0D0; }
.g-more { margin-top: 56px; }
.g-more ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.g-more a { display: inline-block; font-size: 14px; color: var(--text1); text-decoration: none; border: 1px solid var(--bg-border); background: var(--bg-card); border-radius: 100px; padding: 9px 16px; }
.g-more a:hover { border-color: var(--text1); }

/* Hub */
.g-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.g-card { display: flex; flex-direction: column; gap: 10px; background: var(--bg-card); border: 1px solid var(--bg-border); border-radius: 16px; padding: 28px; text-decoration: none; transition: border-color .2s; }
.g-card:hover { border-color: var(--text1); }
.g-card b { font-family: 'Inter Tight', 'Helvetica Neue', sans-serif; font-weight: 500; font-size: 22px; letter-spacing: -0.5px; color: var(--text1); }
.g-card span { font-size: 15px; line-height: 1.6; color: var(--text2); }
.g-card i { font-style: normal; margin-top: auto; padding-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text3); }
.g-group + .g-group { margin-top: 72px; }
.g-app { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 64px; align-items: center; }
.g-app img { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; border-radius: 28px; border: 1px solid var(--bg-border); }
.g-app .st-lede { margin-bottom: 32px; }
.g-note { font-size: 13px; color: var(--text3); margin-top: 16px; line-height: 1.6; }

@media (max-width: 900px) {
  .kt-bar { padding-top: 77px; }
  .kt-bar-in { padding: 14px 16px; }
  .st-wrap { padding: 0 16px; }
  .g-hero .st-wrap { padding-top: 40px; padding-bottom: 56px; }
  .g-cards { grid-template-columns: 1fr 1fr; }
  .g-app { grid-template-columns: 1fr; gap: 40px; }
  .st-section { padding: 72px 0; }
}
@media (max-width: 600px) {
  .kt-tag { display: none; }
  .kt-bar-in { flex-wrap: nowrap; }
  .kt-word { font-size: 18px; letter-spacing: 4px; }
  .kt-links { gap: 14px; }
  .kt-links a { font-size: 12px; }
  .g-piece { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .g-pair, .g-cards { grid-template-columns: 1fr; }
  .g-cta { padding: 28px 22px; }
  .st-btn-ghost { margin-left: 0; margin-top: 10px; }
  .g-body { padding: 56px 0 72px; }
}