/* ============================================================================
   Public pages: landing, legal, 404.

   Same tokens, same type rule, same components. One deliberate difference:
   these are DOCUMENTS, so they scroll and they have a measure. The workspace
   is a fixed three-column frame that never scrolls as a whole; the site is a
   column of full-bleed bands. Pretending the marketing page is a dashboard is
   how a product ends up with a fake dashboard on its front page.
   ========================================================================== */

body.site{overflow:auto;height:auto;min-height:100%;}
/* The band must stick, and a sticky element only sticks inside its own parent's
   box, so the wrapper is what sticks and not the band inside it. */
body.site > #band{position:sticky;top:0;z-index:50;}
/* The public band's primary action is green for the same reason a takeoff
   clearance is: it is the "go" of this product. Amber stays reserved for the
   upgrade, which is the thing you cannot do yet. */
.band .btn.here{color:var(--cy);background:var(--s2);box-shadow:inset 0 -2px 0 var(--cy);font-weight:600;}
.band .btn.band-go{background:var(--gr-bg);color:var(--gr);border-left:1px solid var(--rule-soft);border-right:none;font-weight:600;}
.band .btn.band-go:hover{background:#d6ecdb;color:var(--gr);}

/* Width is assigned by what a band contains, not set once and inherited:
   1340  the product screenshot, the biggest object on the page
   1180  tables and lists, which want room
    840  prose and the FAQ, which want a measure
    70ch section intros

   The left edge is held constant across all of them on purpose. Varying the
   container width and re-centring each one would move the left edge from band
   to band, which reads as an accident rather than a decision, so the narrower
   things are capped inside the wide container instead. */
.inner{max-width:1180px;margin:0 auto;padding:0 26px;}
.inner.wide{max-width:1340px;}
.inner.narrow{max-width:860px;}

/* A band, not a "section with generous padding". The hard seam between them is
   the same seam the workspace uses between its regions. */
/* Vertical space is a hierarchy, not a constant: the plans band gets the most
   air because it is where the decision happens, the reference bands get the
   least because they are meant to be scanned. */
.sect{border-bottom:2px solid var(--rule-hard);padding:46px 0;}
.sect.tight{padding:32px 0;}
.sect.air{padding:64px 0;}
.sect.flush{padding:0;}
.sect.raise{background:var(--s1);}

.sect-head{max-width:70ch;margin-bottom:26px;}
.sect-head .h2{margin:10px 0 8px;}
.sect-head .prose{margin:0;}

/* ---------------------------------------------------------------- opening -- */
/* One short statement, then a large picture of the thing running at a busy
   airport. On a light page the screenshot is the darkest object on screen, so
   it takes the attention without needing a headline to shout. */
.open{padding:34px 0 0;}
.open .stmt{max-width:60ch;}
.open .h1{font-size:clamp(30px,3.6vw,44px);line-height:1.04;margin:12px 0 14px;
  max-width:15ch;text-wrap:balance;}
.open .h1 em{font-style:normal;color:var(--cy);}
.open .lede{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--tx2);max-width:58ch;}
.open .cta-row{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 8px;align-items:center;}
.open .cta-note{font-size:11px;color:var(--tx4);}

.shot{
  margin-top:24px;border:1px solid var(--rule-hard);background:var(--scope);
  max-width:1040px;margin-left:auto;margin-right:auto;overflow:hidden;
}
.shot img, .shot video{
  display:block;width:100%;height:auto;max-height:480px;object-fit:cover;object-position:center;
}
.shot .cap{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 14px;background:var(--s1);border-top:1px solid var(--rule-hard);
  font-size:10.5px;color:var(--tx3);
}
.shot .cap .sp{flex:1;}
.shot .cap b{color:var(--tx2);font-weight:500;}

/* The board on the landing page is the same strip list as the bay, dropped into
   a framed well so it reads as a component of the product rather than a table
   someone drew on a marketing page. */
