/* Landing-page-only styles (index.md).
   book.toml loads this file after site.css on EVERY page, not only the home
   page, so every selector here is scoped under `body:has(.superui-landing)`
   to keep it from winning specificity ties on the docs pages. */

body:has(.superui-landing) .su-landing-main {
  position: relative; z-index: 4; max-width: var(--su-app-max);
  margin: 0 auto; padding: clamp(24px, 3.5vw, 42px) var(--su-edge) 40px;
}

/* hero */
body:has(.superui-landing) .su-hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(28px, 4vw, 52px); align-items: start;
}
body:has(.superui-landing) .su-tickline {
  display: flex; align-items: center; gap: 10px; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .2em; color: var(--su-teal);
}
body:has(.superui-landing) .su-tickline > span {
  width: 26px; height: 1px; background: var(--su-teal);
}
body:has(.superui-landing) .su-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 4.4vw, 46px); line-height: 1.04; text-transform: uppercase;
  margin: 20px 0 0; color: var(--su-heading);
}
body:has(.superui-landing) .su-h1 .su-accent { color: var(--su-teal); }
body:has(.superui-landing) .su-tagline {
  font-size: 17px; line-height: 1.6; color: var(--su-body); max-width: 470px; margin: 20px 0 0;
}
body:has(.superui-landing) .su-tagline strong { color: var(--su-text); font-weight: 600; }
body:has(.superui-landing) .su-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
body:has(.superui-landing) .su-btn {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .1em;
  text-transform: uppercase; padding: 14px 24px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; display: inline-block;
}
body:has(.superui-landing) .su-btn-primary { color: var(--su-bg); background: var(--su-teal); }
body:has(.superui-landing) .su-btn-primary:hover { background: var(--su-teal-bright); }
body:has(.superui-landing) .su-btn-ghost {
  color: var(--su-text); background: transparent; border-color: var(--su-line);
}
body:has(.superui-landing) .su-btn-ghost:hover { border-color: var(--su-teal); color: var(--su-teal); }
body:has(.superui-landing) .su-stack {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 30px;
  padding-top: 16px; border-top: 1px solid var(--su-line-soft); font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .14em; color: var(--su-muted);
}
body:has(.superui-landing) .su-stack i { color: var(--su-teal); font-style: normal; }

/* code panel */
body:has(.superui-landing) .su-panel-label {
  display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 9px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .18em; color: var(--su-muted);
}
body:has(.superui-landing) .su-panel-label-end { margin-left: auto; }
body:has(.superui-landing) .su-frame {
  position: relative; border: 1px solid var(--su-line); background: rgba(7,26,40,.72);
}
body:has(.superui-landing) .su-frame::before,
body:has(.superui-landing) .su-frame::after {
  content: ""; position: absolute; width: 11px; height: 11px;
}
body:has(.superui-landing) .su-frame::before {
  top: -1px; left: -1px; border-top: 2px solid var(--su-teal); border-left: 2px solid var(--su-teal);
}
body:has(.superui-landing) .su-frame::after {
  bottom: -1px; right: -1px; border-bottom: 2px solid var(--su-teal); border-right: 2px solid var(--su-teal);
}
body:has(.superui-landing) .su-code {
  margin: 0; padding: 20px; font-family: var(--font-mono); font-size: 13px; line-height: 1.72;
  color: #b6cfdf; overflow: auto;
}
body:has(.superui-landing) .su-code .k { color: #8fb8ff; }
body:has(.superui-landing) .su-code .fn { color: var(--su-teal); }
body:has(.superui-landing) .su-code .tag { color: #9de8b4; }
body:has(.superui-landing) .su-code .attr { color: var(--su-teal); }
body:has(.superui-landing) .su-code .n { color: var(--su-amber); }

/* live preview */
body:has(.superui-landing) .su-live {
  border-top: 1px dashed rgba(220,233,242,.24); padding: 15px 20px 18px;
}
body:has(.superui-landing) .su-live > .su-tickline { margin-bottom: 12px; }
body:has(.superui-landing) .su-live-stage {
  position: relative; height: 150px; overflow: hidden; background: var(--su-bg-deep);
  border: 1px solid var(--su-line-soft);
}
body:has(.superui-landing) .su-counter-frame {
  width: 100%; height: 100%; border: 0; display: block; background: var(--su-bg-deep);
}
body:has(.superui-landing) .su-live-overlay {
  position: absolute; inset: 0; display: grid; place-items: center; background: var(--su-bg-deep);
  transition: opacity .3s;
}
body:has(.superui-landing) .su-live-overlay.su-hidden { opacity: 0; pointer-events: none; }
body:has(.superui-landing) .su-btn-reset {
  margin-top: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--su-body); background: transparent; border: 1px solid var(--su-line); padding: 11px 14px;
}

/* section head */
body:has(.superui-landing) .su-section-head {
  display: flex; align-items: center; gap: 14px; margin-top: 56px;
}
body:has(.superui-landing) .su-section-head h2 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2.2vw, 23px);
  letter-spacing: .12em; text-transform: uppercase; margin: 0; color: var(--su-heading);
}
body:has(.superui-landing) .su-section-head span {
  font-family: var(--font-mono); font-size: 10px; color: var(--su-dim);
}
body:has(.superui-landing) .su-dash {
  flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(220,233,242,.42) 0 7px, transparent 7px 14px);
  animation: bp-march 6s linear infinite;
}

