/* =====================================================
   TOLL . blueprint-spec developer-docs landing.
   palette  : navy #0a1a3a base + Base-blue #0052ff + cyan #88d0ff
              + construction-line bone rgba(216,228,255,0.32)
   type     : Geist Mono primary + DM Mono dimension-callouts + Inter body
   ===================================================== */

:root{
  /* palette */
  --navy:        #0a1a3a;
  --navy-2:      #0e2349;
  --navy-3:      #122c5a;
  --bone:        #d8e4ff;
  --bone-dim:    rgba(216,228,255,0.65);
  --bone-fade:   rgba(216,228,255,0.32);
  --line:        rgba(180,200,240,0.32);
  --line-faint:  rgba(180,200,240,0.12);
  --blue:        #0052ff;
  --blue-hi:     #2d72ff;
  --cyan:        #88d0ff;
  --cyan-bright: #b2e2ff;
  --green-led:   #4ddc9d;
  --warn:        #f8b54a;
  --red:         #ff6680;

  /* type */
  --f-mono: 'Geist Mono', 'Menlo', monospace;
  --f-body: 'Inter', -apple-system, sans-serif;
  --f-dim:  'DM Mono', 'Geist Mono', monospace;

  /* spacing */
  --pad-x:    clamp(20px, 4vw, 56px);
  --pad-y:    clamp(56px, 9vw, 110px);
  --container: 1240px;
}

[hidden]{ display: none !important; }

*{ box-sizing: border-box; }

html, body{
  margin: 0; padding: 0;
  background: var(--navy);
  color: var(--bone);
  font-family: var(--f-mono);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body[data-state="loading"]{ opacity: 0; }
body[data-state="ready"]{ opacity: 1; transition: opacity 280ms ease; }

a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }

/* ============ BACKGROUND: grid + crosshair corner ticks ============ */
.bg{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
.bg-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 50%, transparent 100%);
}
/* big crosshair ticks at the 4 corners of the viewport, like a blueprint sheet */
.bg-corner{
  position: absolute;
  width: 28px; height: 28px;
  background:
    linear-gradient(var(--line), var(--line)) 50% 0 / 1.2px 100% no-repeat,
    linear-gradient(90deg, var(--line), var(--line)) 0 50% / 100% 1.2px no-repeat;
}
.bg-corner::before{
  content: ""; position: absolute; inset: -2px;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 8px; height: 8px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.bg-corner-tl{ left: 16px; top: 16px; }
.bg-corner-tr{ right: 16px; top: 16px; }
.bg-corner-bl{ left: 16px; bottom: 16px; }
.bg-corner-br{ right: 16px; bottom: 16px; }

main, header, footer, section{ position: relative; z-index: 1; }

/* ============ STATUS BAR ============ */
.status{
  position: sticky; top: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px var(--pad-x);
  background: rgba(10, 26, 58, 0.78);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  z-index: 30;
}
.status-left{ display: inline-flex; gap: 10px; align-items: center; }
.status-brand{ color: var(--bone); font-weight: 600; }
.status-rev{ color: var(--bone-fade); }
.status-sep{ color: var(--bone-fade); }

.status-right{
  display: inline-flex; gap: 14px; align-items: center;
  justify-self: end;
  flex-wrap: wrap;
}
.status-led{
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--green-led);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green-led);
  animation: ledPulse 2.4s ease-in-out infinite;
}
.status-led[data-led="warn"]{ background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.status-led[data-led="err"]{ background: var(--red); box-shadow: 0 0 8px var(--red); }
@keyframes ledPulse{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.5; } }
.status-uptime{ color: var(--bone-dim); }
.status-latency{ color: var(--cyan); }
.status-link{
  color: var(--cyan);
  border-bottom: 1px dashed var(--cyan);
  padding-bottom: 1px;
  transition: color 160ms;
}
.status-link:hover{ color: var(--cyan-bright); border-color: var(--cyan-bright); }
.status-cta{
  padding: 6px 12px;
  background: var(--blue);
  color: white;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  border-radius: 0;
  transition: background 160ms;
}
.status-cta:hover{ background: var(--blue-hi); }

@media (max-width: 720px){
  .status-uptime, .status-latency, .status-link{ display: none; }
}

/* ============ HERO ============ */
.hero{
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--pad-x) clamp(36px, 6vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 56px);
}
@media (min-width: 980px){
  .hero{
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
  }
}