.boardwell{border:1px solid var(--rule);border-bottom:none;background:var(--s2);}
.boardwell .bw-head{
  display:flex;align-items:center;gap:12px;padding:9px 14px;background:var(--s1);
  border-bottom:1px solid var(--rule-hard);
}
.boardwell .bw-head .t{font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--tx3);}
.boardwell .bw-head .sp{flex:1;}
.boardwell .bw-grp{
  display:flex;align-items:center;gap:11px;padding:9px 14px 8px;background:var(--s1);
  border-bottom:1px solid var(--rule-hard);border-top:1px solid var(--rule-hard);
}
.boardwell .bw-grp:first-child{border-top:none;}
.boardwell .bw-grp .t{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--tx2);}
.boardwell .bw-grp .r{flex:1;height:1px;background:var(--rule-soft);}
.boardwell .bw-grp .m{font-size:10px;color:var(--tx4);}
.boardwell .strip{padding-right:16px;}
.boardwell .strip:last-child{border-bottom:none;}
.boardwell .bw-foot{
  display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--s1);
  border-top:1px solid var(--rule-hard);border-bottom:1px solid var(--rule);
  font-size:11px;color:var(--tx3);flex-wrap:wrap;
}

/* --------------------------------------------------------------- positions -- */
/* The five keys, at rest. Same component as the setup screen, so a visitor who
   signs on meets them again in the same shape, doing the same thing.

   They are not five equal things. Three of them are the tower cab and two are
   the radar, and the two groups cannot be worked at once. Laying them out 3 + 2
   says that before the paragraph has to. */
.poskeys{display:grid;grid-template-columns:3fr 2fr;gap:26px;align-items:start;}
.poskeys .grp > b{
  display:block;margin-bottom:9px;font-size:9.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--tx3);font-weight:400;
}
.poskeys .grp > b i{font-style:normal;color:var(--tx4);letter-spacing:.04em;text-transform:none;}
.poskeys .row{display:grid;grid-template-columns:repeat(3,1fr);}
.poskeys .grp.radar .row{grid-template-columns:repeat(2,1fr);}
.poskeys .k{border:1px solid var(--rule);margin-right:-1px;padding:14px 14px 16px;background:var(--s1);}
.poskeys .k .c{font-size:17px;font-weight:600;color:var(--cy);}
.poskeys .k .n{font-family:var(--sans);font-size:12.5px;color:var(--tx);margin:5px 0 4px;}
.poskeys .k .d{font-size:10.5px;color:var(--tx3);line-height:1.55;}

.two{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.three > *{border:1px solid var(--rule);margin-right:-1px;padding:16px 18px;background:var(--s1);}
.three .h3{margin-bottom:6px;}
.three .prose{font-size:12px;}

/* ------------------------------------------------------------------ plans -- */
/* Not two pricing cards. One ledger: rows are capabilities, columns are plans.
   It is denser, it is honest about what Free already gives you, and it is the
   same table component the logbook uses. */
.plans{border:1px solid var(--rule);background:var(--s1);}
.plantop{display:grid;grid-template-columns:minmax(0,1.6fr) 168px 210px;border-bottom:2px solid var(--rule-hard);}
.plantop > div{padding:16px 18px;border-right:1px solid var(--rule-soft);}
.plantop > div:last-child{border-right:none;background:var(--s2);}
.plantop .nm{font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--tx3);}
.plantop .pr{font-family:var(--sans);font-variation-settings:'wdth' 88;font-weight:700;
  font-size:30px;line-height:1.1;margin:6px 0 2px;}
.plantop .pr.was{font-size:15px;color:var(--tx4);text-decoration:line-through;font-weight:400;margin-right:7px;}
.plantop .pr.now{color:var(--am);}
.plantop .sub{font-size:11px;color:var(--tx3);}
.plantop .btn{margin-top:12px;}

