/* ============================================================================
   Phase & Cipher

   Flat, structural, typographic. No ambient gradients, no blurred orbs, no
   film grain, no cursor glow. Hierarchy is carried by type size and hairline
   rules, and the accent appears maybe six times on the whole page.
   ========================================================================= */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root{
  --bg:#0b0b0c;
  --bg-2:#0f0f11;
  --ink:#ededef;
  --ink-2:#a1a1a8;
  --ink-3:#6e6e77;
  --rule:rgba(255,255,255,.10);
  --rule-2:rgba(255,255,255,.055);
  --accent:#8b5cf6;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --gut:clamp(20px,5vw,64px);
  --max:1180px;
}

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; }
::selection{ background:var(--accent); color:#fff; }

.shell{ max-width:var(--max); margin:0 auto; padding:0 var(--gut); }

/* Small monospace labels. The typographic signature of the page: they mark
   every section and every metadata line, so the eye learns the system. */
.label{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--gut); top:12px; z-index:99; background:var(--ink); color:var(--bg); padding:8px 14px; }

/* ---------- nav ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,12,.86);
  -webkit-backdrop-filter:saturate(140%); backdrop-filter:saturate(140%);
  border-bottom:1px solid var(--rule);
}
.nav-in{ display:flex; align-items:center; gap:28px; height:58px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; letter-spacing:-.01em; }
.brand img{ width:22px; height:22px; display:block; }
.nav-links{ display:flex; gap:22px; margin-left:auto; align-items:center; }
.nav-links a{
  font-size:13.5px; color:var(--ink-2); text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid transparent; transition:color .15s, border-color .15s;
}
.nav-links a:hover{ color:var(--ink); border-bottom-color:var(--accent); }
.nav-cta{ color:var(--ink)!important; font-weight:500; }
@media (max-width:820px){ .nav-links a:not(.nav-cta){ display:none } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 22px; border-radius:2px;
  font-size:14.5px; font-weight:500; font-family:var(--sans);
  text-decoration:none; cursor:pointer; border:1px solid var(--rule);
  background:transparent; color:var(--ink);
  transition:background .15s, border-color .15s, color .15s;
}
.btn:hover{ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.04); }
.btn-primary{ background:var(--ink); color:#0b0b0c; border-color:var(--ink); font-weight:600; }
.btn-primary:hover{ background:#fff; border-color:#fff; color:#0b0b0c; }
.btn-accent{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.btn-accent:hover{ background:#7c3aed; border-color:#7c3aed; }

/* ---------- hero ---------- */
header.hero{ border-bottom:1px solid var(--rule); padding:clamp(64px,12vw,132px) 0 clamp(52px,8vw,88px); }
.wordmark{
  font-size:clamp(44px,10.5vw,116px); line-height:.92; font-weight:600;
  letter-spacing:-.045em; margin:22px 0 0;
}
.wordmark .amp{ color:var(--accent); font-weight:400; }
.hero-sub{
  margin-top:26px; max-width:38ch;
  font-size:clamp(17px,2.4vw,21px); line-height:1.45; color:var(--ink-2);
}
.hero-sub strong{ color:var(--ink); font-weight:600; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:38px; padding-top:22px; border-top:1px solid var(--rule-2); }

/* ---------- section frame ----------
   Two columns: a sticky label rail on the left, content on the right. This is
   what makes the page read as a document rather than a stack of cards. */
section{ border-bottom:1px solid var(--rule); padding:clamp(52px,8vw,92px) 0; }
.row{ display:grid; grid-template-columns:180px 1fr; gap:clamp(24px,5vw,64px); align-items:start; }
.rail{ position:sticky; top:88px; }
.rail .num{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.14em; }
.rail .name{ margin-top:6px; font-size:13.5px; color:var(--ink-2); }
@media (max-width:840px){
  .row{ grid-template-columns:1fr; gap:20px; }
  .rail{ position:static; display:flex; gap:12px; align-items:baseline; }
  .rail .name{ margin-top:0; }
}

h2{ font-size:clamp(26px,4.2vw,40px); line-height:1.12; letter-spacing:-.03em; font-weight:600; }
.lede{ margin-top:14px; max-width:62ch; color:var(--ink-2); font-size:16.5px; }

/* ---------- services: a list, not cards ---------- */
.list{ margin-top:38px; border-top:1px solid var(--rule-2); }
.item{
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--rule-2);
}
.item h3{ font-size:19px; font-weight:500; letter-spacing:-.015em; }
.item p{ color:var(--ink-3); font-size:14.5px; font-family:var(--mono); letter-spacing:.01em; }

