/* The Simple Series products hub — cool charcoal canvas, yellow/orange accents. */

.simple-series-hub{
  --ss-bg:#16141c;
  --ss-panel:#1e1b26;
  --ss-ink:#f4f3f7;
  --ss-muted:#aca8b6;
  --ss-yellow:#f2c94c;
  --ss-orange:#ee8c4b;
  --ss-line:rgba(244,243,247,.16);
  --ss-ink-rgb:244,243,247;
  --ss-orange-rgb:238,140,75;
  --bg:var(--ss-bg);
  --surface:var(--ss-panel);
  --text:var(--ss-ink);
  --muted:var(--ss-muted);
  --coral:var(--ss-orange);
  --line:var(--ss-line);
  background:var(--ss-bg);
  color:var(--ss-ink);
  color-scheme:dark;
}

.simple-series-hub .site-header,
.simple-series-hub .site-footer{
  background:var(--ss-bg);
  border-color:var(--ss-line);
}

.simple-series-hub .site-header .brand>span,
.simple-series-hub .site-footer .brand>span{
  font-family:var(--sysreon-font-display);
  color:var(--ss-ink);
}

.simple-series-hub .brand small,
.simple-series-hub .footer-bottom,
.simple-series-hub .footer-bottom button{
  color:var(--ss-muted);
}

.simple-series-hub nav>a:hover,
.simple-series-hub nav>a[aria-current],
.simple-series-hub .site-footer a:hover,
.simple-series-hub .footer-bottom button:hover{
  color:var(--ss-orange);
}

.simple-series-hub .nav-cta{
  border-color:var(--ss-line);
  color:var(--ss-ink);
}

.simple-series-hub .nav-cta:hover{
  border-color:var(--ss-orange);
  background:var(--ss-orange);
  color:var(--ss-bg);
}

.simple-series-hub .menu-toggle{
  color:var(--ss-ink);
  border-color:var(--ss-line);
}

.simple-series-hub :focus-visible{
  outline:2px solid var(--ss-yellow);
  outline-offset:6px;
}

.simple-series-hub .skip{
  background:var(--ss-yellow);
  color:var(--ss-bg);
}

.simple-series-hub ::selection{
  background:var(--ss-orange);
  color:var(--ss-bg);
}

.ss-intro{
  max-width:1440px;
  margin:0 auto;
  padding:56px 48px 28px;
}

.ss-intro .back-link{
  display:inline-block;
  color:var(--ss-orange);
  font-size:13px;
  margin-bottom:28px;
}

.ss-intro .back-link:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}

.ss-mark{
  display:block;
  width:72px;
  height:72px;
  border-radius:22%;
  margin-bottom:22px;
  object-fit:contain;
}

.simple-series-hub h1{
  font-family:var(--sysreon-font-display);
  font-weight:600;
  font-size:clamp(40px,5.4vw,72px);
  letter-spacing:-.045em;
  line-height:1.08;
  color:var(--ss-ink);
  -webkit-text-fill-color:unset;
  background:none;
}

.ss-lead{
  margin:18px 0 0;
  max-width:40rem;
  font-size:20px;
  line-height:1.65;
  color:var(--ss-muted);
}

.ss-tiers{
  margin:16px 0 0;
  max-width:46rem;
  font-size:16px;
  line-height:1.7;
  color:var(--ss-ink);
}

.ss-catalog{
  max-width:1440px;
  margin:0 auto;
  padding:12px 48px 8px;
}

.ss-group{
  margin:0 0 48px;
  padding-top:28px;
  border-top:1px solid var(--ss-line);
}

.simple-series-hub .ss-group h2{
  font-family:var(--sysreon-font-display);
  font-weight:600;
  font-size:clamp(22px,2.2vw,28px);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ss-yellow);
  margin:0 0 20px;
}

.simple-series-hub .ss-group h2::after{
  content:"";
  display:block;
  width:36px;
  height:3px;
  margin-top:10px;
  background:var(--ss-yellow);
}

.ss-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}

.ss-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:148px;
  padding:22px 22px 20px;
  background:var(--ss-panel);
  border:1px solid var(--ss-line);
  border-left:3px solid var(--ss-yellow);
  border-radius:6px;
  color:var(--ss-ink);
  text-decoration:none;
  transition:border-color .2s,transform .2s,background .2s;
}

.ss-card:hover,
.ss-card:focus-visible{
  border-color:var(--ss-orange);
  background:#24212c;
  transform:translateY(-2px);
}

.simple-series-hub .ss-card h3{
  font-family:var(--sysreon-font-body);
  font-weight:600;
  font-size:18px;
  letter-spacing:-.015em;
  line-height:1.3;
  color:var(--ss-ink);
  margin:0;
}

.simple-series-hub .ss-card p{
  margin:0;
  font-size:15px;
  line-height:1.55;
  color:var(--ss-muted);
}

.ss-close{
  max-width:1440px;
  margin:0 auto 24px;
  padding:8px 48px 72px;
  font-size:16px;
  line-height:1.6;
  color:var(--ss-muted);
}

@media (max-width:1100px){
  .ss-intro,
  .ss-catalog,
  .ss-close{
    padding-left:28px;
    padding-right:28px;
  }
}

@media (max-width:800px){
  .ss-intro{
    padding:40px 22px 16px;
  }
  .ss-catalog,
  .ss-close{
    padding-left:22px;
    padding-right:22px;
  }
  .ss-lead{font-size:17px}
  .ss-tiers{font-size:15px}
  .ss-grid{grid-template-columns:1fr}
  .ss-card{min-height:0}
  .ss-close{padding-bottom:48px}
}

@media (prefers-reduced-motion:reduce){
  .simple-series-hub,
  .simple-series-hub *,
  .simple-series-hub *:before,
  .simple-series-hub *:after{
    animation:none !important;
    transition:none !important;
  }
  .ss-card:hover,
  .ss-card:focus-visible{
    transform:none;
  }
}

html[data-motion=off] .simple-series-hub,
html[data-motion=off] .simple-series-hub *,
html[data-motion=off] .simple-series-hub *:before,
html[data-motion=off] .simple-series-hub *:after{
  animation:none !important;
  transition:none !important;
}

html[data-motion=off] .ss-card:hover,
html[data-motion=off] .ss-card:focus-visible{
  transform:none;
}