.hero-kicker{
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--cyan);
  margin: 0 0 18px;
}
.hero-title{
  font-family: var(--f-body); font-weight: 700;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.04; letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0 0 18px;
}
.hero-sub{
  font-family: var(--f-body);
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--bone-dim);
  margin: 0 0 28px;
  max-width: 560px;
}
.hero-cta-row{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.hero-cta{
  display: inline-flex; align-items: center;
  padding: 11px 22px;
  background: var(--blue);
  color: white;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.04em;
  border: 1px solid var(--blue);
  transition: background 160ms, transform 160ms;
}
.hero-cta:hover{ background: var(--blue-hi); transform: translateY(-1px); }
.hero-cta-ghost{
  padding: 10px 18px;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.04em;
  color: var(--bone);
  border: 1px dashed var(--line);
  transition: border-color 160ms, color 160ms;
}
.hero-cta-ghost:hover{ color: var(--cyan); border-color: var(--cyan); }

/* ============ LIVE TERMINAL ============ */
.term{
  position: relative;
  padding: 0;
}
.term-frame{
  position: relative;
  background: var(--navy-2);
  border: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 13.5px;
  min-height: 360px;
  display: flex; flex-direction: column;
}
/* corner ticks on the terminal frame */
.term-frame::before,
.term-frame::after{
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  background:
    linear-gradient(var(--cyan), var(--cyan)) 50% 0 / 1.4px 100% no-repeat,
    linear-gradient(90deg, var(--cyan), var(--cyan)) 0 50% / 100% 1.4px no-repeat;
}
.term-frame::before{ left: -6px; top: -6px; }
.term-frame::after{ right: -6px; bottom: -6px; }

.term-head{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--navy-3);
}
.term-head-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--bone-fade); }
.term-head-dot-r{ background: var(--red); }
.term-head-dot-y{ background: var(--warn); }
.term-head-dot-g{ background: var(--green-led); }
.term-head-title{
  margin-left: 8px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--bone);
}
.term-head-meta{
  margin-left: auto;
  font-family: var(--f-dim);
  font-size: 11px;
  color: var(--bone-fade);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.term-body{
  padding: 14px 16px 8px;
  flex: 1;
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;
}
.term-line{
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--bone);
  white-space: pre-wrap;
  word-break: break-all;
}
.term-line-comment{ color: var(--bone-fade); }
.term-line-req::after{
  content: "_";
  color: var(--cyan);
  animation: termCursor 0.95s steps(2, end) infinite;
}
@keyframes termCursor{ 50%{ opacity: 0; } }
.term-line-status{ color: var(--warn); font-weight: 500; }
.term-line-status[data-status="200"]{ color: var(--green-led); }
.term-line-pay{ color: var(--cyan); }
.term-body-json{
  margin: 6px 0 0;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--bone);
  line-height: 1.5;
  white-space: pre;
  overflow: auto;
  flex: 1;
}
.term-body-json .k{ color: var(--cyan); }
.term-body-json .s{ color: var(--bone); }
.term-body-json .n{ color: var(--warn); }
.term-body-json .b{ color: var(--blue-hi); }
.term-body-json .c{ color: var(--bone-fade); font-style: italic; }
.term-foot{
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: var(--navy-3);
  font-family: var(--f-dim);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bone-dim);
  text-transform: uppercase;
}
.term-foot-ms{ color: var(--cyan); }
.term-foot-sep{ color: var(--bone-fade); }

/* dimension callouts around the terminal */
.term-dim{
  position: absolute;
  font-family: var(--f-dim);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--bone-fade);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
  pointer-events: none;
}
.term-dim-top{
  top: -22px; left: 18px;
}
.term-dim-top span::before{
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--line);
  vertical-align: middle;
  margin-right: 6px;
}
.term-dim-right{
  top: 14px; right: -8px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.term-dim-right span::before{
  content: "";
  display: inline-block;
  width: 22px; height: 1px;
  background: var(--line);
  vertical-align: middle;
  margin-right: 6px;
}
.term-dim-bottom{
  bottom: -22px; right: 18px;
}
.term-dim-bottom span::after{
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--line);
  vertical-align: middle;
  margin-left: 6px;
}

