/* ============================================================================
   Steward: public site layout only.
   The design language lives in ../design/theme.css (tokens + components).
   This file adds only what is specific to these marketing pages: the page
   shell, the hero, the "your server / our monitoring" diagram and the
   numbered steps.  Plain CSS, no JavaScript.
   ========================================================================= */

/* ---- page shell ---- */
main{
  padding:clamp(36px,6vw,72px) 0 8px;
}

/* reading measure for running text; components opt out in theme.css */
main p,
main ul,
main ol,
main dl,
main blockquote{
  max-width:var(--measure);
}

/* ---- headings: editorial scale, tighter than Pico's defaults ---- */
main h1{
  font-size:var(--text-4xl);
  line-height:1.05;
  letter-spacing:-.028em;
  font-weight:700;
  margin:0 0 var(--space-4);
  max-width:20ch;
  text-wrap:balance;          /* no short runt line on a display headline */
}
main h2{
  font-size:var(--text-3xl);
  line-height:1.2;
  letter-spacing:-.015em;
  font-weight:700;
  margin:clamp(44px,6vw,64px) 0 var(--space-4);
  max-width:44ch;
  text-wrap:balance;
}
main h3{
  font-size:var(--text-lg);
  letter-spacing:-.01em;
  margin:var(--space-5) 0 var(--space-2);
}

/* ---- page header used by the interior pages ---- */
.page-head{
  margin-bottom:var(--space-2);
  padding-bottom:var(--space-5);
  border-bottom:1px solid var(--border);
}
.page-head h1{ max-width:22ch; margin-bottom:var(--space-4); }
.page-head .lede{ margin-bottom:0; }

.lede{
  font-size:clamp(1.075rem,1rem + .35vw,1.25rem);
  line-height:1.5;
  color:var(--text-secondary);
  margin:0 0 var(--space-5);
  max-width:52ch;
}

/* ---- hero ---- */
.hero{
  display:grid;
  gap:clamp(30px,5vw,60px);
  align-items:center;
  margin-bottom:clamp(48px,7vw,84px);
}
@media (min-width:900px){
  .hero{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
}
.hero h1{ margin-bottom:var(--space-5); }
.hero .st-btn{ margin-top:var(--space-2); }

/* ---- diagram: your server / what we do ---- */
.diagram{
  margin:0;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:calc(var(--radius-md) + 4px);
  padding:clamp(20px,3vw,28px);
  box-shadow:var(--shadow-md);
}
.diagram .box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-4);
}
.box-head{
  display:flex; align-items:center; gap:var(--space-2);
  margin:0; font-size:var(--text-xs);
}
.led{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);
}
.box-title{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-secondary);
}
.rack{ display:grid; gap:7px; margin:var(--space-4) 0 0; }
.rack span{
  display:block; position:relative; height:30px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:linear-gradient(180deg,var(--surface),var(--bg-subtle));
}
.rack span::before{
  content:""; position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--primary);
}
/* vent slats, so a row reads as a unit in a rack rather than an empty field */
.rack span::after{
  content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:38%; height:11px; border-radius:3px;
  background-image:repeating-linear-gradient(90deg,var(--border-strong) 0 1px,transparent 1px 6px);
  opacity:.8;
}
.rack span:nth-child(2)::after{ width:30%; }
.rack span:nth-child(3)::after{ width:44%; }
.box-note{
  margin:var(--space-4) 0 0;
  font-size:.88rem; color:var(--text-muted); max-width:none;
}
.join{ display:flex; align-items:center; gap:var(--space-3); margin:var(--space-4) 2px; }
.join::before,.join::after{ content:""; flex:1; border-top:1px dashed var(--border-strong); }
.join span{
  font-family:var(--font-mono); font-size:var(--text-xs);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); white-space:nowrap;
}
.ops ul, .ops li{ list-style:none; }
.ops ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:7px; max-width:none;
}
.ops li{
  margin:0; padding:5px 11px;
  border:1px solid var(--border-strong); border-radius:var(--radius-pill);
  font-size:.83rem; color:var(--text-secondary); background:var(--surface);
}
.diagram figcaption{
  margin-top:var(--space-4);
  padding-top:var(--space-4);
  border-top:1px solid var(--border);
  font-size:var(--text-sm); color:var(--text-muted);
}

/* ---- numbered steps ---- */
ol.steps{
  counter-reset:step; list-style:none; padding-left:0;
  margin:var(--space-5) 0;
}
ol.steps > li{
  position:relative;
  padding-left:46px;
  margin:0 0 var(--space-5);
}
ol.steps > li::before{
  counter-increment:step;
  content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:.15em;
  width:30px; padding-top:4px;
  font-family:var(--font-mono); font-size:var(--text-sm); font-weight:600;
  color:var(--primary);
  border-top:2px solid var(--primary);
}
ol.steps > li p{ margin:0; }

/* ---- phones: put the nav on a tidy two-row grid instead of an orphan item ---- */
@media (max-width:480px){
  .st-topbar > .st-container{
    flex-direction:column; align-items:flex-start; gap:var(--space-3);
  }
  .st-nav{ width:100%; }
  .st-nav ul{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px var(--space-3);
  }
  .st-nav a{ font-size:var(--text-sm); }
}

@media (max-width:560px){
  .st-notice{ font-size:var(--text-xs); }
  /* only a table that is still a table: a stacked one is a block of cards */
  .st-table:not(.st-table-stack) td:first-child{ padding-right:var(--space-4); }
}