/* Astra (/astra/), the hosted Class 4 carrier platform, in the Graphite look of site.css. The shared header
   takes Astra's identity from the chrome tokens below; the hero is the scaffold's .cover with the routed-trail
   grid (/assets/field-astra.js) as its background. The one availability chip (Early access) is
   moonlight, never green: green is Astra's brand accent. FIG. 1 (astra/fig-portal.webp) is a 2x render of the design's Home.dc.html at
   1440 px wide, top 800 px, grid overlay off, with neutral sample names (VENDOR-A, Reseller A), the LIVE pill
   relabelled SAMPLE, and no rates, addresses or node names in the event stream. */
body[data-page="astra"]{--chrome-bg:rgba(10,11,13,.6);--chrome-menu-bg:#0a0b0d;--chrome-fg:#eceef1;--chrome-dim:#a9afb8;--chrome-line:#1f2226;--chrome-accent:#5ee0a0;--chrome-on-accent:#0a0b0d;--chrome-mark:#eceef1;--t3:#7a818b}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* chips: amber and neutral kept for sample states; "ea" is the early access label */
.chip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:3px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;vertical-align:middle}
.chip.dev{color:var(--wn);background:rgba(232,176,74,.08);border:1px solid rgba(232,176,74,.42)}
.chip.plan{color:var(--t2);background:transparent;border:1px solid var(--sep)}
.chip.ea{color:#eceef1;background:rgba(236,238,241,.06);border:1px solid rgba(236,238,241,.4)}
.addr-t{font-family:var(--mono);font-size:.92em;color:var(--t1)}

/* hero: the full-bleed cover; the canvas fills it and fades out at the bottom */
.hero{padding-block:88px 80px;gap:64px;align-items:end}
.hero-l{display:flex;flex-direction:column;gap:28px}
.lockup{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 -8px;font-size:17px;letter-spacing:-.01em;color:var(--t1)}
.lockup b{font-weight:600}
.lockup .by{font-size:12px;color:var(--label);padding-left:10px;margin-left:2px;border-left:1px solid var(--btn-ln);white-space:nowrap}
.lockup .chip{margin-left:6px}
h1{font-size:clamp(46px,6vw,80px);line-height:1;letter-spacing:-.04em;color:var(--t0)}
.hero-r{display:flex;flex-direction:column;gap:24px;padding-bottom:6px}
.lede{font-size:18px;line-height:1.55;color:var(--t2);max-width:460px;text-wrap:pretty}
.specs{display:grid;grid-template-columns:120px 1fr;margin:0;border-top:1px solid var(--ln3);font-size:13px}
.specs dt,.specs dd{margin:0;padding:10px 0;border-bottom:1px solid var(--ln1)}
.specs dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--t3)}
.specs dd{color:var(--val)}

/* product figure */
.fig{position:relative;max-width:1264px;margin:0 auto;padding-inline:var(--gutter)}
.fig-frame{position:relative;aspect-ratio:1200/640;border:1px solid var(--frame);border-radius:8px;overflow:hidden;background:var(--bg)}
.fig-frame img{display:block;width:100%;height:auto}
.fig-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:31%;background:linear-gradient(180deg,rgba(10,11,13,0),var(--bg))}
.fig figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 2px 0;font-family:var(--mono);font-size:11px;color:var(--t3)}

