/* ewsorderhub.com — public landing page.
 *
 * CRAFT. The material of this business is a LOG: scan events, timestamps, carrier codes, an order
 * reconciled against what actually arrived. So the page is built like a ledger rather than like a
 * SaaS hero. Mono does structural work, hairline rules carry the grid, and the stage numbers encode
 * real sequence instead of decorating.
 *
 * This is a deliberate correction. The previous pass had drifted into the design standard's own
 * cliché (b), "near-black + neon accent": a 42px glow on the headline, a radial jade wash behind
 * the hero, halos on every dot, and three big-number tiles that contained no numbers. All of that
 * is gone. Jade is now INK, not light — full strength, small areas, never blooming.
 *
 * SKIN: EWS house pairing, Plus Jakarta Sans + IBM Plex Mono, jade accent.
 * FLOOR: body 16px, contrast measured not assumed, targets >= 44px, no hover-only affordances,
 * motion 150-300ms on transform/opacity only, fully disabled under prefers-reduced-motion.
 */

:root {
  /* Graphite, not void. Warmer and a step lighter than the old near-black, so the page reads as
     paper stock rather than as a screen with a glow on it. */
  --ground: #101216;
  --panel: #171a20;
  --panel-lit: #1c2027;
  --ink: #e9ecf1;
  --muted: #98a2b1;
  --rule: #252a32;
  --rule-lit: #333a45;
  --jade: #14b98a;
  --jade-ink: #06150f;

  /* Modular scale. */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;

  --radius: 0.375rem;
  --maxw: clamp(1080px, 78vw, 2200px);
  --gutter: 1.5rem;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Big screens: everything (type and spacing are in rem) grows smoothly from 1600px wide, up to 1.5x
     at ~2700px, so the page fills a large monitor instead of floating small in the middle. Laptops
     and phones stay at 16px. */
  font-size: clamp(16px, calc(16px + (100vw - 1600px) * 0.0075), 24px);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--t-base)/1.6 "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* No gradient wash. The ground is flat on purpose. */
  /* Fill the window: header top, footer bottom, content centred in the space between. */
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}
body > header, body > footer { width: 100%; }
body > main { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--jade); color: var(--jade-ink); padding: 0.75rem 1.125rem;
  border-radius: 0 0 var(--radius) 0; font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }

/* Focus. Deliberately NOT :where() — that has zero specificity, so any later rule touching these
   elements would silently win and the ring would vanish. Verified with real Tab keypresses. */
a:focus-visible,
button:focus-visible,
.door:focus-visible,
.nav-cta:focus-visible,
.skip:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
  border-radius: var(--radius);
}

a, button { cursor: pointer; }
/* Door rows are labels now, not links: they keep the hover highlight but carry no pointer. */
.door { cursor: default; }

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