/* ============ SECTION CHROME ============ */
.section{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
  position: relative;
}
.section::before{
  content: "";
  position: absolute;
  top: 0; left: var(--pad-x); right: var(--pad-x);
  height: 1px;
  background: var(--line);
}
/* numbered tick at the section break */
.section::after{
  content: "";
  position: absolute;
  top: -5px; left: var(--pad-x);
  width: 10px; height: 10px;
  background:
    linear-gradient(var(--cyan), var(--cyan)) 50% 0 / 1.4px 100% no-repeat,
    linear-gradient(90deg, var(--cyan), var(--cyan)) 0 50% / 100% 1.4px no-repeat;
}

.section-head{
  margin-bottom: clamp(32px, 5vw, 56px);
}
.section-fig{
  display: inline-block;
  font-family: var(--f-dim);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.section-title{
  font-family: var(--f-body); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0 0 12px;
}
.section-sub{
  font-family: var(--f-body);
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--bone-dim);
  margin: 0;
  max-width: 720px;
}
.section-foot{
  margin-top: 24px;
  font-family: var(--f-dim);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bone-fade);
  text-transform: uppercase;
}

/* ============ ENDPOINT CARDS ============ */
.ep-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.ep-card{
  position: relative;
  padding: 22px 22px 0;
  background: var(--navy-2);
  border: 1px solid var(--line);
}
/* corner ticks at each card corner */
.ep-card::before,
.ep-card::after{
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  background:
    linear-gradient(var(--bone), var(--bone)) 50% 0 / 1.2px 100% no-repeat,
    linear-gradient(90deg, var(--bone), var(--bone)) 0 50% / 100% 1.2px no-repeat;
  opacity: 0.55;
}
.ep-card::before{ left: -6px; top: -6px; }
.ep-card::after{ right: -6px; bottom: -6px; }

.ep-card-head{
  display: inline-flex; gap: 10px; align-items: center;
  font-family: var(--f-mono);
  font-size: 12px;
  margin-bottom: 12px;
}
.ep-card-num{
  color: var(--bone-fade);
  letter-spacing: 0.06em;
}
.ep-card-method{
  padding: 2px 6px;
  background: rgba(0, 82, 255, 0.18);
  color: var(--cyan);
  border: 1px solid rgba(0, 82, 255, 0.5);
}
.ep-card-path{ color: var(--bone); }

.ep-card-title{
  font-family: var(--f-body); font-weight: 600;
  font-size: 18px;
  color: var(--bone);
  margin: 0 0 10px;
}
.ep-card-body{
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--bone-dim);
  margin: 0 0 16px;
  min-height: 90px;
}
.ep-card-pre{
  font-family: var(--f-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--bone);
  background: var(--navy);
  border-top: 1px solid var(--line);
  margin: 0 -22px;
  padding: 12px 22px;
  overflow: auto;
  white-space: pre;
}

/* ============ x402 FLOW ============ */
.flow-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  padding: 0; margin: 0;
  list-style: none;
}
.flow-step{
  position: relative;
  padding: 20px 18px 18px;
  background: var(--navy-2);
  border-top: 1px solid var(--cyan);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.flow-step-num{
  display: inline-block;
  font-family: var(--f-dim);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  margin-bottom: 12px;
}
.flow-step-title{
  font-family: var(--f-body); font-weight: 600;
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--bone);
}
.flow-step p{
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--bone-dim);
  margin: 0 0 12px;
}
.flow-step-code{
  display: block;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--bone);
  background: var(--navy);
  border-left: 2px solid var(--cyan);
  padding: 8px 10px;
  white-space: pre-wrap;
}

/* ============ PRICING ============ */
.pricing-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 880px){
  .pricing-grid{
    grid-template-columns: 0.42fr 0.58fr;
  }
}
.pricing-cell{
  position: relative;
  padding: 24px 22px;
  background: var(--navy-2);
  border: 1px solid var(--line);
}
.pricing-cell::before,
.pricing-cell::after{
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  background:
    linear-gradient(var(--bone), var(--bone)) 50% 0 / 1.2px 100% no-repeat,
    linear-gradient(90deg, var(--bone), var(--bone)) 0 50% / 100% 1.2px no-repeat;
  opacity: 0.55;
}
.pricing-cell::before{ left: -6px; top: -6px; }
.pricing-cell::after{ right: -6px; bottom: -6px; }

