/* ------------------------------------------------------------------
   Pillow — app pages (launch, coins, spending, receipts, dashboard,
   docs), styled to match the landing page.

   The landing is a dark site: deep violet ground, white panels with one
   corner cut away, headings in teknolog (wide, uppercase) over body text
   in ki, and a single purple accent. These are the same fonts, the same
   tokens and the same panel geometry, so moving from the landing into
   the app does not feel like a different product.

   Class names are unchanged from the previous stylesheet, so no page
   markup and no app.js needs editing to pick this up.
   ------------------------------------------------------------------ */
@font-face { font-family:'ki'; src:url('/wp-content/themes/startdigital/static/font/ki.woff'); font-display:swap }
@font-face { font-family:'teknolog'; src:url('/wp-content/themes/startdigital/static/font/nb_architekt_bold.woff2'); font-display:swap }

:root{
  /* the landing's own tokens, under the names the app pages already use */
  --brown:#2b0747;          /* deep violet ground */
  --paper:#2b0747;          /* page */
  --surface:#ffffff;        /* panels */
  --soft:#f4f4f4;           /* inset rows, inputs */
  --ink:#2b0747;            /* text on white */
  --muted:#5c5c5c;
  --dim:#8a8a85;
  --line:rgba(43,7,71,.14);
  --line-soft:rgba(43,7,71,.22);
  --surface-2:#f8f8f6;
  --dark:#2b0747;
  --black:#000;
  --white:#fff;
  --green:#8A0BEE;          /* primary accent */
  --green-d:#6b08ba;
  --lime:#eaddff;           /* light accent, dark text on it */
  --accent:#8A0BEE;
  --orange:#9460db;
  --burnt:#6b2eb8;
  --pos:#1e7a30;
  --neg:#c62828;
  --font-head:'teknolog','Arial Narrow',sans-serif;
  --font-body:'ki',ui-sans-serif,system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* one corner cut away, the shape the landing uses on every panel */
  --notch:22px;
}