/* ---- header ---- */
.top {
  max-width: var(--maxw); margin: 0 auto;
  padding: 1.375rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* Logo top left. The anchor is padded out to clear the 44px touch floor on its own, because the
   mark itself is only 30px tall. Negative inline margin keeps the mark optically flush with the
   page's left edge rather than indented by its own padding. */
.brand {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; min-width: 2.75rem; padding: 0.4375rem 0.5rem;
  margin-inline-start: -8px;
  border-radius: var(--radius);
}
.brand-mark { display: block; height: 2.125rem; width: auto; }
.nav { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.nav-cta {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.25rem;
  border: 1px solid var(--rule-lit); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.01em;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.nav-cta:hover { border-color: var(--jade); color: var(--jade); }
.nav-cta-primary { background: var(--jade); border-color: var(--jade); color: var(--jade-ink); font-weight: 600; }
.nav-cta-primary:hover { background: #17cd99; border-color: #17cd99; color: var(--jade-ink); }

/* ---- hero ---- */
main > section { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.hero { padding-top: 2.5rem; text-align: center; }
h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.4rem, 6.2vw, 3.9rem);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 800;
}
/* Name plus descriptor, set as one. The descriptor is mono and tracked out: it reads as a system
   label rather than as a marketing tagline, which is what this actually is. No glow. */
h1 .lit {
  display: block; margin-top: 0.875rem;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: clamp(0.8rem, 1.9vw, 1rem);
  font-weight: 500; line-height: 1.4;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--jade);
}

/* ---- THE LEDGER ---- */
.rail {
  list-style: none; margin: 4rem 0 0; padding: 0; text-align: left;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule-lit);
}
.stage {
  position: relative;
  padding: 1.25rem 1.5rem 0.25rem 0;
  border-right: 1px solid var(--rule);
}
.stage:last-child { border-right: 0; padding-right: 0; }
/* The terminal column is the only one marked: goods received is the state that matters, and the
   jade sits on the rule itself so the run reads as finished. Every other column is left plain —
   the ticks that used to sit here only repeated the column rules beside them. */
.stage-end::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px;
  background: var(--jade);
}
.stage-n {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.1em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stage-end .stage-n { color: var(--jade); }
.stage-k {
  display: block; margin-top: 0.625rem;
  font-size: var(--t-base); font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
}
.stage-d {
  display: block; margin-top: 0.375rem;
  font-size: var(--t-sm); line-height: 1.55; color: var(--muted);
}

/* Each column settles in sequence, left to right, because that is the direction the goods move.
   Transform and opacity only. */
@media (prefers-reduced-motion: no-preference) {
  .stage { animation: settle 260ms ease-out both; animation-delay: calc(var(--i) * 90ms); }
  @keyframes settle { from { opacity: 0; transform: translateY(0.375rem); } to { opacity: 1; transform: none; } }
}

/* ---- doors as ledger rows ---- */
.doors { padding-top: 4.5rem; padding-bottom: 3rem; }
.door-list { border-top: 1px solid var(--rule-lit); }
.door {
  display: grid; grid-template-columns: 15rem 1fr auto; align-items: center;
  gap: 0.25rem 1.75rem;
  padding: 1.625rem 1.25rem 1.625rem 1.125rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--ink);
  border-left: 2px solid transparent;
  transition: background 180ms ease, border-left-color 180ms ease, padding-left 180ms ease;
}
.door:hover, .door:focus-visible { background: var(--panel); border-left-color: var(--jade); padding-left: 1.625rem; }
.door-k { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; }
.door-d { font-size: var(--t-sm); color: var(--muted); }
.door-go { width: 1.25rem; height: 1.25rem; color: var(--muted); transition: color 180ms ease, transform 180ms ease; }
.door:hover .door-go, .door:focus-visible .door-go { color: var(--jade); transform: translateX(0.1875rem); }

/* ---- footer ---- */
.foot {
  max-width: var(--maxw); margin: 0 auto; padding: 22px var(--gutter) 48px;
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; flex-wrap: wrap;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--muted);
}
.foot a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--muted); transition: color 180ms ease;
}
.foot a:hover { color: var(--jade); }

