/* NodeDial landing + info pages. Copyright (c) 2026 Kerry Hodgkins. All rights reserved.
   The page is 80 columns wide, set in the VGA font, with Turbo Vision-style windows: CGA blue, double frame,
   hard black shadow, and a gray menu bar with red hotkeys. The live dialer is the hero. */
@font-face { font-family: "NodeDial VGA"; src: url("vga.woff2") format("woff2"); font-display: swap; }
:root {
  --cga-blue: #0000aa; --cga-gray: #aaaaaa; --cga-white: #ffffff; --cga-cyan: #55ffff;
  --cga-yellow: #ffff55; --cga-red: #aa0000; --cga-black: #000000;
  --vga: "NodeDial VGA", ui-monospace, Consolas, Menlo, monospace;
  --cols: 80ch;
  --page: 960px;      /* one width for everything: hero, dialer, windows, footer */
  --gap: 64px;        /* between sections */
}
body.landing, body.info {
  display: block; height: auto; min-height: 100%; padding: 0 16px 48px; margin: 0;
  font: 16px/1.25 var(--vga); color: var(--cga-gray);
  -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed;
}
html:has(body.landing), html:has(body.info) { height: auto; scroll-behavior: smooth; scroll-padding-top: 48px; }
@media (prefers-reduced-motion: reduce) { html:has(body.landing) { scroll-behavior: auto; } }
.landing a, .info a { color: var(--cga-cyan); }
.landing a:focus-visible, .info a:focus-visible, .landing .button:focus-visible { outline: 2px solid var(--cga-yellow); outline-offset: 2px; }

/* menu bar: the gray strip across the top of every DOS program */
.menubar {
  position: sticky; top: 0; z-index: 5; margin: 0 -16px; padding: 0 16px;
  display: flex; flex-wrap: wrap; gap: 0 1ch; align-items: center; min-height: 32px;
  padding-inline: max(16px, calc(16px + (100% - var(--page)) / 2));
  background: var(--cga-gray); color: var(--cga-black);
}
.menubar a { color: var(--cga-black); text-decoration: none; padding: 8px 1ch; }
.menubar a u { color: var(--cga-red); text-decoration: none; }
.menubar a:hover, .menubar a:focus-visible { background: var(--cga-black); color: var(--cga-gray); outline: none; }
.menubar .brand { color: var(--cga-black); background: transparent; padding-left: 0; }
.menubar .join { margin-left: auto; }

