/* The pages about X-RAMP that are read before signing in: Capabilities,
   Subscription plans and About. The same dark look as the sign-in page. */
:root{
  --bg:#0b1014; --panel:#141c23; --rule:#24313b;
  --ink:#e9f0f4; --ink-2:#a9b8c3; --ink-3:#6f8190;
  --signal:#1ce783; --signal-glow:rgba(28,231,131,.35);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--signal);text-decoration:none} a:hover{text-decoration:underline}
/* The sign-in page's backdrop: dot grid, two glows, and a slow scan line. */
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.backdrop::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(169,184,195,.13) 1px,transparent 1.2px);background-size:26px 26px;
  mask-image:radial-gradient(ellipse 80% 70% at 35% 45%,#000 30%,transparent 80%)}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.glow.g1{width:620px;height:620px;left:-140px;top:-160px;background:radial-gradient(circle,var(--signal-glow),transparent 70%)}
.glow.g2{width:520px;height:520px;right:-120px;bottom:-200px;background:radial-gradient(circle,rgba(63,169,245,.28),transparent 70%)}
.scan{position:absolute;left:0;right:0;height:180px;top:-180px;
  background:linear-gradient(180deg,transparent,rgba(28,231,131,.05),transparent);animation:scan 9s linear infinite}
@keyframes scan{to{top:110%}}
@media (prefers-reduced-motion:reduce){ .scan{animation:none} }
.page{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}
header{display:flex;align-items:center;gap:12px;padding:22px clamp(16px,4vw,48px)}
.brand{display:flex;align-items:center}
.brand img{height:60px;width:auto;display:block;margin:-10px 0}
.grow{flex:1}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 28px}   /* type: /site-nav.css */
.site-nav a{color:var(--ink-2)}
.site-nav a:hover{color:var(--signal);text-decoration:none}
.site-nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--signal);padding-bottom:3px}
.site-nav .signin{margin-left:6px;padding:7px 14px;border-radius:8px;background:var(--signal);color:#06130c}
.site-nav .signin:hover{color:#06130c;filter:brightness(1.08)}
main{width:100%;max-width:880px;margin:0 auto;padding:36px clamp(16px,4vw,48px) 60px}
h1{font-size:clamp(30px,4vw,44px);line-height:1.1;letter-spacing:-1px;margin:0 0 16px;font-weight:800}
.lede{color:var(--ink-2);font-size:17px;max-width:62ch;margin:0 0 28px}
.soon{padding:22px 24px;border:1px dashed var(--rule);border-radius:12px;background:rgba(20,28,35,.6);color:var(--ink-3)}
.soon b{display:block;color:var(--ink-2);margin-bottom:4px}
footer{padding:18px clamp(16px,4vw,48px) 26px;color:var(--ink-3);font-size:12.5px;border-top:1px solid rgba(36,49,59,.6)}
@media (max-width:640px){ .brand img{height:40px;margin:-4px 0} header{flex-wrap:wrap;padding:14px 16px 4px;gap:0} .grow{display:none} .site-nav{width:100%} main{padding-top:20px} }

/* A page of questions and answers, such as About. */
.qa{padding:22px 0;border-top:1px solid var(--rule)}
.qa:first-of-type{border-top:0;padding-top:4px}
.qa h2{font-size:19px;letter-spacing:-.2px;margin:0 0 10px;color:var(--ink)}
.qa p{color:var(--ink-2);margin:0 0 12px;max-width:72ch}
.qa p:last-child{margin-bottom:0}

/* Capabilities: the four focus areas, one block each, zigzagging down the page:
   the first on the right, the next on the left. The open side carries the area's
   number, so the page reads as a path rather than as gaps. */
main.wide{max-width:1120px}
.area{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:28px;align-items:center;margin:44px 0}
.area.left{grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr)}
.area.left .area-mark{order:2;text-align:left}
.area-mark{text-align:right;padding:0 8px}
.area-num{display:block;font:800 clamp(64px,9vw,112px)/1 var(--sans);letter-spacing:-4px;
  background:linear-gradient(135deg,var(--signal),#3fa9f5);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.85}
.area-count{display:block;margin-top:6px;font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3)}
.area-body{padding:24px 26px;border:1px solid var(--rule);border-radius:14px;background:rgba(20,28,35,.72);
  border-left:3px solid var(--signal)}
.area.left .area-body{border-left:1px solid var(--rule);border-right:3px solid var(--signal)}
.area-body h2{margin:0 0 6px;font-size:22px;letter-spacing:-.3px}
.area-why{margin:0 0 16px;color:var(--ink-2)}
.caps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.caps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}
.caps b{display:block;color:var(--ink);font-size:14.5px}
.caps span{color:var(--ink-2);font-size:14px}
.cap-ic{display:inline-flex;justify-content:center;align-items:center;width:28px;height:28px;border-radius:7px;
  background:rgba(28,231,131,.1);color:var(--signal);font-size:14px;line-height:1}
.cap-ic svg{width:16px;height:16px}
@media (max-width:760px){
  .area,.area.left{grid-template-columns:minmax(0,1fr);gap:8px;margin:30px 0}
  .area .area-mark,.area.left .area-mark{order:0;text-align:left;padding:0}
  .area-num{font-size:56px}
}
/* The introduction on Capabilities, set full justified. */
main.wide .lede{text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* Subscription plans: a monthly or annual switch, and three plans side by side. */
.billing{display:inline-flex;padding:4px;border:1px solid var(--rule);border-radius:999px;background:rgba(20,28,35,.72);margin:0 0 26px}
.billing button{font:600 13.5px var(--sans);color:var(--ink-2);background:none;border:0;padding:8px 18px;border-radius:999px;cursor:pointer}
.billing button.on{background:var(--signal);color:#06130c}
.billing button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:26px 24px;border:1px solid var(--rule);border-radius:14px;background:rgba(20,28,35,.72)}
.plan:hover{border-color:rgba(28,231,131,.45)}
.plan h2{margin:0 0 4px;font-size:21px;letter-spacing:-.3px}
.plan-who{margin:0 0 18px;color:var(--ink-3);font-size:14px;min-height:2.6em}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price .amount{font:800 34px/1.1 var(--sans);letter-spacing:-1px}
.price .per{color:var(--ink-3);font-size:14px}
.plan-alt{margin:6px 0 20px;color:var(--ink-3);font-size:13.5px}
.plan-alt.save{color:var(--signal)}
.feats{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--rule);display:grid;gap:12px}
.feats li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start}
.feats svg{color:var(--signal);margin-top:3px}
.feats b{display:block;color:var(--ink);font-weight:600;font-size:14.5px}
.feats small{display:block;color:var(--ink-3);font-size:12.5px}
.plan-note{margin:26px 0 0;color:var(--ink-2);font-size:14px}
.plan-note b{color:var(--ink)}
@media (max-width:860px){ .plans{grid-template-columns:minmax(0,1fr)} .plan-who{min-height:0} }