/* ---- request-access + 404 ---- */
.panel { max-width: 40rem; margin: 0 auto; padding: 4rem var(--gutter) 4.5rem; }
.panel h1 { font-size: clamp(1.9rem, 5vw, 2.5rem); text-align: left; margin-bottom: 1rem; }
.panel p { color: var(--muted); font-size: var(--t-lg); line-height: 1.55; }
.panel .steps { margin: 1.875rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-lit); }
.panel .steps li {
  padding: 1rem 0 1rem 2.5rem; border-bottom: 1px solid var(--rule); position: relative; color: var(--ink);
  font-size: var(--t-sm); line-height: 1.55;
}
.panel .steps li::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; left: 0; top: 1rem;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: var(--t-xs); letter-spacing: 0.1em; color: var(--jade);
  font-variant-numeric: tabular-nums;
}
.panel .steps { counter-reset: step; }
.cta {
  display: inline-flex; align-items: center; min-height: 3.25rem; margin-top: 2rem; padding: 0 1.625rem;
  background: var(--jade); color: var(--jade-ink); font-weight: 700; text-decoration: none;
  border-radius: var(--radius); transition: background 180ms ease;
}
.cta:hover { background: #17cd99; }
.back {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 1.25rem;
  color: var(--muted); font-size: var(--t-sm);
}
.back:hover { color: var(--jade); }

/* ---- responsive: 1440 / 1024 / 768 / 375 ---- */
/* ── Request access pop-up (posts to the EWS Portal) ── */
.rq { width: min(40rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0; border: 1px solid var(--rule-lit); border-radius: 0.75rem;
  background: var(--panel); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.rq::backdrop { background: rgba(5, 7, 9, 0.72); }
.rq-form, .rq-done { padding: 1.5rem 1.5rem 1.25rem; }
.rq-head { margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rq h2 { margin: 0; font-size: var(--t-xl); letter-spacing: -0.01em; }
.rq-x { width: 2.75rem; height: 2.75rem; border: 0; background: transparent; color: var(--muted); font-size: 1.6rem; border-radius: var(--radius); cursor: pointer; }
.rq-x:hover { color: var(--ink); background: var(--panel-lit); }
.rq-lead { color: var(--muted); font-size: var(--t-sm); line-height: 1.55; margin: 0.5rem 0 1.25rem; }
.rq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem 1rem; }
.rq-f { display: flex; flex-direction: column; gap: 0.375rem; font-size: var(--t-xs); font-family: "IBM Plex Mono", monospace; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); min-width: 0; }
.rq-wide { grid-column: 1 / -1; }
.rq-opt { text-transform: none; letter-spacing: 0; opacity: 0.75; }
.rq-f input, .rq-f textarea { font: 400 1rem/1.4 "Plus Jakarta Sans", system-ui, sans-serif; text-transform: none; letter-spacing: 0; color: var(--ink);
  background: var(--ground); border: 1px solid var(--rule-lit); border-radius: var(--radius); padding: 0.625rem 0.75rem; min-height: 2.75rem; width: 100%; }
.rq-f textarea { resize: vertical; min-height: 5rem; }
.rq-f input:focus, .rq-f textarea:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 2px rgba(20, 185, 138, 0.25); }
.rq-ret { border: 0; padding: 0; margin: 0; }
.rq-ret legend { padding: 0; margin-bottom: 0.375rem; }
.rq-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rq-chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.875rem; border: 1px solid var(--rule-lit); border-radius: 999px;
  font: 500 var(--t-sm) "Plus Jakarta Sans", system-ui, sans-serif; text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; user-select: none; }
.rq-chip input { accent-color: var(--jade); width: 1rem; height: 1rem; margin: 0; }
.rq-chip:has(input:checked) { border-color: var(--jade); background: rgba(20, 185, 138, 0.1); }
.rq-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rq-ts { margin-top: 1.125rem; min-height: 65px; }
.rq-err { margin: 0.75rem 0 0; color: #f87171; font-size: var(--t-sm); }
.rq-foot { display: flex; justify-content: flex-end; gap: 0.625rem; margin-top: 1.25rem; }
.rq-foot .nav-cta { cursor: pointer; }
.rq-foot button.nav-cta:not(.nav-cta-primary) { background: transparent; }
.rq-foot .nav-cta:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 560px) {
  .rq-grid { grid-template-columns: 1fr; }
  .rq-form, .rq-done { padding: 1.25rem 1rem 1rem; }
  .rq-foot .nav-cta { flex: 1 1 0; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .rq[open] { animation: rq-in 200ms cubic-bezier(.23, 1, .32, 1); }
  @keyframes rq-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
}

@media (max-width: 900px) {
  .rail { grid-template-columns: 1fr 1fr; }
  /* keep a rule between the two columns only */
  .stage:nth-child(2n) { border-right: 0; }
  .stage { padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
  .stage:nth-last-child(-n+2) { border-bottom: 0; }
  .door { grid-template-columns: 1fr auto; gap: 0.25rem 1.25rem; }
  .door-k { grid-column: 1; }
  .door-d { grid-column: 1; }
  .door-go { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 560px) {
  :root { --gutter: 1.25rem; }
  .hero { padding-top: 2.5rem; }
  .rail { grid-template-columns: 1fr; margin-top: 3rem; }
  .stage { border-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; }
  .stage:last-child { border-bottom: 0; }
  .doors { padding-top: 4rem; }
  .nav-cta { flex: 1 1 auto; justify-content: center; }
  .door { padding-top: 1.375rem; padding-bottom: 1.375rem; }
}

/* Motion suppressed, colour and structure kept: the affordance survives without the travel. */
@media (prefers-reduced-motion: reduce) {
  .door { transition: background 180ms ease, border-left-color 180ms ease; }
  .door:hover, .door:focus-visible { padding-left: 1.125rem; }
  .door:hover .door-go, .door:focus-visible .door-go { transform: none; }
}