/* hero: the headline, then the live dialer */
.hero { max-width: var(--page); margin: 48px auto 24px; }
.kicker { font: 16px/1.25 var(--vga); color: var(--cga-gray); margin: 0 0 16px; }
/* the boards are the headline: big VGA buttons, a status light, the key that dials them */
.boards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 4ch; }
.boards button { font: 32px/1.25 var(--vga); color: var(--cga-white); background: none; border: 0; padding: 4px 0; cursor: pointer; display: flex; align-items: center; gap: 0.5ch; }
.boards button:hover .nm, .boards button:focus-visible .nm { color: var(--cga-cyan); }
.boards button:focus-visible { outline: 2px solid var(--cga-yellow); outline-offset: 4px; }
.boards kbd { font: inherit; background: var(--cga-gray); color: var(--cga-black); padding: 0 0.25ch; }
.boards .light { width: 0.5em; height: 0.5em; margin-right: 0.25ch; background: var(--cga-gray); }
.boards .light.up { background: #55ff55; } .boards .light.down { background: #ff5555; }
.allboards { margin: 16px 0 0; }
.fairline { max-width: 76ch; }
.fairline strong { color: var(--cga-yellow); font-weight: normal; }
/* the sysop pitch, right under the dialer */
.pitch { max-width: var(--page); margin: 0 auto var(--gap); }
.pitch h2 { font: 32px/1.25 var(--vga); color: var(--cga-white); margin: 0 0 16px; }
.cursor { display: inline-block; width: 0.5em; height: 0.125em; margin-left: 0.25em; background: var(--cga-white); vertical-align: baseline; animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
.lede { margin: 0 0 16px; max-width: 64ch; }
.try { margin: 0; color: var(--cga-white); }
.pitch .cta { gap: 16px 3ch; }
kbd { font: inherit; color: var(--cga-black); background: var(--cga-gray); padding: 0 0.5ch; }
.landing .rig { width: min(100%, var(--page)); margin: 0 auto var(--gap); }
.landing .rig .panel, .landing .rig .callbar, .landing .rig .keys { font-family: var(--mono); }   /* the hardware uses a UI face; VGA is for the screen and the page */
.landing .rig .fine { display: none; }    /* the page footer covers credits */

/* windows */
.win {
  position: relative; max-width: var(--page); margin: 0 auto var(--gap); padding: 40px 40px 32px;
  background: var(--cga-blue); border: 6px double var(--cga-gray); box-shadow: 16px 16px 0 var(--cga-black);
}
.win h2 {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); margin: 0; padding: 0 1ch;
  font: 16px/1.25 var(--vga); color: var(--cga-white); background: var(--cga-blue); white-space: nowrap;
}
.win p, .win ul, .win ol, .win dl { margin: 0 0 16px; }
.win > p, .faq dd { max-width: 76ch; }
.win > :last-child { margin-bottom: 0; }
.win strong, .win b, .win dt { color: var(--cga-white); font-weight: normal; }
code { font: inherit; color: var(--cga-cyan); }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 4ch; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: block; font-size: 32px; line-height: 1; color: var(--cga-yellow); margin-bottom: 16px; }
.steps strong { display: block; margin-bottom: 8px; }
.ticks { list-style: none; padding-left: 2ch; }
.ticks li { position: relative; margin-bottom: 4px; }
.ticks li::before { content: "√"; position: absolute; left: -2ch; color: var(--cga-cyan); }
.price { color: var(--cga-white); }
.price .big { font-size: 32px; line-height: 1; color: var(--cga-yellow); margin-right: 1ch; }
.cta { display: flex; flex-wrap: wrap; gap: 8px 2ch; align-items: center; }
.button {
  display: inline-block; padding: 8px 2ch; text-decoration: none;
  background: var(--cga-gray); color: var(--cga-black) !important; box-shadow: 8px 8px 0 var(--cga-black);
}
.button:hover { background: var(--cga-white); }
.button:active { transform: translate(8px, 8px); box-shadow: none; }
.note { color: var(--cga-gray); }
.plan .buy { display: flex; flex-wrap: wrap; gap: 16px 3ch; margin: 16px 0 8px; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 4ch; }
.faq dd { margin: 8px 0 0; color: var(--cga-gray); }

.foot { max-width: var(--page); margin: 0 auto; padding-top: 8px; text-align: center; }
.foot p { margin: 0 0 8px; }

/* plans: two panels inside the pricing window */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr)); gap: 24px 4ch; margin: 0 0 24px; }
.plan { border: 2px solid var(--cga-gray); padding: 24px 3ch 16px; }
.plan h3 { font: inherit; color: var(--cga-white); margin: 0 0 12px; }
.plan .cost { display: block; color: var(--cga-yellow); }
.plan .ticks { margin: 0 0 8px; }