/* ---- page ---- */
.bp{
  margin:0; background:var(--brown); color:#fff;
  font-family:var(--font-body); font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.bp *{box-sizing:border-box}
.bp a{color:inherit}
.bp ::selection{background:var(--lime); color:var(--brown)}

.bp-main{max-width:1180px; margin:0 auto; padding:132px 16px 96px}
.bp-main.narrow{max-width:820px}
@media (min-width:768px){ .bp-main{padding:150px 32px 120px} }

/* ---- type ---- */
.bp h1,.bp h2,.bp h3,.bp h4{
  font-family:var(--font-head); font-weight:400;
  text-transform:uppercase; letter-spacing:.01em; line-height:1.05; margin:0;
}
.bp h1{font-size:clamp(38px,7vw,76px)}
.bp h2{font-size:clamp(26px,4vw,40px)}
.bp h3{font-size:clamp(19px,2.2vw,24px)}
.bp h1 em{font-style:normal; color:var(--orange)}
.bp .lede{color:rgba(255,255,255,.72); font-size:17px; max-width:62ch; margin:0}
.bp .muted{color:var(--muted)}
.bp-card .muted,.bp-card .lede{color:var(--muted)}
.mono{font-family:var(--font-mono); font-size:13px; word-break:break-all}

/* The landing's section label: a white chip with two bars after it. */
.bp-head{display:flex; flex-direction:column; gap:18px; margin:0 0 40px}
.bp-head h1{max-width:18ch}
.bp-head .lede{color:rgba(255,255,255,.72)}
.bp-section{margin:64px 0 0}
.bp-section>h2{
  display:inline-flex; align-items:center; gap:0; margin:0 0 20px;
  background:#fff; color:var(--brown); padding:6px 16px 4px; font-size:18px;
}
.bp-section>h2::after{
  content:""; display:block; width:9px; height:100%; margin-left:9px;
  background:linear-gradient(to right,#fff 0 5px,transparent 5px 7px,#fff 7px 9px);
}

/* ---- panels: white, one corner cut, no radius ---- */
.bp-card{
  background:var(--surface); color:var(--ink);
  padding:26px; margin:0 0 18px;
  clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.bp-card>h3{margin:0 0 12px}
.bp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px}
.bp-split{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.bp-stack>*+*{margin-top:18px}
.row{display:flex; gap:14px; flex-wrap:wrap}
.row3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:860px){ .bp-split,.row3{grid-template-columns:1fr} }

/* ---- buttons: the landing's square primary ---- */
.bp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--green); color:#fff; border:0; cursor:pointer;
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.03em;
  font-size:14px; padding:14px 22px; text-decoration:none;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition:background .15s, transform .06s;
}
.bp-btn:hover{background:var(--green-d)}
.bp-btn:active{transform:translateY(1px)}
.bp-btn[disabled]{opacity:.5; cursor:not-allowed}
.bp-btn.ghost{background:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.bp-card .bp-btn.ghost{color:var(--brown); box-shadow:inset 0 0 0 1px var(--line-soft)}
.bp-btn.ghost:hover{background:rgba(138,11,238,.10)}
.cabtn{
  font-family:var(--font-head); text-transform:uppercase; font-size:11px;
  background:#fff; color:var(--brown); border:0; padding:5px 10px; cursor:pointer; text-decoration:none;
}

/* ---- forms ---- */
.bp-form{display:flex; flex-direction:column; gap:4px}
/* Dark-on-light rules are scoped to the panel they belong in. On the violet ground the default is
   light, so markup injected outside a panel can never come out dark text on a dark background. */
.bp label{
  display:block; margin:18px 0 6px; font-family:var(--font-head);
  text-transform:uppercase; font-size:12px; letter-spacing:.04em; color:#fff;
}
.bp-card label,.cardface label{color:var(--brown)}
.bp input,.bp select,.bp textarea{
  width:100%; padding:12px 13px; background:var(--soft);
  border:1px solid transparent; border-bottom:1px solid var(--line-soft);
  color:var(--ink); font:inherit; font-size:15px; border-radius:0;
}
.bp input:focus,.bp select:focus,.bp textarea:focus{outline:2px solid var(--green); outline-offset:0; background:#fff}
.bp input::placeholder{color:var(--dim)}

/* ---- tables ---- */
.bp table{width:100%; border-collapse:collapse; font-size:14px}
.bp th{
  text-align:left; font-family:var(--font-head); text-transform:uppercase;
  font-size:11px; letter-spacing:.05em; color:rgba(255,255,255,.6);
  padding:0 10px 8px 0; border-bottom:1px solid rgba(255,255,255,.25);
}
.bp td{padding:11px 10px 11px 0; border-bottom:1px dashed rgba(255,255,255,.2); vertical-align:top}
.bp td.muted{color:rgba(255,255,255,.6); white-space:nowrap}
.bp-card th{color:var(--muted); border-bottom-color:var(--line)}
.bp-card td{border-bottom-color:var(--line)}
.bp-card td.muted{color:var(--muted)}
.bp tr:last-child td{border-bottom:0}
.pos{color:var(--pos)} .neg{color:var(--neg)}

/* ---- pills ---- */
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  font-family:var(--font-head); text-transform:uppercase; font-size:11px; letter-spacing:.04em;
  background:var(--soft); color:var(--muted);
}
.pill.ok{background:rgba(138,11,238,.14); color:var(--green-d)}
.pill.warn{background:#fdf0d8; color:#8a5a00}
.pill.official,.pill.official-token{background:var(--lime); color:var(--brown)}
.kind{font-family:var(--font-head); text-transform:uppercase; font-size:11px; color:var(--muted)}

/* ---- header: the landing's nav, so the two never disagree ---- */
.bp-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 16px; background:transparent;
}
@media (min-width:768px){ .bp-header{padding:24px 32px} }
.brand-mark{display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff}
.brand-logo{width:auto; height:30px; display:block}   /* the mark is wider than tall */
.brand-text{font-family:var(--font-head); font-size:20px; text-transform:uppercase; letter-spacing:.01em}
.bp-nav{display:flex; align-items:center; gap:14px}
.bp-nav a{
  font-family:var(--font-head); text-transform:uppercase; font-size:14px;
  letter-spacing:.03em; text-decoration:none; color:#fff; opacity:.72;
}
.bp-nav a:hover,.bp-nav a.active{opacity:1}
.bp-nav a.active{text-decoration:underline; text-underline-offset:5px}
@media (max-width:860px){ .bp-nav a:not(.navx){display:none} }
.navx{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; opacity:.8}
.navx:hover{opacity:1}
.walletbtn{
  margin-left:6px; border:0; cursor:pointer; background:var(--green); color:#fff;
  font-family:var(--font-head); text-transform:uppercase; font-size:13px; letter-spacing:.03em;
  padding:12px 18px; display:inline-flex; align-items:center; gap:8px;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.walletbtn:hover{background:var(--green-d)}
.walletbtn.connected{background:var(--lime); color:var(--brown)}
.walletbtn small{opacity:.65; font-size:11px}
.walletbtn .dot{width:7px; height:7px; border-radius:50%; background:#35c98b; display:inline-block}

/* the official-coin bar that sits under the header */
.cabar{
  position:fixed; top:74px; left:0; right:0; z-index:40;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 16px; background:rgba(255,255,255,.08); font-size:12px;
  backdrop-filter:blur(6px);
}
@media (min-width:768px){ .cabar{padding:8px 32px} }

/* ---- footer ---- */
.bp-footer{
  border-top:1px dashed rgba(255,255,255,.3); margin-top:72px; padding:28px 0 0;
  display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between;
  color:rgba(255,255,255,.6); font-size:12px;
}
.bp-footer a{text-decoration:none; opacity:.8}
.bp-footer a:hover{opacity:1}

/* ---- the card face ---- */
.cardface{
  background:linear-gradient(135deg,#3a0a60 0%,#2b0747 60%,#1d0431 100%);
  color:#fff; padding:22px; display:flex; flex-direction:column; gap:18px; min-height:215px;
  clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.cardface-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.cardface .pill{background:rgba(255,255,255,.16); color:#fff}
.cardface-brand{font-family:var(--font-head); text-transform:uppercase; font-size:13px; letter-spacing:.06em; opacity:.85}
.cardface-pan{font-family:var(--font-mono); font-size:19px; letter-spacing:.14em}
.cardface-balance{display:flex; flex-direction:column; gap:2px}
.cardface-balance span{font-size:11px; text-transform:uppercase; letter-spacing:.05em; opacity:.6}
.cardface-balance b{font-family:var(--font-head); font-size:30px; font-weight:400}
.cardface-stats{display:flex; gap:22px; flex-wrap:wrap}
.cardface-stats > div{display:flex; flex-direction:column; gap:2px}
.cardface-stats span{font-size:11px; text-transform:uppercase; letter-spacing:.05em; opacity:.6}
.cardface-stats b{font-weight:400; font-size:16px}
.cardface-foot{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.cardface-foot .muted{color:rgba(255,255,255,.6)}
.cardface.frozen{filter:saturate(.3)}
.cardface.pending{opacity:.75}
.cardface.terminated{filter:grayscale(1); opacity:.6}

/* ---- misc ---- */
.steps{margin:0; padding-left:20px; line-height:1.85}
.steps > div{margin:0 0 10px}
.steps b{font-family:var(--font-head); text-transform:uppercase; font-size:13px; letter-spacing:.03em}
.chart{width:100%; height:260px}
.out{
  background:var(--soft); color:var(--ink); padding:16px; margin-top:18px;
  font-family:var(--font-mono); font-size:13px; white-space:pre-wrap; word-break:break-word;
}
.bp-main > a{color:#fff; text-decoration:none; font-size:14px; opacity:.8}
.bp-main > a:hover{opacity:1}
.bp-main a.muted{color:rgba(255,255,255,.6)}