.pricing-cell-tag{
  display: inline-block;
  font-family: var(--f-dim);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--cyan);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.pricing-cell-rate{
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 18px;
}
.pricing-cell-num{
  font-family: var(--f-body); font-weight: 700;
  font-size: 44px;
  color: var(--bone);
  letter-spacing: -0.015em;
}
.pricing-cell-unit{
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--bone-dim);
}
.pricing-cell-feats{
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: 8px;
}
.pricing-cell-feats li{
  position: relative;
  padding-left: 20px;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--bone-dim);
}
.pricing-cell-feats li::before{
  content: "+";
  position: absolute; left: 0; top: 0;
  color: var(--cyan);
}

.pricing-cell-stake-rows{
  display: grid; gap: 14px;
}
.stake-row{
  display: grid;
  grid-template-columns: 80px 1fr 1.4fr;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px dashed var(--line-faint);
  align-items: center;
}
.stake-row:first-child{ border-top: 0; }
.stake-row-name{
  font-family: var(--f-dim);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--cyan);
}
.stake-row-thresh{
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--bone);
}
.stake-row-bump{
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--bone-dim);
}

/* ============ STATUS DASHBOARD ============ */
.status-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.status-cell{
  position: relative;
  padding: 18px 18px 28px;
  background: var(--navy-2);
  border: 1px solid var(--line);
  display: grid; gap: 6px;
}
.status-cell::before,
.status-cell::after{
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  background:
    linear-gradient(var(--cyan), var(--cyan)) 50% 0 / 1.2px 100% no-repeat,
    linear-gradient(90deg, var(--cyan), var(--cyan)) 0 50% / 100% 1.2px no-repeat;
  opacity: 0.6;
}
.status-cell::before{ left: -5px; top: -5px; }
.status-cell::after{ right: -5px; bottom: -5px; }

.status-cell-label{
  font-family: var(--f-dim);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--bone-fade);
  text-transform: uppercase;
}
.status-cell-val{
  font-family: var(--f-mono); font-weight: 500;
  font-size: 26px;
  color: var(--bone);
}
.status-cell-tick{
  position: absolute;
  right: 12px; bottom: 8px;
  font-family: var(--f-dim);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--bone-fade);
  text-transform: uppercase;
}
.status-chart{
  position: relative;
  padding: 16px 18px;
  background: var(--navy-2);
  border: 1px solid var(--line);
}
.status-chart svg{
  width: 100%; height: 100px; display: block;
}
.status-poly{
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.4;
  filter: drop-shadow(0 0 3px rgba(136, 208, 255, 0.5));
}
.status-chart-foot{
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-family: var(--f-dim);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--bone-fade);
  text-transform: uppercase;
}

/* ============ TOKENOMICS ============ */
.tk-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.tk-cell{
  position: relative;
  padding: 24px 20px;
  background: var(--navy-2);
  border: 1px solid var(--line);
  display: grid; gap: 8px;
}
.tk-cell::before{
  content: "";
  position: absolute; top: -1px; left: 0; width: 32px; height: 2px;
  background: var(--cyan);
}
.tk-cell-num{
  font-family: var(--f-body); font-weight: 700;
  font-size: 42px;
  color: var(--bone);
  letter-spacing: -0.02em;
  line-height: 1;
}
.tk-cell-label{
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--bone-dim);
  line-height: 1.5;
}

/* ============ FOOTER ============ */
.foot{
  max-width: var(--container);
  margin: clamp(48px, 6vw, 80px) auto 40px;
  padding: 32px var(--pad-x) 0;
  border-top: 1px solid var(--line);
}
.foot-mark{
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.foot-mark-name{
  font-family: var(--f-mono); font-weight: 600;
  font-size: 16px;
  color: var(--bone);
}
.foot-mark-sub{
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--bone-dim);
}
.foot-callouts{
  display: grid;
  gap: 8px;
  margin-bottom: 28px;
  position: relative;
}
.foot-callout{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--line-faint);
  font-family: var(--f-mono);
  font-size: 13px;
  transition: color 160ms;
}
.foot-callout:first-child{ border-top: 0; }
.foot-callout:hover{ color: var(--cyan); }
.foot-callout-arrow{
  color: var(--cyan);
  font-family: var(--f-mono);
}
.foot-callout-name{ color: var(--bone); }
.foot-callout:hover .foot-callout-name{ color: var(--cyan); }
.foot-callout-meta{
  font-family: var(--f-dim);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--bone-fade);
  text-transform: uppercase;
}
.foot-disc{
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--bone-fade);
  margin: 0;
  max-width: 940px;
}