.ptable{width:100%;border-collapse:collapse;}
.ptable tr > *:nth-child(2),.ptable tr > *:nth-child(3){width:168px;text-align:center;}
.ptable tr > *:nth-child(3){width:210px;background:rgba(217,172,101,.11);}
.ptable th{
  text-align:left;padding:8px 18px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tx4);font-weight:400;background:var(--s0);border-bottom:1px solid var(--rule-hard);
  border-top:1px solid var(--rule-hard);
}
.ptable td{padding:9px 18px;border-bottom:1px solid var(--rule-soft);font-size:12px;color:var(--tx2);}
.ptable tr:hover td{background:var(--s2);}
.ptable td:first-child{color:var(--tx);}
.ptable .mark{display:inline-block;width:10px;height:10px;border:1px solid var(--rule);}
.ptable .mark.y{background:var(--gr);border-color:var(--gr-dim);}
.ptable .mark.p{background:var(--am);border-color:var(--am-dim);}
.ptable .n{font-size:11px;color:var(--tx4);}

/* -------------------------------------------------------------------- faq -- */
.faq details{border-bottom:1px solid var(--rule-soft);}
.faq{max-width:840px;}
.faq details:first-of-type{border-top:1px solid var(--rule-hard);}
.faq summary{
  display:flex;align-items:baseline;gap:14px;padding:13px 0;cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:13.5px;color:var(--tx);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .q{flex:1;}
.faq summary .n{font-family:var(--mono);font-size:10px;color:var(--tx4);flex:none;width:22px;}
.faq summary .m{font-family:var(--mono);font-size:14px;color:var(--tx4);flex:none;}
.faq details[open] summary .m{color:var(--cy);}
.faq details[open] summary{color:var(--cy);}
.faq .a{padding:0 0 15px 36px;}
.faq .a .prose{font-size:12.5px;}

/* ----------------------------------------------------------------- footer -- */
/* One ruled block with the disclaimers that actually matter to this product.
   Not four columns of links to pages that do not exist. */
.foot{padding:26px 0 40px;color:var(--tx4);font-size:11.5px;line-height:1.75;}
.foot .row{display:flex;gap:26px;flex-wrap:wrap;align-items:baseline;margin-bottom:16px;}
.foot .row .sp{flex:1;}
.foot a{color:var(--tx3);}
.foot a:hover{color:var(--cy);}
.foot .legal{max-width:76ch;}

/* ------------------------------------------------------------------- doc --- */
/* Legal. Prose in Archivo, at 15px, in a 68ch measure. The type rule says a
   human wrote this, so it is not set in the data face. A sticky index on the
   left because a legal page is consulted, not read start to finish. */
.doc{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:calc(100vh - var(--band-h));}
.doc .idx{
  border-right:1px solid var(--rule-hard);background:var(--s1);
  position:sticky;top:var(--band-h);align-self:start;overflow:auto;
  height:calc(100vh - var(--band-h));
}
.doc .idx .rail-lbl{padding:14px 14px 8px;}
.doc .idx a{
  display:flex;gap:9px;align-items:baseline;padding:7px 14px 7px 11px;
  border-left:3px solid transparent;color:var(--tx2);font-size:11.5px;
}
.doc .idx a .n{color:var(--tx4);font-size:10px;}
.doc .idx a:hover{background:var(--s2);color:var(--tx);}
.doc .idx a.on{background:var(--s2);border-left-color:var(--cy);color:var(--tx);}
.doc .idx .meta{padding:14px;border-top:1px solid var(--rule-soft);font-size:10.5px;
  color:var(--tx4);line-height:1.7;margin-top:8px;}

.doc .docbody{padding:34px 40px 80px;max-width:900px;}
.doc .docbody > header{margin-bottom:8px;}
.doc .docbody .h1{margin:10px 0 6px;}
.doc section{padding:28px 0;border-bottom:1px solid var(--rule-soft);scroll-margin-top:calc(var(--band-h) + 14px);}
.doc section:last-of-type{border-bottom:none;}
.doc h2{font-family:var(--sans);font-variation-settings:'wdth' 88;font-weight:700;font-size:20px;
  margin:0 0 12px;display:flex;gap:12px;align-items:baseline;}
.doc h2 .n{font-family:var(--mono);font-size:11px;color:var(--cy);font-weight:400;}
.doc h3{font-family:var(--sans);font-weight:600;font-size:13.5px;color:var(--tx);margin:22px 0 6px;}
.doc p,.doc li{font-family:var(--sans);font-size:14px;line-height:1.68;color:var(--tx2);max-width:68ch;}
.doc p{margin:0 0 11px;}
.doc strong{color:var(--tx);font-weight:600;}
.doc ul{margin:0 0 12px;padding-left:0;list-style:none;max-width:68ch;}
.doc ul li{position:relative;padding-left:18px;margin:5px 0;}
.doc ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--tx4);}
.doc a{color:var(--cy);}
.doc code,.doc .val{font-family:var(--mono);font-size:12.5px;color:var(--tx);}
/* A pull-out for the sentences that carry real consequences. Amber, because on
   this product amber has always meant "read this before you move". */