/* Real value: cards, each pointing at the capabilities behind it, then the path on to the plans. */
.vps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.vp{position:relative;padding:24px 24px 20px;border:1px solid var(--rule);border-radius:14px;background:rgba(20,28,35,.72);padding-left:68px}
.vp::before{content:"\274B";position:absolute;left:14px;top:8px;font:400 44px/1 var(--sans);color:var(--signal);text-shadow:0 0 14px var(--signal-glow)}
.vp:hover{border-color:rgba(28,231,131,.45)}
.vp-num{position:absolute;right:18px;top:12px;font:800 34px/1 var(--sans);letter-spacing:-1px;opacity:.5;
  background:linear-gradient(135deg,var(--signal),#3fa9f5);-webkit-background-clip:text;background-clip:text;color:transparent}
.vp h2{margin:0 40px 8px 0;font-size:19px;letter-spacing:-.2px}
.vp p{margin:0 0 12px;color:var(--ink-2);font-size:14.5px}
.vp-by{padding-top:12px;border-top:1px solid var(--rule);margin:14px 0 0!important}
.vp-by small{color:var(--ink-3);font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.1em;margin-right:6px}
.vp-mods{display:block;margin-top:4px;color:var(--ink-3);font-size:13px}
.vp-link{margin:44px 0 0;padding:26px;border:1px solid var(--rule);border-radius:14px;background:rgba(20,28,35,.72)}
.vp-link h2{margin:0 0 18px;font-size:22px;letter-spacing:-.3px}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.flow li{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--rule);border-radius:10px}
.flow li+li::before{content:"\2794";position:absolute;left:-44px;top:50%;width:40px;transform:translateY(-50%);text-align:center;font:700 38px/1 var(--sans);color:var(--signal);text-shadow:0 0 14px var(--signal-glow)}
.flow b{color:var(--ink)}
.flow span{color:var(--ink-2);font-size:14px}
.flow a{margin-top:auto;font-weight:600;font-size:14px}
@media (max-width:860px){ .vps,.flow{grid-template-columns:minmax(0,1fr)} .flow{gap:44px} .flow li+li::before{content:"\2193";left:50%;top:-42px;transform:translateX(-50%)} }

/* Phones: text reads left aligned, since justified lines this short leave wide gaps; wide blocks never push the page sideways. */
@media (max-width:760px){
  main.wide .lede{text-align:left;hyphens:none;-webkit-hyphens:none}
  h1{overflow-wrap:anywhere}
  img,svg,table{max-width:100%}
}