/* GENERATED by tools/extract-design.mjs from the approved design prototype.
 * Do not edit by hand: edit design/design/Screaming Llama Studios.dc.html
 * and re-run `node tools/extract-design.mjs`. */

html, body { margin: 0; padding: 0; }
  body { background: #100c14; color: #f8f0d8; font-family: "Jost", system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
  * { box-sizing: border-box; }
  a { color: #d8ab4c; text-decoration: none; }
  a:hover { color: #f8f0d8; }
  ::selection { background: rgba(208,160,64,.3); }
  input, textarea, button { font-family: inherit; }
  :focus-visible { outline: 2px solid #d8ab4c; outline-offset: 3px; border-radius: 2px; }
  [data-burger], [data-mobile-nav] { display: none; }
  @media (max-width: 1260px) {
    [data-header] > div { padding: 0 26px !important; }
    [data-palette-label] { display: none !important; }
  }
  @media (max-width: 1280px) {
    [data-palette-swatches], [data-palette-rule] { display: none !important; }
  }
  @media (max-width: 1180px) {
    [data-ob-grid] { grid-template-columns: minmax(0,1fr) !important; }
    [data-ob-aside] { position: static !important; top: auto !important; }
  }
  @media (max-width: 1080px) {
    [data-desk-nav] { display: none !important; }
    [data-burger] { display: grid !important; }
    [data-mobile-nav] { display: block !important; }
    [data-header] > div { height: 82px !important; padding: 0 20px !important; }
    [data-header] img { width: 168px !important; }
  }
  @media (max-width: 860px) {
    [data-srow] { grid-template-columns: 1fr !important; gap: 14px !important; }
    [data-srow] > span { font-size: 34px !important; }
    [data-step] { grid-template-columns: 1fr !important; gap: 10px !important; }
    [data-ob-service] { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 720px) {
    [data-pad="hero"] { padding: 36px 22px 42px !important; }
    [data-pad="page"] { padding: 46px 22px 26px !important; }
    [data-pad="body"] { padding: 26px 22px 48px !important; }
    [data-pad="band"] { padding: 36px 22px !important; }
    [data-pad="split"] { padding: 46px 22px 48px !important; gap: 44px !important; }
    [data-pad="card"] { padding: 62px 22px 70px !important; }
    [data-footer-grid] { grid-template-columns: 1fr !important; gap: 36px !important; }
    [data-legal-row] { flex-direction: column !important; align-items: flex-start !important; }
    [data-addon] { grid-template-columns: 1fr !important; }
    [data-ob-grid] { padding: 26px 22px 54px !important; }
    [data-ob-form] > div:last-child > button { flex: 1 1 auto; }
    [data-cd-grid] { grid-template-columns: 1fr !important; }
  }
  @media (max-width: 980px) {
    [data-cd-grid] { grid-template-columns: 1fr !important; }
  }
  @keyframes sls-pulse { 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.5); opacity: .5 } }
  @keyframes sls-page-in { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
  /* Tab swaps must never let the browser re-anchor the scroll position. */
  [data-panel], [data-legal], [data-ob-step] { overflow-anchor: none }
  @media (prefers-reduced-motion: reduce) { [data-panel] { animation: none !important } }
  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }

/* GENERATED by tools/extract-design.mjs. Do not edit by hand.
 * Hover and focus states lifted from the design prototype, which carried
 * them in style-hover / style-focus attributes no browser reads.
 * !important is required: each one overrides an inline style. */
[data-sx="sx0"]:hover { color:var(--gold-text) !important; }
[data-sx="sx1"]:hover { transform:scale(1.12) !important; }
[data-sx="sx2"]:hover { transform:translateY(-2px) !important; box-shadow:0 10px 22px rgba(200,144,56,.3) !important; }
[data-sx="sx3"]:hover { border-color:var(--gold) !important; color:var(--gold-text) !important; }
[data-sx="sx4"]:hover { transform:translateY(-2px) !important; box-shadow:0 14px 30px rgba(32,16,32,.18) !important; }
[data-sx="sx5"]:hover { transform:translateY(-6px) !important; box-shadow:0 22px 46px rgba(32,16,32,.12) !important; }
[data-sx="sx6"]:hover { transform:translateY(-6px) !important; box-shadow:0 22px 46px rgba(32,16,32,.16) !important; }
[data-sx="sx7"]:hover { transform:translateY(-2px) !important; box-shadow:0 14px 30px rgba(200,144,56,.32) !important; }
[data-sx="sx8"]:hover { transform:translateY(-6px) !important; box-shadow:0 22px 46px rgba(32,16,32,.14) !important; border-color:var(--gold) !important; }
[data-sx="sx9"]:hover { transform:translateX(4px) !important; }
[data-sx="sx10"]:focus, [data-sx="sx10"]:focus-visible { border-color:var(--gold) !important; }
[data-sx="sx11"]:hover { color:var(--ink) !important; }
[data-sx="sx12"]:hover { border-color:var(--gold) !important; }
[data-sx="sx13"]:hover { transform:translateY(-2px) !important; }
[data-sx="sx14"]:hover { border-color:var(--gold) !important; color:var(--ink) !important; }
[data-sx="sx15"]:hover { transform:translateY(-2px) scale(1.05) !important; box-shadow:0 12px 24px rgba(200,144,56,.34) !important; }