/* STLBEAST V900 — Visual-first guide system + SEO presentation */
:root{
  --v900-bg:#020711;
  --v900-panel:#06111d;
  --v900-panel-2:#0a1a2b;
  --v900-line:#1d496b;
  --v900-line-hot:#1caef6;
  --v900-blue:#22b5ff;
  --v900-blue-soft:#9cddff;
  --v900-text:#f5f9fd;
  --v900-muted:#a8bfd0;
  --v900-green:#5cdfa3;
  --v900-gold:#ffc95c;
  --v900-red:#ff7773;
  --v900-shadow:0 28px 80px rgba(0,0,0,.42);
  --v900-radius:24px;
}

/* Always keep a strong visual in the guide hero, including premium poster guides. */
.v900-guide .v663-hero-grid.v767-hero-copy-only{
  display:grid!important;
  grid-template-columns:minmax(0,1.04fr) minmax(330px,.78fr)!important;
  gap:26px!important;
  align-items:stretch!important;
}
.v900-guide .v900-hero-media{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--v900-line-hot) 48%,#0b2438);
  border-radius:var(--v900-radius);
  background:
    radial-gradient(circle at 80% 10%,rgba(27,165,242,.18),transparent 34%),
    linear-gradient(150deg,#071523,#020711 75%);
  box-shadow:var(--v900-shadow),inset 0 0 0 1px rgba(255,255,255,.035);
}
.v900-guide .v900-hero-media>a{display:block;height:100%;min-height:410px;background:#020711}
.v900-guide .v900-hero-media img{
  display:block;
  width:100%;
  height:100%;
  min-height:410px;
  max-height:640px;
  object-fit:cover;
  object-position:center;
  filter:saturate(.98) contrast(1.03);
  transition:transform .35s ease,filter .35s ease;
}
.v900-guide .v900-hero-media.is-poster img{object-position:center 12%}
.v900-guide .v900-hero-media:hover img{transform:scale(1.018);filter:saturate(1.06) contrast(1.04)}
.v900-guide .v900-hero-media .v728-visual-proof{
  z-index:2;
  backdrop-filter:blur(12px);
  background:rgba(2,7,17,.82);
  border-color:rgba(42,181,255,.55);
}
.v900-guide .v900-hero-media figcaption{
  display:grid;
  gap:5px;
  position:absolute;
  z-index:2;
  left:14px;
  right:14px;
  bottom:14px;
  padding:14px 16px;
  border:1px solid rgba(45,158,216,.4);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(2,7,17,.92),rgba(5,19,31,.88));
  backdrop-filter:blur(14px);
  box-shadow:0 14px 32px rgba(0,0,0,.35);
}
.v900-guide .v900-hero-media figcaption strong{color:var(--v900-text);font-size:.98rem}
.v900-guide .v900-hero-media figcaption span{color:var(--v900-muted);font-size:.86rem;line-height:1.45}