/* ============ WAITLIST MODAL ============ */
.wmodal{
  position: fixed; inset: 0;
  background: rgba(5, 12, 30, 0.78);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
  z-index: 60;
}
.wmodal.is-on{ display: flex; }
.wmodal-inner{
  position: relative;
  max-width: 460px; width: 100%;
  background: var(--navy-2);
  border: 1px solid var(--cyan);
  padding: 28px 28px 22px;
  box-shadow: 0 0 60px rgba(0, 82, 255, 0.18);
}
.wmodal-inner::before,
.wmodal-inner::after{
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  background:
    linear-gradient(var(--cyan), var(--cyan)) 50% 0 / 1.4px 100% no-repeat,
    linear-gradient(90deg, var(--cyan), var(--cyan)) 0 50% / 100% 1.4px no-repeat;
}
.wmodal-inner::before{ left: -6px; top: -6px; }
.wmodal-inner::after{ right: -6px; bottom: -6px; }
.wmodal-close{
  position: absolute; right: 12px; top: 10px;
  width: 28px; height: 28px;
  color: var(--bone-dim);
}
.wmodal-close:hover{ color: var(--cyan); }
.wmodal-close svg{ width: 16px; height: 16px; }
.wmodal-eyebrow{
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--cyan);
  margin-bottom: 8px;
}
.wmodal-title{
  font-family: var(--f-body); font-weight: 700;
  font-size: 22px;
  margin: 0 0 12px;
  color: var(--bone);
}
.wmodal-sub{
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--bone-dim);
  margin: 0 0 18px;
}
.wmodal-form{ display: grid; gap: 10px; }
.wmodal-label{
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--bone-fade);
}
.wmodal-optional{ color: var(--bone-fade); }
.wmodal-input{
  width: 100%;
  padding: 10px 12px;
  background: var(--navy);
  border: 1px solid var(--line);
  color: var(--bone);
  font-family: var(--f-mono);
  font-size: 14px;
}
.wmodal-input:focus{
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(136, 208, 255, 0.25);
}
.wmodal-submit{
  margin-top: 6px;
  padding: 11px 18px;
  background: var(--blue);
  color: white;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  border: 1px solid var(--blue);
  transition: background 160ms;
}
.wmodal-submit:hover{ background: var(--blue-hi); }
.wmodal-submit:disabled{ opacity: 0.6; cursor: not-allowed; }
.wmodal-foot{
  margin: 16px 0 0;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--bone-fade);
}
.wmodal-success{
  display: grid; gap: 8px;
  padding: 14px 16px;
  background: rgba(77, 220, 157, 0.08);
  border: 1px solid var(--green-led);
}
.wmodal-success-tag{
  font-family: var(--f-mono); font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--green-led);
}
.wmodal-success-line{ margin: 0; font-size: 14px; color: var(--bone); }

/* ============ TOAST ============ */
.toast{
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 24px);
  padding: 10px 18px;
  background: var(--navy-3);
  border: 1px solid var(--cyan);
  color: var(--bone);
  font-family: var(--f-mono);
  font-size: 13px;
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
  z-index: 80;
  pointer-events: none;
}
.toast.is-on{ transform: translate(-50%, 0); opacity: 1; }

/* ============ RESPONSIVE TWEAKS ============ */
@media (max-width: 720px){
  .hero-title{ font-size: 28px; }
  .pricing-cell-num{ font-size: 36px; }
  .tk-cell-num{ font-size: 32px; }
  .term-frame{ min-height: 280px; font-size: 12px; }
  .term-body-json{ font-size: 11px; }
}

@media (prefers-reduced-motion: reduce){
  .status-led{ animation: none; }
  .term-line-req::after{ animation: none; }
}


/* blueprint X social icon (custom inline SVG, themed per site) */
.x-bp{
  width: 18px; height: 18px;
  flex-shrink: 0;
  transition: transform 200ms ease, filter 200ms ease;
}
.foot-callout:hover .x-bp{
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px rgba(136,208,255,0.6));
}