/* features */
.feats{position:relative;padding-top:140px}
.feats-head{gap:64px;padding-bottom:56px}
.feats-head h2,.status-head h2{font-size:clamp(32px,3.6vw,46px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.feats-head p,.status-head p{align-self:end;font-size:17px;color:var(--t2);max-width:480px}
.feat{gap:48px;padding-block:48px;border-top:1px solid var(--ln2);scroll-margin-top:24px}
.feat:last-child{border-bottom:1px solid var(--ln2)}
.feat-t{display:flex;flex-direction:column;gap:12px;max-width:440px}
.feat-t .no{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--t3)}
.feat-t h3{font-size:28px;line-height:1.15;letter-spacing:-.02em}
.feat-t p{font-size:15px;color:var(--t2)}

/* panel caption: what the panel shows, and that it is sample data */
.pcap{display:flex;justify-content:space-between;gap:16px;padding:9px 16px;border-bottom:1px solid var(--ln1);font-size:10.5px;letter-spacing:.08em;color:var(--t3)}
.pcap span:last-child{color:var(--wn)}

/* 01 SIP sequence */
.seq{padding:16px 18px;min-width:420px}
.seq-hd{display:grid;grid-template-columns:1fr 1fr 1fr;padding-bottom:10px;border-bottom:1px solid var(--ln1);font-size:11px;color:var(--t3);text-align:center}
.seq-hd b{font-weight:400;color:var(--val)}
.seq-body{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px 0 4px}
.rail{position:absolute;top:0;bottom:0;width:1px;background:var(--rail)}
.rail.a{left:16.66%}.rail.b{left:50%;background:var(--sep)}.rail.c{left:83.33%}
.msg{position:relative;display:grid;grid-template-columns:16.66% 33.34% 33.34% 16.66%;align-items:center}
.msg.media{grid-template-columns:16.66% 66.68% 16.66%}
.msg .t{color:var(--t3)}
.arrow{display:flex;flex-direction:column;align-items:center;gap:2px}
.arrow::after{content:"";width:100%;height:1px;background:var(--wire)}
.arrow.back{color:var(--wire)}
.arrow.back::after{background:var(--sep)}
.arrow.ok{color:var(--ac)}
.arrow.ok::after{background:var(--ac)}
.arrow.rtp{color:var(--t3)}
.arrow.rtp::after{height:0;background:none;border-top:1px dashed var(--sep)}

/* 02 and 05 tables */
.tbl{min-width:420px}
.row{display:grid;gap:10px;padding:10px 16px;border-bottom:1px solid var(--ln4)}
.row:last-child{border-bottom:0}
.row.hd{border-bottom:1px solid var(--ln1);font-size:11px;color:var(--t3)}
.row .r{text-align:right}
.vendors .row{grid-template-columns:28px 1fr 80px 64px 84px}
.accounts .row{grid-template-columns:1fr 80px 110px}
.gone{color:var(--t3)}.gone s{text-decoration:line-through}

/* 03 CDR */
.cdr{margin:0;padding:16px 18px;line-height:1.7;color:var(--t2);white-space:pre}

/* 04 log */
.log{padding:6px 0;min-width:420px}
.logline{display:grid;grid-template-columns:76px 56px 1fr;gap:10px;padding:5px 16px;color:var(--t2)}
.logline .t{color:var(--t3)}
.logline.hit{background:rgba(240,122,106,.08);color:var(--t1)}

/* where Astra stands: one row per capability, with its status */
.status{position:relative;padding-top:140px}
.status-head{gap:64px;padding-bottom:48px}
.stat{margin:0;border-top:1px solid var(--ln2)}
.stat-row{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:10px 32px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--ln2)}
.stat dt{font-weight:500;font-size:16px;color:var(--t1)}
.stat dd{margin:0;font-size:15px;color:var(--t2);max-width:620px}
.stat dd.st{justify-self:end}
.stat a{color:var(--t1);text-decoration:underline;text-decoration-color:var(--ac);text-underline-offset:3px}
.stat a:hover{color:var(--ac)}

/* closing call to action */
.cta{position:relative;padding-block:140px 120px;gap:48px;align-items:end}
.cta h2{font-size:clamp(34px,4vw,52px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.cta-r{display:flex;flex-direction:column;gap:20px}
.cta-r p{font-size:17px;color:var(--t2);max-width:460px}

@media (max-width:820px){
  .stat-row{grid-template-columns:minmax(0,1fr) auto;padding:16px 0}
  .stat dt{grid-column:1;grid-row:1}
  .stat dd.st{grid-column:2;grid-row:1}
  .stat dd:not(.st){grid-column:1 / -1}
}
@media (max-width:560px){
  .hero{padding-block:56px 56px;gap:40px}
  .feats,.status{padding-top:96px}
  .feat{gap:28px;padding-block:36px}
  .cta{padding-block:96px 80px}
}

/* a panel fits its own width: below 470 px (a phone, or the two-column layout on a narrow screen) the tables,
   ladder and log tighten instead of scrolling */
.panel{container-type:inline-size}
@container (max-width:470px){
  .seq,.tbl,.log{min-width:0}
  .seq{padding:14px 12px}
  .seq-hd,.seq-body{font-size:11px}
  .row{gap:8px;padding:9px 12px;font-size:11px}
  .vendors .row{grid-template-columns:18px minmax(0,1fr) 62px 44px 64px}
  .accounts .row{grid-template-columns:minmax(0,1fr) 52px 86px}
  .pcap{padding:9px 12px}
  .cdr{padding:14px 12px;font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere}
  .logline{grid-template-columns:58px 44px minmax(0,1fr);gap:8px;padding:5px 12px;font-size:11px}
}