/* ==========================================================
   Wormtocol page. Shares the site's cream + ink base (styles.css);
   adds a dark dot-grid hero, a route map, and one data colour pair:
   green = a route that gets through, amber = blocked by the network.
   ========================================================== */
.wt{
  --wt-dark: #0b0908;
  --wt-cream: #fbf8f0;
  --wt-dim: rgba(251,248,240,.66);
  --wt-faint: rgba(251,248,240,.12);
  --wt-go: #3ecf8e;          /* route, on dark */
  --wt-go-ink: #12704a;      /* route, on cream */
  --wt-stop: #ff7a33;        /* blocked, on dark */
  --wt-stop-ink: #b4490f;    /* blocked, on cream */
}
.nav-links a[aria-current="page"]{ color: var(--ink); font-weight: 600; }

/* ---------- Hero ---------- */
.wt-hero{
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(62,207,142,.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(255,122,51,.06), transparent 60%),
    var(--wt-dark);
  color: var(--wt-cream);
  border-radius: 0 0 28px 28px;
}
.wt-hero-dots, .wt-panel-dots{
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(251,248,240,.13) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 30% 20%, #000 20%, transparent 85%);
  mask-image: radial-gradient(ellipse 90% 70% at 30% 20%, #000 20%, transparent 85%);
}
.wt-hero-inner{ position: relative; padding: 120px 28px 96px; }
.wt-eyebrow{
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wt-go); margin-bottom: 28px;
}
.wt-eyebrow span{ color: rgba(251,248,240,.5); }
.wt-title{
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(44px, 7.2vw, 108px); line-height: .95; letter-spacing: -0.04em;
  max-width: 13ch; margin-bottom: 28px;
}
.wt-lede{ font-size: 19px; line-height: 1.55; color: var(--wt-dim); max-width: 58ch; margin-bottom: 40px; }
.wt-cta{ display: flex; gap: 12px; flex-wrap: wrap; }
.wt-cta--center{ justify-content: center; }
.wt-btn{ background: var(--wt-cream); color: var(--wt-dark); border-color: var(--wt-cream); }
.wt-btn:hover{ background: #fff; border-color: #fff; color: var(--wt-dark); }
.wt-btn-ghost{ background: transparent; color: var(--wt-cream); border-color: rgba(251,248,240,.28); }
.wt-btn-ghost:hover{ background: var(--wt-cream); color: var(--wt-dark); border-color: var(--wt-cream); }

/* Route map */
.wt-map{
  margin: 64px 0 0; padding: 16px 18px 14px;
  border: 1px solid var(--wt-faint); border-radius: 20px;
  background: linear-gradient(180deg, rgba(251,248,240,.035), rgba(251,248,240,.01));
}
.wt-map-hd{
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(251,248,240,.55); padding: 0 2px 10px;
}
.wt-map-status{ color: var(--wt-go); transition: color .2s cubic-bezier(.2,0,0,1); text-align: center; }
.wt-map-status.is-blocked{ color: var(--wt-stop); }
#wt-route{ display: block; width: 100%; height: 260px; }
.wt-map-key{
  display: flex; gap: 22px; flex-wrap: wrap; padding: 10px 2px 0;
  font-size: 13px; color: rgba(251,248,240,.6);
}
.wt-map-key span{ display: inline-flex; align-items: center; gap: 8px; }
.wt-map-key i{ display: inline-block; }
.k-route{ width: 18px; height: 3px; border-radius: 2px; background: var(--wt-go); }
.k-block{ width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--wt-stop); }

/* Proof */
.wt-proof{
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px 64px; align-items: end;
  margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--wt-faint);
}
.wt-proof-num{
  font-family: "Doto", var(--mono); font-weight: 900;
  font-size: clamp(60px, 9vw, 128px); line-height: .9; letter-spacing: -0.02em;
  color: var(--wt-cream);
}
.wt-proof-main p{ margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--wt-dim); max-width: 46ch; }
.wt-proof-side{ display: grid; gap: 0; }
.wt-proof-side div{ padding: 14px 0; border-top: 1px solid var(--wt-faint); display: grid; gap: 4px; }
.wt-proof-side div:first-child{ border-top: 0; }
.wt-proof-side dt{ font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,248,240,.5); }
.wt-proof-side dd{ font-size: 16px; color: var(--wt-cream); }