/* ---------- portals ---------- */
.portals{ margin-top:38px; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px; background:var(--rule-2); border:1px solid var(--rule-2); }
.portal{ background:var(--bg); padding:24px 22px; text-decoration:none; display:block; transition:background .15s; }
.portal:hover{ background:var(--bg-2); }
.portal h3{ font-size:17px; font-weight:500; margin:10px 0 8px; letter-spacing:-.01em; }
.portal p{ font-size:14.5px; color:var(--ink-2); line-height:1.5; }
.portal .url{ display:block; margin-top:14px; font-family:var(--mono); font-size:12.5px; color:var(--accent); }
.portal:hover .url{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- process ---------- */
.steps{ margin-top:38px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(20px,4vw,44px); }
.step .n{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.14em; }
.step h3{ margin:12px 0 8px; font-size:18px; font-weight:500; letter-spacing:-.01em; }
.step p{ color:var(--ink-2); font-size:15px; }

/* ---------- pricing ---------- */
.price-card{ margin-top:38px; border:1px solid var(--rule); }
.price-head{ padding:26px 26px 22px; border-bottom:1px solid var(--rule-2); }
.price-amt{ font-size:clamp(38px,7vw,60px); font-weight:600; letter-spacing:-.04em; line-height:1; margin-top:12px; }
.price-robux{ margin-top:8px; font-family:var(--mono); font-size:12.5px; color:var(--ink-3); }
.price-note{ margin-top:16px; color:var(--ink-2); max-width:46ch; }
.price-body{ display:grid; grid-template-columns:1fr 300px; }
@media (max-width:760px){ .price-body{ grid-template-columns:1fr } }
.incl{ padding:24px 26px; border-right:1px solid var(--rule-2); }
@media (max-width:760px){ .incl{ border-right:0; border-bottom:1px solid var(--rule-2) } }
.incl ul{ list-style:none; margin-top:14px; }
.incl li{ padding:9px 0 9px 20px; position:relative; color:var(--ink-2); font-size:15px; border-bottom:1px solid var(--rule-2); }
.incl li:last-child{ border-bottom:0 }
.incl li::before{ content:""; position:absolute; left:0; top:17px; width:7px; height:1px; background:var(--accent); }
.pay{ padding:24px 26px; display:flex; flex-direction:column; gap:10px; }
.pay .btn{ width:100%; }
.fineprint{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); line-height:1.7; margin-top:6px; }

/* ---------- faq ---------- */
.faq{ margin-top:38px; border-top:1px solid var(--rule-2); }
details{ border-bottom:1px solid var(--rule-2); }
summary{ list-style:none; cursor:pointer; padding:18px 0; font-size:16.5px; font-weight:500;
  display:flex; justify-content:space-between; gap:20px; align-items:center; transition:color .15s; }
summary::-webkit-details-marker{ display:none }
summary:hover{ color:var(--accent) }
summary::after{ content:"+"; font-family:var(--mono); color:var(--ink-3); font-size:17px; }
details[open] summary::after{ content:"\2212"; }
details .a{ padding:0 0 20px; color:var(--ink-2); max-width:66ch; }

/* ---------- footer ---------- */
footer{ padding:38px 0 46px; }
.foot{ display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; }
.foot a{ font-size:13.5px; color:var(--ink-2); text-decoration:none; }
.foot a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.foot .spacer{ margin-left:auto }

/* ---------- document pages (terms, privacy, success) ---------- */
.doc{ padding:clamp(48px,8vw,86px) 0 clamp(60px,10vw,110px); }
.doc h1{ font-size:clamp(30px,5.4vw,50px); font-weight:600; letter-spacing:-.035em; line-height:1.08; margin-top:16px; }
.doc .updated{ margin-top:14px; }
.doc-body{ margin-top:clamp(34px,6vw,56px); display:grid; grid-template-columns:180px 1fr; gap:clamp(24px,5vw,64px); align-items:start; }
@media (max-width:840px){ .doc-body{ grid-template-columns:1fr; gap:24px } }
.toc{ position:sticky; top:88px; display:flex; flex-direction:column; gap:9px; }
.toc a{ font-size:13.5px; color:var(--ink-3); text-decoration:none; transition:color .15s; }
.toc a:hover{ color:var(--ink) }
@media (max-width:840px){ .toc{ position:static; flex-direction:row; flex-wrap:wrap; gap:8px 18px } }
.prose{ max-width:70ch; }
.prose h2{ font-size:19px; font-weight:600; letter-spacing:-.012em; margin:38px 0 10px; padding-top:22px; border-top:1px solid var(--rule-2); }
.prose h2:first-child{ margin-top:0; padding-top:0; border-top:0 }
.prose p{ color:var(--ink-2); margin:10px 0; }
.prose ul{ margin:12px 0 12px 0; list-style:none; }
.prose li{ color:var(--ink-2); padding:6px 0 6px 20px; position:relative; }
.prose li::before{ content:""; position:absolute; left:0; top:15px; width:7px; height:1px; background:var(--accent); }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.prose strong{ color:var(--ink); font-weight:600; }