/* features table: Basic and Pro columns */
.feats { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.feats th, .feats td { font: inherit; text-align: left; vertical-align: top; padding: 4px 1ch; }
.feats thead th { color: var(--cga-white); font-weight: normal; border-bottom: 2px solid var(--cga-gray); }
.feats thead th:not(:first-child), .feats td { width: 7ch; text-align: center; }
.feats tbody th { font-weight: normal; color: var(--cga-gray); }
.feats .sub { display: block; color: var(--cga-cyan); opacity: .85; }
.feats .grp th { color: var(--cga-yellow); padding-top: 16px; }
.feats tbody tr:not(.grp):nth-child(even) { background: rgba(0, 0, 0, .18); }
.feats .y { color: var(--cga-white); }
.feats .n { color: var(--cga-gray); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 3ch; }
.legend b { font-weight: normal; }
.legend .y { color: var(--cga-white); } .legend .soon { color: var(--cga-yellow); }
.feats .soon { color: var(--cga-yellow); }
.plan p { margin: 0 0 8px; }

/* Boards on NodeDial */
.pagetitle { font: 32px/1.25 var(--vga); color: var(--cga-white); margin: 0 0 16px; }
.fair { max-width: 76ch; margin: 0 0 24px; padding: 12px 2ch; border: 2px solid var(--cga-gray); color: var(--cga-gray); }
.fair strong { color: var(--cga-yellow); font-weight: normal; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 3ch; }
.filters label { display: flex; align-items: center; gap: 1ch; }
.filters input[type="search"] { font: 16px/1.25 var(--vga); color: var(--cga-white); background: var(--cga-blue); border: 2px solid var(--cga-gray); padding: 6px 1ch; width: 34ch; max-width: 100%; }
.filters input[type="search"]::placeholder { color: var(--cga-gray); opacity: .7; }
.filters input:focus-visible { outline: 2px solid var(--cga-yellow); outline-offset: 2px; }
.filters .chk input { width: 16px; height: 16px; accent-color: var(--cga-cyan); }
.blist { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 40ch), 1fr)); gap: 16px 3ch; }
.board { border: 2px solid var(--cga-gray); padding: 12px 2ch; display: flex; flex-direction: column; gap: 8px; }
.board p { margin: 0; }
.bhead { display: flex; align-items: center; flex-wrap: wrap; gap: 0 1ch; }
.pos { color: var(--cga-yellow); }
.light { display: inline-block; width: 8px; height: 8px; background: var(--cga-gray); }
.light.up { background: #55ff55; } .light.down { background: #ff5555; }
.bname { color: var(--cga-white) !important; text-decoration: none; }
.bname:hover, .bname:focus-visible { color: var(--cga-cyan) !important; text-decoration: underline; }
.badge { color: var(--cga-black); background: var(--cga-cyan); padding: 0 1ch; }
.meta { color: var(--cga-cyan); }
.facts { color: var(--cga-white); }
.nets { color: var(--cga-gray); }
.tags { display: flex; flex-wrap: wrap; gap: 4px 1ch; }
.tag { border: 1px solid var(--cga-cyan); color: var(--cga-cyan); padding: 0 1ch; }
.filters select { font: 16px/1.25 var(--vga); color: var(--cga-white); background: var(--cga-blue); border: 2px solid var(--cga-gray); padding: 5px 1ch; max-width: 100%; }
.bfoot { display: flex; flex-wrap: wrap; gap: 4px 2ch; margin-top: auto !important; }
.call { color: var(--cga-yellow) !important; }
.checked { color: var(--cga-gray); }
.online { color: var(--cga-lgreen, #55ff55); }
.rules { padding-left: 4ch; margin: 0 0 16px; } .rules li { margin-bottom: 8px; }
.check summary { cursor: pointer; color: var(--cga-cyan); }
.check pre { font: inherit; background: var(--cga-black); color: var(--cga-gray); padding: 8px 2ch; overflow-x: auto; margin: 0 0 16px; }
.check pre code { color: var(--cga-gray); }
.codes { border-collapse: collapse; margin: 0 0 16px; width: 100%; }
.codes th, .codes td { font: inherit; text-align: left; padding: 2px 1ch; }
.codes th { color: var(--cga-white); font-weight: normal; border-bottom: 2px solid var(--cga-gray); }
.codes .code { color: var(--cga-cyan); }
.pitch.more p { max-width: 76ch; }

/* info pages (terms, privacy) */
.info .win { margin-top: 48px; }
.info h3 { font: inherit; color: var(--cga-white); margin: 24px 0 8px; }

@media (max-width: 760px) {
  :root { --gap: 40px; }
  .hero { margin-top: 32px; }
  .boards { flex-direction: column; gap: 8px; }
  .win { padding: 32px 2ch 24px; box-shadow: 8px 8px 0 var(--cga-black); }
  .steps, .faq { grid-template-columns: minmax(0, 1fr); }
  .menubar { position: static; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .menubar .join { margin-left: 0; }
  .feats th, .feats td { padding: 4px 0.5ch; }
  .feats thead th:not(:first-child), .feats td { width: 5ch; }
}