/* ---------- Sections ---------- */
.wt-sec{ padding: 120px 0 0; }
.wt-sec-hd{ margin-bottom: 56px; max-width: 880px; }
.wt-label{
  display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 18px;
}
.wt-sec-hd h2{
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(32px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -0.035em;
  max-width: 20ch;
}
.wt-sec-sub{ margin-top: 22px; font-size: 18px; line-height: 1.55; color: var(--ink-3); max-width: 62ch; }

/* Three jobs */
.wt-jobs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.wt-job{ border-top: 1.5px solid var(--ink); padding-top: 26px; }
.wt-job-n{ font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--wt-go-ink); }
.wt-job h3{ font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 14px 0 12px; }
.wt-job p{ font-size: 16px; line-height: 1.6; color: var(--ink-3); }

/* Dark panels */
.wt-panel{
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 60% at 90% 0%, rgba(62,207,142,.08), transparent 60%),
    var(--wt-dark);
  color: var(--wt-cream); border-radius: 28px; padding: 80px 64px;
}
.wt-panel > *{ position: relative; }
.wt-panel > .wt-panel-dots{ position: absolute; }
.wt-sec-hd--dark .wt-label{ color: rgba(251,248,240,.55); }
.wt-sec-hd--dark .wt-sec-sub{ color: var(--wt-dim); }

/* Steps */
.wt-steps{ list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 48px 56px; }
.wt-steps li{ display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; }
.wt-step-n{
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(62,207,142,.5); color: var(--wt-go);
  font-family: var(--mono); font-size: 14px;
}
.wt-steps h3{ font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin: 8px 0 10px; }
.wt-steps p{ font-size: 16px; line-height: 1.6; color: var(--wt-dim); }
.wt-tech{
  display: inline-block; margin-top: 14px; padding: 5px 10px; border-radius: 8px; line-height: 1.5;
  border: 1px solid var(--wt-faint);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(251,248,240,.62);
}
.wt-pq{ margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--wt-faint); font-size: 16px; line-height: 1.6; color: var(--wt-dim); max-width: 80ch; }
.wt-pq .wt-label{ margin: 0 12px 0 0; color: var(--wt-go); }