.doc .note{
  border:1px solid var(--am-dim);background:var(--am-bg);
  padding:13px 15px;margin:16px 0;max-width:68ch;
}
.doc .note p{margin:0;font-size:13px;color:var(--tx2);}
.doc .note p + p{margin-top:8px;}
/* the live document's own secondary paragraph and the disclaimer block */
.doc p.muted{color:var(--tx3);font-size:13px;}
.doc .updated{font-size:12px;color:var(--tx3);margin-bottom:10px;}
.doc h2 .n{font-family:var(--mono);font-size:11px;color:var(--cy);font-weight:400;}
.doc section > h3:first-of-type{margin-top:14px;}

/* ------------------------------------------------------------------- 404 --- */
/* The good idea in the existing 404 was "radar contact lost". Kept. The giant
   Arial numeral, the animated sweep and the glow are gone: this is a strip that
   has no field behind it, laid on the pad like any other. */
.lost{display:grid;place-items:center;min-height:calc(100vh - var(--band-h));padding:40px 26px;}
.lost .sheet{width:min(820px,100%);border:1px solid var(--rule-hard);background:var(--s2);}
.lost .sh{display:flex;align-items:center;gap:12px;padding:11px 18px;background:var(--s1);
  border-bottom:2px solid var(--rule-hard);}
.lost .sh .t{flex:1;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--am);}
.lost .grid{display:grid;grid-template-columns:1fr 280px;}
.lost .left{padding:26px 24px;border-right:1px solid var(--rule-soft);}
.lost .right{padding:26px 20px;background:var(--s1);}
.lost .big{font-family:var(--sans);font-variation-settings:'wdth' 86;font-weight:700;
  font-size:32px;line-height:1.04;margin:11px 0 8px;}
.lost .routes{margin-top:22px;border-top:1px solid var(--rule-soft);}
.lost .routes a{
  display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--rule-soft);border-left:3px solid transparent;
  padding-left:11px;margin-left:-11px;
}
.lost .routes a:hover{background:var(--s2);border-left-color:var(--cy);}
.lost .routes a .n{font-size:10px;color:var(--tx4);}
.lost .routes a .t{display:block;font-family:var(--sans);font-size:13px;color:var(--tx);}
.lost .routes a .d{display:block;font-size:10.5px;color:var(--tx3);margin-top:3px;}
.lost .routes a .go{font-size:10px;letter-spacing:.14em;color:var(--tx4);}
.lost .routes a:hover .go{color:var(--cy);}

/* ------------------------------------------------------------- responsive -- */
@media (max-width:1040px){
  .two,.three{grid-template-columns:1fr;}
  .three > *{margin-right:0;margin-bottom:-1px;}
  .poskeys{grid-template-columns:1fr;gap:20px;}
  .poskeys .k{margin-bottom:-1px;}
  .plantop{grid-template-columns:1fr;}
  .plantop > div{border-right:none;border-bottom:1px solid var(--rule-soft);}
  .ptable tr > *:nth-child(2){width:96px;}
  .ptable tr > *:nth-child(3){width:110px;}
  .doc{grid-template-columns:1fr;}
  .doc .idx{position:static;height:auto;border-right:none;border-bottom:1px solid var(--rule-hard);}
  .doc .docbody{padding:26px 22px 60px;}
  .lost .grid{grid-template-columns:1fr;}
  .lost .left{border-right:none;border-bottom:1px solid var(--rule-soft);}
}