/* Consistent visual repair route on every shared guide. */
.v900-visual-route{
  margin-top:22px!important;
  padding:24px!important;
  border:1px solid var(--v900-line);
  border-radius:var(--v900-radius);
  background:
    linear-gradient(135deg,rgba(8,25,41,.98),rgba(2,7,17,.98)),
    radial-gradient(circle at 100% 0,rgba(34,181,255,.16),transparent 38%);
  box-shadow:var(--v900-shadow);
}
.v900-visual-route-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,.52fr);
  gap:20px;
  align-items:end;
  margin-bottom:20px;
}
.v900-visual-route-head h2{margin:.25rem 0 .45rem;color:var(--v900-text);font-size:clamp(1.45rem,2.4vw,2.15rem)}
.v900-visual-route-head p{margin:0;color:var(--v900-muted);max-width:760px;line-height:1.58}
.v900-target-chip{
  display:grid;
  gap:5px;
  align-self:stretch;
  padding:15px 17px;
  border:1px solid rgba(92,223,163,.42);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(16,67,57,.4),rgba(4,17,24,.78));
}
.v900-target-chip span{color:var(--v900-green);font-size:.72rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.v900-target-chip b{color:var(--v900-text);font-size:.94rem;line-height:1.42}
.v900-step-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.v900-step-tile{
  position:relative;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:8px;
  min-height:205px;
  padding:16px;
  color:var(--v900-text);
  text-decoration:none;
  border:1px solid rgba(35,143,199,.52);
  border-radius:19px;
  background:
    radial-gradient(circle at 50% -10%,rgba(35,181,255,.22),transparent 45%),
    linear-gradient(155deg,#0a1d2e,#030914 76%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 12px 28px rgba(0,0,0,.24);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.v900-step-tile:hover,.v900-step-tile:focus-visible{
  transform:translateY(-3px);
  border-color:var(--v900-blue);
  box-shadow:0 16px 36px rgba(0,94,157,.25),inset 0 0 24px rgba(25,167,241,.06);
}
.v900-step-tile.is-current{border-color:var(--v900-gold);box-shadow:0 0 0 2px rgba(255,201,92,.12),0 18px 40px rgba(0,0,0,.3)}
.v900-step-tile.is-complete{border-color:rgba(92,223,163,.65);background:linear-gradient(150deg,rgba(12,60,48,.65),#030914 82%)}
.v900-step-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(34,181,255,.7);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(32,173,246,.24),rgba(4,15,27,.82));
  box-shadow:0 0 22px rgba(27,168,244,.16);
}
.v900-step-icon svg{width:31px;height:31px;fill:none;stroke:var(--v900-blue-soft);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.v900-step-tile small{color:var(--v900-blue);font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.v900-step-tile b{font-size:.94rem;line-height:1.45}
.v900-step-tile em{color:var(--v900-blue-soft);font-style:normal;font-size:.82rem;font-weight:800}

/* More premium full-size visual poster presentation. */
.v900-guide .v763-poster-card{
  overflow:hidden;
  border-color:rgba(34,181,255,.48)!important;
  background:linear-gradient(145deg,#071625,#020711 74%)!important;
  box-shadow:var(--v900-shadow)!important;
}
.v900-guide .v763-poster-head{max-width:920px}
.v900-guide .v763-poster-head p{color:var(--v900-muted);line-height:1.65}
.v900-guide .v763-poster-zoom{
  display:block;
  max-width:920px;
  margin:20px auto 0;
  overflow:hidden;
  border:1px solid rgba(50,177,239,.52);
  border-radius:22px;
  box-shadow:0 26px 65px rgba(0,0,0,.48);
}
.v900-guide .v763-poster-zoom img{display:block;width:100%;height:auto}

/* Guide library visual highlights. */
.v900-featured-visuals,.v900-library-seo{position:relative}
.v900-featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.v900-featured-card{
  display:grid;
  grid-template-columns:minmax(120px,.52fr) minmax(0,1fr);
  min-height:320px;
  overflow:hidden;
  color:var(--v900-text);
  text-decoration:none;
  border:1px solid var(--v900-line);
  border-radius:22px;
  background:linear-gradient(145deg,#081828,#020711 78%);
  box-shadow:0 22px 58px rgba(0,0,0,.34);
  transition:transform .22s ease,border-color .22s ease;
}
.v900-featured-card:hover,.v900-featured-card:focus-visible{transform:translateY(-4px);border-color:var(--v900-blue)}
.v900-featured-card figure{margin:0;min-height:100%;overflow:hidden;background:#020711}
.v900-featured-card figure img{display:block;width:100%;height:100%;min-height:320px;object-fit:cover;object-position:center top;transition:transform .3s ease}
.v900-featured-card:hover figure img{transform:scale(1.025)}
.v900-featured-card>div{display:flex;flex-direction:column;justify-content:center;padding:22px}
.v900-featured-card span{color:var(--v900-blue);font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.v900-featured-card h3{margin:.45rem 0 .6rem;font-size:1.24rem}
.v900-featured-card p{margin:0;color:var(--v900-muted);line-height:1.55}
.v900-featured-card strong{margin-top:18px;color:var(--v900-blue-soft)}
.v900-seo-copy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v900-seo-copy p{
  margin:0;
  padding:20px;
  color:var(--v900-muted);
  line-height:1.68;
  border:1px solid var(--v900-line);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(8,25,41,.88),rgba(2,7,17,.94));
}

/* Visual Answer Engine: full visual map plus crawlable detail. */
.v900-fix-engine{color:var(--v900-text)}
.v900-fixes-overview{
  display:grid!important;
  grid-template-columns:minmax(0,.7fr) minmax(330px,1fr);
  gap:26px;
  align-items:center;
  padding:28px!important;
  border:1px solid var(--v900-line)!important;
  border-radius:var(--v900-radius)!important;
  background:
    radial-gradient(circle at 90% 0,rgba(34,181,255,.14),transparent 36%),
    linear-gradient(145deg,#071726,#020711 76%)!important;
  box-shadow:var(--v900-shadow);
}
.v900-fixes-overview-copy h2{margin:.35rem 0 .7rem;font-size:clamp(1.7rem,3vw,2.65rem);line-height:1.05;color:var(--v900-text)}
.v900-fixes-overview-copy p{color:var(--v900-muted);line-height:1.68;max-width:620px}
.v900-fixes-poster{
  display:block;
  max-height:720px;
  overflow:hidden;
  border:1px solid rgba(38,171,236,.58);
  border-radius:22px;
  background:#020711;
  box-shadow:0 28px 65px rgba(0,0,0,.48);
}
.v900-fixes-poster img{display:block;width:100%;height:720px;object-fit:cover;object-position:center top;transition:transform .3s ease}
.v900-fixes-poster:hover img{transform:scale(1.018)}
.v900-fix-seo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v900-fix-seo-grid article{
  padding:22px;
  border:1px solid var(--v900-line);
  border-radius:19px;
  background:linear-gradient(145deg,#081827,#030914 80%);
}
.v900-fix-seo-grid h3{margin:0 0 .65rem;color:var(--v900-text);font-size:1.12rem}
.v900-fix-seo-grid p{margin:0;color:var(--v900-muted);line-height:1.65}

/* Ensure the Fixes page receives the V896/V898 presentation even though it uses the tool shell. */
.v900-fix-engine .v898-fix-thumb img{object-fit:cover}
.v900-fix-engine .v895-fix-card{overflow:hidden}
.v900-fix-engine .v895-fix-card.is-exact-match{border-color:var(--v900-gold);box-shadow:0 0 0 2px rgba(255,201,92,.1),0 18px 46px rgba(0,0,0,.32)}

@media (max-width:1100px){
  .v900-guide .v663-hero-grid.v767-hero-copy-only{grid-template-columns:1fr!important}
  .v900-guide .v900-hero-media>a,.v900-guide .v900-hero-media img{min-height:390px;max-height:590px}
  .v900-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v900-featured-grid{grid-template-columns:1fr}
  .v900-featured-card{grid-template-columns:minmax(180px,.45fr) 1fr}
  .v900-seo-copy,.v900-fix-seo-grid{grid-template-columns:1fr}
  .v900-fixes-overview{grid-template-columns:1fr}
  .v900-fixes-poster{max-height:620px}
  .v900-fixes-poster img{height:620px}
}
@media (max-width:720px){
  .v900-guide .v900-hero-media>a,.v900-guide .v900-hero-media img{min-height:330px;max-height:480px}
  .v900-guide .v900-hero-media figcaption{position:relative;left:auto;right:auto;bottom:auto;margin:0;border-width:1px 0 0;border-radius:0;background:#06111d}
  .v900-visual-route{padding:18px!important;border-radius:19px}
  .v900-visual-route-head{grid-template-columns:1fr}
  .v900-step-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:5px}
  .v900-step-tile{min-width:min(82vw,300px);scroll-snap-align:start}
  .v900-featured-card{grid-template-columns:1fr}
  .v900-featured-card figure img{height:360px;min-height:360px}
  .v900-fixes-overview{padding:18px!important;border-radius:20px!important}
  .v900-fixes-poster,.v900-fixes-poster img{height:520px;max-height:520px}
}
@media (prefers-reduced-motion:reduce){
  .v900-guide .v900-hero-media img,.v900-step-tile,.v900-featured-card,.v900-featured-card figure img,.v900-fixes-poster img{transition:none!important}
}
@media print{
  .v900-step-tile,.v900-visual-route,.v900-featured-card,.v900-fixes-overview{box-shadow:none!important}
  .v900-guide .v900-hero-media img{max-height:none!important;object-fit:contain!important}
}