/* Learning flow */
.wt-flow{ display: grid; grid-template-columns: 1fr 56px 1fr 56px 1fr; align-items: center; gap: 0; }
.wt-flow-step{
  border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2);
  padding: 24px; min-height: 196px; display: flex; flex-direction: column; gap: 14px;
}
.wt-flow-step p{ font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.wt-flow-k{ font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.wt-flow-step--report{ background: var(--wt-dark); border-color: var(--wt-dark); }
.wt-flow-step--report .wt-flow-k{ color: rgba(251,248,240,.55); }
.wt-report{
  font-family: var(--mono); font-size: 15px; line-height: 1.75; color: var(--wt-cream);
  white-space: pre; overflow-x: auto;
}
.wt-report span{ color: rgba(251,248,240,.45); }
.wt-flow-arrow{ position: relative; height: 2px; margin: 0 10px; background: var(--ink-4); }
.wt-flow-arrow::after{
  content: ""; position: absolute; right: -1px; top: 50%; width: 9px; height: 9px;
  border-top: 2px solid var(--ink-4); border-right: 2px solid var(--ink-4);
  transform: translateY(-50%) rotate(45deg);
}

/* Privacy */
.wt-privacy{
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px;
  margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line);
}
.wt-privacy h3{ font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 16px; }
.wt-list{ list-style: none; display: grid; gap: 0; }
.wt-list li{ display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; }
.wt-list li::before{ content: ""; flex: none; }
.wt-list--yes li::before{ width: 9px; height: 9px; border-radius: 50%; background: var(--wt-go-ink); }
.wt-list--no li::before{
  width: 12px; height: 2px; background: var(--wt-stop-ink);
}
.wt-privacy-note{ grid-column: 1 / -1; font-size: 16px; line-height: 1.6; color: var(--ink-3); max-width: 80ch; }

/* Status */
.wt-status{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wt-status-col{ border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px 12px; background: var(--bg); }
.wt-status-col h3{ display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.wt-status-col ul{ list-style: none; }
.wt-status-col li{ padding: 13px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.wt-dot{ width: 10px; height: 10px; border-radius: 50%; flex: none; }
.wt-dot--live{ background: var(--wt-go-ink); box-shadow: 0 0 0 4px rgba(18,112,74,.14); }
.wt-dot--soon{ background: var(--wt-stop-ink); }
.wt-dot--next{ border: 2px solid var(--ink-4); }

/* Distances */
.wt-panel--far{
  background:
    radial-gradient(circle at 92% -30%, rgba(251,248,240,.16), rgba(251,248,240,.04) 28%, transparent 46%),
    var(--wt-dark);
}
.wt-far{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--wt-faint); }
.wt-far article{ padding: 28px 28px 8px 0; }
.wt-far article + article{ padding-left: 28px; border-left: 1px solid var(--wt-faint); }
.wt-far-k{ font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--wt-go); }
.wt-far h3{ font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 12px 0 10px; }
.wt-far p{ font-size: 16px; line-height: 1.6; color: var(--wt-dim); }

/* End */
.wt-end{ padding-bottom: 120px; text-align: center; }
.wt-end h2{ font-size: clamp(32px, 4.6vw, 60px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }
.wt-end p{ margin: 16px 0 32px; font-size: 18px; color: var(--ink-3); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .wt-flow{ grid-template-columns: 1fr; gap: 0; }
  .wt-flow-step{ min-height: 0; }
  .wt-flow-arrow{ width: 2px; height: 36px; margin: 6px auto; }
  .wt-flow-arrow::after{ right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
  .wt-status{ grid-template-columns: 1fr; }
  .wt-far{ grid-template-columns: 1fr; }
  .wt-far article, .wt-far article + article{ padding: 24px 0 8px; border-left: 0; }
  .wt-far article + article{ border-top: 1px solid var(--wt-faint); }
}
@media (max-width: 900px){
  .wt-jobs{ grid-template-columns: 1fr; gap: 32px; }
  .wt-steps{ grid-template-columns: 1fr; gap: 36px; }
  .wt-proof{ grid-template-columns: 1fr; }
  .wt-privacy{ grid-template-columns: 1fr; }
  .wt-panel{ padding: 56px 32px; }
}
@media (max-width: 600px){
  .wt-hero-inner{ padding-top: 64px; padding-bottom: 64px; }
  .wt-eyebrow{ letter-spacing: .1em; font-size: 11px; }
  .wt-lede{ font-size: 17px; }
  .wt-cta .btn{ flex: 1 1 auto; justify-content: center; }
  .wt-map{ margin-top: 44px; padding: 12px 12px 10px; border-radius: 16px; }
  .wt-map-hd{ font-size: 10px; letter-spacing: .1em; }
  #wt-route{ height: 190px; }
  .wt-sec{ padding-top: 80px; }
  .wt-sec-hd{ margin-bottom: 36px; }
  .wt-sec-sub{ font-size: 16.5px; }
  .wt-panel{ padding: 44px 20px; border-radius: 22px; }
  .wt-steps li{ grid-template-columns: 36px 1fr; gap: 14px; }
  .wt-step-n{ width: 36px; height: 36px; font-size: 13px; }
  .wt-report{ font-size: 14px; }
  .wt-end{ padding-bottom: 88px; }
}