@media (max-width:760px){
  .hide-md{display:none !important;}
  .hide-sm{display:none !important;}
  .inner{padding:0 18px;}
  .sect{padding:38px 0;}
  .sect.tight{padding:26px 0;}
  .sect.air{padding:44px 0;}
  .open .h1{font-size:clamp(28px,6vw,38px);max-width:100%;margin:10px 0 12px;}
  .open .lede{font-size:14px;line-height:1.55;}
  .shot{margin-top:18px;}
  .shot img, .shot video{max-height:280px;}
  .shot .cap{font-size:10px;gap:8px;}

  /* Flight strip responsive layout on airport board */
  .boardwell .bw-head, .boardwell .bw-grp{padding:8px 14px;}
  .boardwell .bw-grp .m{display:none;}
  .boardwell .strip, .strip{
    grid-template-columns:44px auto minmax(0,1fr) auto !important;
    column-gap:10px;min-height:52px;padding:6px 14px 6px 0;
  }
  .strip .dia{width:44px;min-width:44px;}
  .strip .code{font-size:14px;white-space:nowrap;}
  .strip .sub{display:none;}
  .strip .ttl{font-size:13px;white-space:normal;line-height:1.25;overflow:visible;text-overflow:clip;}
  .strip .meta{font-size:10px;gap:6px;flex-wrap:wrap;margin-top:2px;}
  .strip .right{gap:6px;}
  .strip .right .tag:not(.gr):not(.am){display:none !important;}

  /* Positions cards stacked cleanly */
  .poskeys .row, .poskeys .grp .row, .poskeys .grp.radar .row{grid-template-columns:1fr !important;gap:6px;}
  .poskeys .k{margin-right:0;margin-bottom:0;padding:12px 14px;}
  .poskeys .k .c{font-size:16px;}
  .poskeys .k .n{font-size:12.5px;margin:4px 0;}
  .poskeys .k .d{font-size:11px;}

  /* Plans ledger */
  .plantop > div{padding:14px 16px;}
  .plantop .pr{font-size:26px;}
  .ptable th, .ptable td{padding:8px 12px;font-size:11.5px;}
  .ptable tr > *:nth-child(2), .ptable tr > *:nth-child(3){width:75px;}
  .ptable .n{display:block;font-size:10px;margin-top:2px;}

  /* FAQ */
  .faq summary{font-size:13.5px;padding:12px 0;}
  .faq .a{padding:0 0 14px 28px;}

  /* Footer */
  .foot{padding:22px 0 36px;}
  .foot .row{flex-direction:column;gap:14px;align-items:stretch;}
  .foot .row .btn{text-align:center;justify-content:center;width:100%;}
  .foot .row a:not(.btn){display:inline-block;margin-right:14px;margin-bottom:6px;}
}

@media (max-width:480px){
  .band .cell{display:none !important;}
  .band .mark{padding:0 10px;border-right:none;}
  .band .btn:not(.band-go):not([href="#plans"]){display:none !important;}

  .inner{padding:0 14px;}
  .sect{padding:30px 0;}
  .sect.tight{padding:20px 0;}
  .sect.air{padding:34px 0;}
  .open .cta-row{flex-direction:column;align-items:stretch;gap:8px;}
  .open .cta-row .btn{width:100%;text-align:center;justify-content:center;padding:12px 18px;}
  .shot{margin-top:14px;}
  .shot img, .shot video{max-height:200px;}
  .shot .cap{flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;}
  .shot .cap .sp{display:none;}

  .boardwell .strip, .strip{
    grid-template-columns:36px auto minmax(0,1fr) auto !important;
    column-gap:8px;padding-right:10px;min-height:48px;
  }
  .strip .dia{width:36px;min-width:36px;}
  .strip .dia svg{transform:scale(0.85);}
  .strip .code{font-size:13px;}
  .strip .ttl{font-size:12px;}
  .strip .meta{font-size:9px;}
  .boardwell .bw-foot{font-size:10px;flex-direction:column;align-items:flex-start;gap:6px;padding:9px 12px;}

  .ptable th, .ptable td{padding:7px 8px;font-size:11px;}
  .ptable tr > *:nth-child(2), .ptable tr > *:nth-child(3){width:56px;padding:7px 4px;}
  .ptable .mark{width:8px;height:8px;}

  .faq summary .n{width:18px;font-size:9px;}
  .faq summary .q{font-size:13px;}
  .faq .a{padding:0 0 12px 20px;}
  .faq .a .prose{font-size:12px;}
}