/* feature callouts */
body:has(.superui-landing) .su-features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 30px;
}
body:has(.superui-landing) .su-feature {
  position: relative; border: 1px solid var(--su-line-soft); background: var(--su-panel);
  padding: 24px 20px 20px;
}
body:has(.superui-landing) .su-feature:hover {
  border-color: rgba(52,230,214,.5); background: rgba(52,230,214,.05);
}
/* .su-num is the one deliberate exception to the no-rounded-corners rule; the
   Task 1b reset only lists mdBook's own selectors, so no !important is needed. */
body:has(.superui-landing) .su-num {
  position: absolute; top: -15px; left: 18px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--su-bg); border: 1px solid var(--su-teal);
  color: var(--su-teal); font-family: var(--font-mono); font-weight: 600; font-size: 13px;
}
body:has(.superui-landing) .su-feature h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: .06em;
  text-transform: uppercase; margin: 12px 0 8px; color: var(--su-heading);
}
body:has(.superui-landing) .su-feature p {
  margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--su-body);
}
body:has(.superui-landing) .su-feature-tag {
  margin-top: 14px; padding-top: 11px; border-top: 1px dashed rgba(220,233,242,.2);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; color: var(--su-dim);
}

/* early-build note */
body:has(.superui-landing) .su-note {
  display: flex; align-items: stretch; margin-top: 32px; border: 1px solid var(--su-orange);
  background: rgba(255,138,107,.07);
}
body:has(.superui-landing) .su-note-rail {
  width: 44px; flex: 0 0 44px; display: grid; place-items: center;
  border-right: 1px solid rgba(255,138,107,.5); font-family: var(--font-mono); font-weight: 600;
  font-size: 15px; color: var(--su-orange);
}
body:has(.superui-landing) .su-note-body { padding: 16px 20px; }
body:has(.superui-landing) .su-note-title {
  font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--su-orange);
}
body:has(.superui-landing) .su-note-body p {
  margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: #c2d4e0; max-width: 780px;
}
body:has(.superui-landing) .su-note-body a { color: var(--su-orange); }

/* mdBook chrome.css `.content a:link` (specificity 0,2,1) recolors every content
   link to --links (teal). These landing links are <a> elements inside #content,
   so restore their intended colors at matching specificity (landing.css loads
   after chrome.css, so an equal-specificity rule wins). */
body:has(.superui-landing) .su-btn-primary { color: var(--su-bg); }
body:has(.superui-landing) .su-btn-ghost { color: var(--su-text); }
body:has(.superui-landing) .su-note-body a { color: var(--su-orange); }