/* centred confirmation page */
.center-page{ min-height:72vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.center-page h1{ font-size:clamp(34px,7vw,64px); font-weight:600; letter-spacing:-.04em; margin:16px 0 0; }

/* data tables inside prose */
.prose table{ width:100%; border-collapse:collapse; margin:14px 0; font-size:14.5px; }
.prose th{ text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400; padding:8px 12px 8px 0;
  border-bottom:1px solid var(--rule); }
.prose td{ padding:10px 12px 10px 0; color:var(--ink-2); border-bottom:1px solid var(--rule-2);
  vertical-align:top; }
.prose td:first-child{ color:var(--ink); }
.table-wrap{ overflow-x:auto; }

/* numbered steps used on the confirmation page */
.numsteps{ margin-top:34px; border-top:1px solid var(--rule-2); max-width:62ch; }
.numstep{ display:grid; grid-template-columns:34px 1fr; gap:14px; padding:18px 0;
  border-bottom:1px solid var(--rule-2); }
.numstep .n{ font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.14em; padding-top:3px; }
.numstep h3{ font-size:17px; font-weight:500; letter-spacing:-.01em; }
.numstep p{ color:var(--ink-2); margin-top:5px; font-size:15px; }

/* ============================================================================
   CashFlow page
   ========================================================================= */

/* stat strip under the hero */
.stats{ display:flex; flex-wrap:wrap; gap:0; margin-top:38px; border:1px solid var(--rule); }
.stat{ flex:1 1 150px; padding:18px 22px; border-right:1px solid var(--rule-2); }
.stat:last-child{ border-right:0 }
@media (max-width:620px){
  .stat{ flex:1 1 100%; border-right:0; border-bottom:1px solid var(--rule-2) }
  .stat:last-child{ border-bottom:0 }
}
.stat .v{ font-size:30px; font-weight:600; letter-spacing:-.03em; line-height:1 }
.stat .k{ margin-top:6px }

/* feature grid: hairline cells, no shadows, no lift */
.features{ margin-top:38px; display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:1px; background:var(--rule-2); border:1px solid var(--rule-2); }
.feature{ background:var(--bg); padding:22px; }
.feature h3{ font-size:16.5px; font-weight:600; letter-spacing:-.012em; }
.feature p{ margin-top:8px; font-size:14.5px; color:var(--ink-2); line-height:1.55; }

/* Discord mock. Deliberately plain: a titled panel with a hairline, so it reads
   as a screenshot of the product rather than a decorated card. */
.demo{ margin-top:32px; border:1px solid var(--rule); background:var(--bg-2); overflow:hidden; }
.demo-bar{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--rule-2); }
.demo-bar .ch{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.demo-body{ padding:18px; display:flex; flex-direction:column; gap:16px; min-height:220px; }
.msg{ display:flex; gap:12px; align-items:flex-start; }
.av{ width:36px; height:36px; flex:0 0 36px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:14px; font-weight:600; background:#2b2b31; color:var(--ink); overflow:hidden }
.av img{ width:100%; height:100%; object-fit:cover; display:block }
.mhead{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.mname{ font-weight:600; font-size:14.5px }
.mname.b{ color:#a78bfa }
.tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; background:var(--accent);
  color:#fff; padding:2px 5px; border-radius:2px; text-transform:uppercase }
.mtime{ font-size:11.5px; color:var(--ink-3) }
.mtext{ margin-top:3px; font-size:14.5px; color:var(--ink-2) }
.mtext .cmd{ font-family:var(--mono); color:#a78bfa }
/* the accent bar down the left is how Discord itself marks an embed */
.emb{ margin-top:6px; border-left:3px solid var(--accent); background:#141418; padding:14px 16px; max-width:460px }
.emb h4{ font-size:15px; font-weight:600; margin-bottom:8px }
.emb .desc{ font-size:14px; color:var(--ink-2); margin-bottom:10px }
.emb .grid{ display:flex; flex-wrap:wrap; gap:14px 26px }
.emb .f .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
.emb .f .v{ font-size:14.5px; margin-top:2px }
.emb .foot{ margin-top:12px; padding-top:9px; border-top:1px solid var(--rule-2);
  font-family:var(--mono); font-size:11px; color:var(--ink-3) }
.demo-dots{ display:flex; gap:6px; margin-top:14px }
.demo-dots i{ width:20px; height:2px; background:var(--rule); cursor:pointer; transition:background .2s }
.demo-dots i.on{ background:var(--accent) }

.invite-note{ margin-top:14px; max-width:52ch }