/* ============================================================================
   Landing-only: the account chip in the band, the founding-offer note, and the
   post-purchase overlay. The overlay keeps the markup landing.js drives.
   ========================================================================== */
.band-acct{display:flex;align-items:center;}
.band-acct:empty{display:none;}
.band .discord-nav{color:var(--tx2);}
.band .discord-nav:hover{background:var(--s3);color:#5865F2;}

.offer-note{
  margin-top:12px;padding:9px 11px;border:1px solid var(--am-dim);background:var(--am-bg);
  font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--am);
}
.offer-note b{color:var(--am);font-weight:600;}
.offer-note code{
  font-family:var(--mono);background:var(--s2);border:1px solid var(--am-dim);
  padding:1px 5px;color:var(--tx);
}

/* ------------------------------------------------------ the welcome sheet -- */
/* Shown after checkout. Three states, driven by data-state on the section:
   confirming → waiting on the webhook, pro → confirmed, fail → not confirmed. */
.welcome{
  position:fixed;inset:0;z-index:100;overflow:auto;background:var(--s0);
  display:grid;place-items:center;padding:40px 26px;
}
.welcome[hidden]{display:none;}
.welcome .wel-inner{width:min(760px,100%);background:var(--s2);border:1px solid var(--rule-hard);padding:30px 32px 26px;}
.welcome .wel-confirming,.welcome .wel-main,.welcome .wel-fail{display:none;}
.welcome[data-state="confirming"] .wel-confirming,
.welcome[data-state="pro"] .wel-main,
.welcome[data-state="fail"] .wel-fail{display:block;}

.welcome .wel-badge{
  display:inline-flex;align-items:center;gap:9px;padding:4px 9px;
  border:1px solid var(--gr-dim);background:var(--gr-bg);color:var(--gr);
  font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
}
.welcome .wel-badge-amber{border-color:var(--am-dim);background:var(--am-bg);color:var(--am);}
.welcome .wel-spin{width:7px;height:7px;background:var(--gr);animation:wel-pulse 1.2s steps(1) infinite;}
@keyframes wel-pulse{50%{opacity:.3;}}
.welcome .wel-title{
  font-family:var(--sans);font-variation-settings:'wdth' 88;font-weight:700;
  font-size:clamp(24px,3vw,32px);line-height:1.06;margin:14px 0 8px;color:var(--tx);
}
.welcome .wel-lede{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--tx2);max-width:60ch;margin:0;}
.welcome .wel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:22px 0 0;}
.welcome .wel-card{border:1px solid var(--rule);margin:0 -1px -1px 0;padding:14px 16px;background:var(--s1);}
.welcome .wel-card h3{font-family:var(--sans);font-weight:600;font-size:13px;margin:0 0 4px;color:var(--tx);}
.welcome .wel-card p{font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--tx3);margin:0;}
.welcome .wel-ic{display:block;width:18px;height:18px;margin-bottom:8px;color:var(--cy);}
.welcome .wel-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;}
.welcome .wel-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.welcome .wel-foot{font-family:var(--mono);font-size:11px;color:var(--tx4);margin:14px 0 0;}
.welcome .btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;
  border:1px solid var(--gr-dim);background:var(--gr-bg);color:var(--gr);border-radius:2px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
}
.welcome .btn-primary:hover{background:#d6ecdb;border-color:var(--gr);}
.welcome .btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;
  border:1px solid var(--rule);background:var(--s3);color:var(--tx);border-radius:2px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
}
.welcome .btn-ghost:hover{background:var(--s4);border-color:var(--bevel);}

@media (max-width:700px){ .welcome .wel-grid{grid-template-columns:1fr;} }