:root{
  /* Light first. Instagram opens white, and so does this. */
  --bg:#fafafa; --surface:#ffffff; --surface-2:#f2f2f5; --line:#dbdbdb; --line-soft:#efefef;
  --fg:#111114; --fg-soft:#111114cc; --fg-dim:#737378; --fg-faint:#a8a8ad;
  --accent:#d6249f; --accent-fg:#ffffff;
  --link:#0095f6;
  --good:#22c55e; --warn:#f59e0b; --bad:#ed4956;

  /* The gradient, in one place. Every ring, badge and primary button is a
     slice of this so they cannot drift apart. */
  --grad:linear-gradient(45deg,#f9ce34 0%,#ee2a7b 45%,#6228d7 100%);
  --grad-soft:linear-gradient(45deg,#f9ce3418,#ee2a7b18,#6228d718);

  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-num:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:12px; --r-lg:18px;
  --topbar:60px;
  --shadow:0 1px 2px #1111140d, 0 8px 24px #1111140a;
  color-scheme:light;
}
[data-theme=dark]{
  --bg:#000000; --surface:#121212; --surface-2:#1c1c1e; --line:#262626; --line-soft:#1f1f1f;
  --fg:#f5f5f7; --fg-soft:#f5f5f7cc; --fg-dim:#a8a8ad; --fg-faint:#6e6e73;
  --accent:#ee2a7b; --accent-fg:#ffffff;
  --link:#4db5ff;
  --shadow:0 1px 2px #00000040, 0 8px 24px #00000030;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg); color:var(--fg); font-family:var(--font-ui);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
a:hover{color:var(--accent)}
button,input,select,textarea{font:inherit; color:inherit}
img{max-width:100%; display:block}
::selection{background:#ee2a7b; color:#fff}

.wrap{max-width:1000px; margin:0 auto; padding:0 20px}
/* Numbers get the monospace face even though prose does not: a column of
   balances that does not line up is a column nobody can compare. */
.num{font-family:var(--font-num); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.dim{color:var(--fg-dim)} .soft{color:var(--fg-soft)} .faint{color:var(--fg-faint)}
.good{color:var(--good)} .warn{color:var(--warn)} .bad{color:var(--bad)}
.link{color:var(--link)}
.break{word-break:break-all}
.micro{font-size:12px} .fine{font-size:13px}
.center{text-align:center}
.hide{display:none !important}
.spacer{flex:1}

/* Text painted with the gradient. Used once per page at most — it is a
   highlight, and a page where everything is highlighted has none. */
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent}

/* ================================================================ SHELL
   A sidebar and a content column, the way an app is laid out rather than the
   way a brochure is.

   The sidebar is its own scroll container at full viewport height, so the nav
   stays put while the ledger scrolls. Height is 100dvh and NOT 100vh: on
   mobile browsers the address bar makes vh taller than the visible area, so
   the bottom of a 100vh sidebar sits under the chrome where nobody can tap it.
*/
:root{ --sidebar-w:244px; }

.shell{display:grid; grid-template-columns:var(--sidebar-w) 1fr; align-items:start;
  transition:grid-template-columns .2s var(--ease)}
/* Collapsed, the sidebar becomes an icon rail.
   The width is overridden HERE rather than on :root, because the grid column
   resolves the variable at this element — so one class changes the column and
   the aside together and they cannot fall out of step mid-animation. */
.shell.mini{--sidebar-w:68px}

.side{position:sticky; top:0; height:100dvh; display:flex; flex-direction:column;
  border-right:1px solid var(--line); background:var(--surface);
  transition:width .2s var(--ease)}
.side-brand{display:flex; align-items:center; gap:10px; padding:18px 18px 14px;
  font-weight:700; font-size:18px; letter-spacing:-.02em}
.side-brand svg{width:28px; height:28px; flex:none}

.side-nav{flex:1; overflow-y:auto; padding:4px 10px 10px}
.side-group{font-size:10.5px; font-weight:700; letter-spacing:.13em; color:var(--fg-faint);
  padding:14px 10px 6px}
.side-nav a{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px;
  font-size:14px; color:var(--fg-dim); font-weight:500;
  transition:background .14s var(--ease), color .14s var(--ease)}
.side-nav a:hover{background:var(--surface-2); color:var(--fg)}
.side-nav a[aria-current=page]{background:var(--grad-soft); color:var(--fg); font-weight:600}
/* The icon is stroked, and inherits the row's colour so the active row lights
   up as one thing rather than text-then-icon. */
.side-nav svg{width:18px; height:18px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.side-nav a[aria-current=page] svg{stroke:url(#navgrad)}

/* ------------------------------------------------------- collapsed rail */
.mini .side-brand{justify-content:center; padding:18px 0 14px}
.mini .side-brand .grad-text{display:none}
.mini .side-nav{padding:4px 8px 10px}
.mini .side-nav a{justify-content:center; padding:11px 0; gap:0}
/* The label is hidden by WIDTH, not display:none — a label that vanishes
   instantly makes the row jump, while one that collapses slides with the
   column. It is still in the DOM, so a screen reader still reads it. */
.mini .side-nav a > :not(svg){width:0; overflow:hidden; opacity:0; white-space:nowrap}
.mini .side-group{height:1px; padding:0; margin:12px 12px; overflow:hidden;
  background:var(--line); color:transparent}
.mini .side-note{display:none}
.mini .side-foot{justify-content:center}
.mini .side-foot span{display:none}

/* The toggle lives at the foot of the rail, where it stays put whether the
   nav is short or long. */
.side-foot{flex:none; display:flex; align-items:center; gap:9px; padding:10px 12px;
  border-top:1px solid var(--line-soft); font-size:12px; color:var(--fg-faint)}
.side-foot button{display:inline-grid; place-items:center; width:30px; height:30px; flex:none;
  border:1px solid var(--line); background:var(--surface); border-radius:9px; cursor:pointer;
  color:var(--fg-dim)}
.side-foot button:hover{color:var(--fg); border-color:var(--fg-faint)}
.side-foot svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--ease)}
.mini .side-foot svg{transform:rotate(180deg)}

/* The note at the bottom of the sidebar. Carries the one sentence that has to
   survive every redesign. */
.side-note{margin:10px; padding:13px 14px; border-radius:14px; border:1px solid var(--line);
  background:var(--grad-soft); font-size:12px; line-height:1.5; color:var(--fg-soft)}
.side-note b{color:var(--fg)}

/* The bar that sits above the content, inside the column. */
.appbar{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  padding:12px 24px; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.content{min-width:0}
/* Anything an anchor can land on clears the sticky bar. Without this,
   /vault/#harvest scrolls the card to y=0 — underneath the app bar, where it
   looks like the link did nothing. */
[id]{scroll-margin-top:78px}
.content .wrap{max-width:none; padding:0 24px}

/* A button that only exists on phones, to open the drawer. */
.menuBtn{display:none}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  /* Off-canvas below 900px: a 244px column on a 360px screen leaves no room
     for the thing the nav is pointing at. */
  .side{position:fixed; left:0; top:0; z-index:60; width:264px;
    transform:translateX(-100%); transition:transform .22s var(--ease);
    box-shadow:0 0 40px #00000026}
  .side.open{transform:none}
  /* On a phone the drawer already closes completely, so the rail would just
     be a second, worse way of hiding the same thing. */
  .shell.mini{--sidebar-w:1fr}
  .mini .side-brand .grad-text,.mini .side-note{display:revert}
  .mini .side-nav a{justify-content:flex-start; padding:9px 10px; gap:11px}
  .mini .side-nav a > :not(svg){width:auto; opacity:1}
  .mini .side-group{height:auto; padding:14px 10px 6px; background:none; color:var(--fg-faint)}
  .side-foot{display:none}
  .menuBtn{display:inline-flex}
  .scrim{position:fixed; inset:0; z-index:55; background:#00000055; opacity:0;
    pointer-events:none; transition:opacity .22s var(--ease)}
  .scrim.on{opacity:1; pointer-events:auto}
  .content .wrap{padding:0 18px}
  .appbar{padding:10px 18px}
}

/* -------------------------------------------------------------- top bar */
.topbar{position:sticky; top:0; z-index:40; height:var(--topbar); display:flex;
  align-items:center; background:var(--surface); border-bottom:1px solid var(--line)}
.topbar-inner{display:flex; align-items:center; gap:22px; width:100%}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px;
  letter-spacing:-.02em}
/* The mark: a rounded square with a ring inside it, filled with the gradient.
   Our own shape, in their colours — not their glyph. */
.brand .mark{width:28px; height:28px; border-radius:9px; background:var(--grad);
  display:grid; place-items:center; flex:none}
.brand .mark::after{content:""; width:11px; height:11px; border-radius:50%;
  border:2px solid #fff}
.nav{display:flex; gap:20px; font-size:14px; color:var(--fg-dim)}
.nav a:hover{color:var(--fg)}
.nav a[aria-current=page]{color:var(--fg); font-weight:600}
.topbar-right{display:flex; align-items:center; gap:8px}

/* -------------------------------------------------------------- buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 18px; border:1px solid var(--line); background:var(--surface);
  color:var(--fg); border-radius:999px; cursor:pointer; font-size:14px; font-weight:600;
  transition:opacity .16s var(--ease), border-color .16s var(--ease)}
.btn:hover{border-color:var(--fg-faint); color:var(--fg)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn:disabled:hover{border-color:var(--line)}
.btn-primary{background:var(--grad); border:0; color:#fff}
.btn-primary:hover{opacity:.9; color:#fff}
/* The flat blue is Instagram's own action colour and reads as "the safe,
   ordinary action" next to the gradient's "the big one". */
.btn-blue{background:var(--link); border:0; color:#fff}
.btn-blue:hover{opacity:.9; color:#fff}
.btn-sm{padding:6px 14px; font-size:13px}
.btn-block{width:100%}
.btn-lg{height:48px; padding:0 28px; font-size:15px}

/* ----------------------------------------------------------------- hero */
.hero{padding:70px 0 48px; background:var(--surface); border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(32px,6vw,56px); line-height:1.05; letter-spacing:-.035em;
  margin:0 0 18px; font-weight:800; max-width:16ch}
.hero .lede{font-size:17px; color:var(--fg-soft); max-width:56ch; margin:0 0 28px; line-height:1.55}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap}

/* Says what the thing is NOT, right under what it is. In the hero on purpose:
   a disclaimer nobody scrolls to is decoration. */
.plainly{margin-top:30px; padding:16px 18px; border-radius:var(--r-lg);
  background:var(--grad-soft); border:1px solid var(--line-soft);
  font-size:14px; color:var(--fg-soft); max-width:68ch; line-height:1.55}
.plainly b{color:var(--fg)}

/* ---------------------------------------------------------------- cards */
.section{padding:44px 0}
.section h2{font-size:24px; letter-spacing:-.025em; margin:0 0 5px; font-weight:800}
.section .sub{color:var(--fg-dim); font-size:14px; margin:0 0 22px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--shadow)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}

.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; box-shadow:var(--shadow)}
.stat .k{font-size:12px; color:var(--fg-dim); font-weight:600}
.stat .v{font-size:28px; margin-top:6px; font-weight:700; letter-spacing:-.03em;
  font-family:var(--font-num); font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- ledger */
.ledger{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow)}
.row{display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row:hover{background:var(--surface-2)}
.row .who{display:flex; align-items:center; gap:12px; min-width:0}
/* The story ring: a gradient donut with the avatar sitting inside it. This is
   the single most recognisable shape in that world, and it is a shape, not a
   logo — which is exactly the line this design walks. */
.row .av{width:44px; height:44px; border-radius:50%; background:var(--grad);
  padding:2.5px; flex:none}
.row .av span{display:grid; place-items:center; width:100%; height:100%; border-radius:50%;
  background:var(--surface); color:var(--fg-dim); font-size:15px; font-weight:600}
.row .handle{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .sub2{font-size:12px; color:var(--fg-dim)}
.row .amt{font-family:var(--font-num); font-variant-numeric:tabular-nums;
  text-align:right; white-space:nowrap; font-weight:600}
.ledger-head{display:grid; grid-template-columns:1fr auto auto; gap:16px; padding:11px 18px;
  font-size:12px; font-weight:600; color:var(--fg-dim); border-bottom:1px solid var(--line)}
.empty{padding:38px 18px; text-align:center; color:var(--fg-dim); font-size:14px}

/* The label that carries the whole honesty claim. A state, not a
   reassurance: amber means nobody has this money yet. */
.tag{display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px;
  font-weight:600; border:1px solid currentColor}
.tag-unclaimed{color:var(--warn)}
.tag-claimed{color:var(--good)}
.tag-blocked{color:var(--fg-faint)}

/* ---------------------------------------------------------------- forms */
.field{display:block; width:100%; padding:12px 14px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px; color:var(--fg);
  /* 16px or iOS Safari zooms the whole page when the field is tapped, and the
     layout stays shifted for the rest of the visit. */
  font-size:16px}
.field:focus{outline:none; border-color:var(--fg-faint); background:var(--surface)}
.field::placeholder{color:var(--fg-faint)}
.label{display:block; font-size:12px; font-weight:600; color:var(--fg-dim); margin:0 0 7px}
.hint{font-size:13px; color:var(--fg-dim); margin-top:8px}
.formrow{margin-bottom:16px}
.code{font-family:var(--font-num); background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px; padding:13px 15px; font-size:14px; word-break:break-all; font-weight:600}

/* ============================================================ PAIR PICKER
   A grid of what the token can be priced against.

   Buttons rather than a select, because the logo is the fastest way to
   recognise a ticker and a native select cannot show one. Wraps rather than
   scrolls: a row that scrolls hides options, and the whole point is that the
   choice is visible. */
.pairgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px}
.pairbtn{display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 6px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px; cursor:pointer;
  transition:border-color .15s var(--ease), background .15s var(--ease)}
.pairbtn:hover{border-color:var(--fg-faint)}
.pairbtn img{width:28px; height:28px; border-radius:7px; object-fit:contain; background:#fff}
.pairmark{width:28px; height:28px; border-radius:7px; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-size:15px; font-weight:700}
.psym{font-size:12px; font-weight:700; letter-spacing:-.01em}
.pkind{font-size:9.5px; color:var(--fg-faint); text-transform:uppercase; letter-spacing:.06em}
/* The chosen one gets the gradient, so the selection reads at a glance rather
   than as a slightly different border. */
.pairbtn.on{border-color:transparent; background:var(--grad-soft)}
.pairbtn.on .psym{background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent}
/* A pair with no pad behind it cannot be launched, and says so rather than
   failing after the choice is made. */
.pairbtn.off{opacity:.42; cursor:not-allowed}
.pairbtn.off:hover{border-color:var(--line)}

.advanced{margin-bottom:16px; border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  background:var(--surface)}
.advanced summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--fg-dim)}
.advanced summary:hover{color:var(--fg)}

/* ---------------------------------------------------------------- steps */
.steps{counter-reset:s; display:grid; gap:12px}
.step{counter-increment:s; display:grid; grid-template-columns:30px 1fr; gap:14px;
  align-items:start; padding:16px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.step::before{content:counter(s); width:30px; height:30px; border-radius:50%;
  background:var(--grad); color:#fff; display:grid; place-items:center;
  font-size:13px; font-weight:700}
.step h3{margin:0 0 3px; font-size:15px; font-weight:700}
.step p{margin:0; font-size:14px; color:var(--fg-soft); line-height:1.5}

/* ---------------------------------------------------------------- notes */
.note{padding:13px 15px; border-radius:12px; font-size:14px; border:1px solid var(--line);
  line-height:1.5}
.note-warn{border-color:#f59e0b55; color:var(--warn); background:#f59e0b12}
.note-bad{border-color:#ed495655; color:var(--bad); background:#ed495612}
.note-good{border-color:#22c55e55; color:var(--good); background:#22c55e12}

footer{border-top:1px solid var(--line); margin-top:56px; padding:28px 0 44px;
  font-size:13px; color:var(--fg-dim); background:var(--surface)}
.foot{display:flex; gap:18px; flex-wrap:wrap; align-items:center}


/* ============================================================ ATMOSPHERE
   Two soft blooms of colour behind the whole page, plus a fine grain.

   Fixed, not scrolled: a gradient that moves with the content reads as a
   background IMAGE, while one that stays put reads as light in the room. The
   grain is what stops a large flat gradient from banding on cheap panels. */
body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(70vw 50vh at 8% -8%, #ee2a7b1f, transparent 62%),
    radial-gradient(60vw 45vh at 96% 4%, #6228d71c, transparent 60%),
    radial-gradient(50vw 40vh at 50% 108%, #f9ce3416, transparent 62%)}
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme=dark] body::before{
  background:
    radial-gradient(70vw 50vh at 8% -8%, #ee2a7b26, transparent 62%),
    radial-gradient(60vw 45vh at 96% 4%, #6228d724, transparent 60%),
    radial-gradient(50vw 40vh at 50% 108%, #f9ce341a, transparent 62%)}
[data-theme=dark] body::after{opacity:.05}
/* The hero sits on the page, not on an opaque panel, so the blooms show. */
.hero{background:transparent}
.topbar{background:color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px)}

/* ================================================================ HERO ART
   A little stack of account cards, floating. It is DECORATION and is marked
   aria-hidden: the handles in it are placeholders, and a screen reader
   announcing them as if they were real accounts would be a small lie told
   automatically. */
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center}
.heroart{position:relative; height:330px}
.fcard{position:absolute; left:0; right:0; display:flex; align-items:center; gap:13px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:14px 16px; box-shadow:0 12px 34px #11111412;
  animation:float 7s ease-in-out infinite}
.fcard img{width:44px; height:44px; border-radius:50%; flex:none}
.fcard .fn{font-weight:700; font-size:14px}
.fcard .fa{font-size:12px; color:var(--fg-dim)}
.fcard .fv{margin-left:auto; text-align:right; font-family:var(--font-num);
  font-weight:700; font-size:14px; letter-spacing:-.02em}
.fcard .fu{font-size:11px; color:var(--warn); font-weight:600}
/* Each card gets its own offset and phase so the stack breathes rather than
   pulsing as one block. */
.fcard:nth-child(1){top:6px;   transform:rotate(-2deg);  animation-delay:0s}
.fcard:nth-child(2){top:104px; transform:rotate(1.4deg); animation-delay:-2.3s; z-index:2}
.fcard:nth-child(3){top:202px; transform:rotate(-1deg);  animation-delay:-4.6s}
@keyframes float{0%,100%{translate:0 0} 50%{translate:0 -9px}}
/* A ring of gradient light behind the stack. */
.heroart::before{content:""; position:absolute; inset:-18% -8%; z-index:-1; border-radius:50%;
  background:var(--grad); opacity:.13; filter:blur(48px)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:30px}
  .heroart{height:300px; max-width:420px}
}

/* =============================================================== FACE WALL
   Two rows of faces sliding past each other behind the hero.

   This is the one thing that says what the site is about before a word is
   read: it is about people. Two rows in OPPOSITE directions, because two
   rows moving the same way read as one thick band sliding, which is much
   duller than it sounds.

   Every row is duplicated in the markup and translated by exactly -50%, or
   there is a visible gap on each wrap. Paused on hover so a face can be
   clicked, and stopped completely by prefers-reduced-motion — a wall of
   moving faces is a genuinely unpleasant page for some people. */
.facewall{position:relative; overflow:hidden; padding:6px 0 2px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.facerow{display:flex; gap:12px; width:max-content; will-change:transform}
.facerow.a{animation:slideL 54s linear infinite}
.facerow.b{animation:slideR 66s linear infinite; margin-top:12px}
.facewall:hover .facerow{animation-play-state:paused}
@keyframes slideL{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes slideR{from{transform:translateX(-50%)} to{transform:translateX(0)}}

.face{position:relative; flex:none; width:62px; height:62px; border-radius:50%;
  background:var(--grad); padding:2px;
  transition:transform .18s var(--ease)}
.face:hover{transform:scale(1.09)}
.face img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
  background:var(--surface-2)}
/* The handle appears under the face on hover, absolutely positioned so it
   cannot push the row and restart the animation mid-scroll. */
.face b{position:absolute; left:50%; top:calc(100% + 5px); transform:translateX(-50%);
  font-size:10.5px; font-weight:600; color:var(--fg-dim); white-space:nowrap;
  opacity:0; transition:opacity .18s var(--ease); pointer-events:none}
.face:hover b{opacity:1}

@media (prefers-reduced-motion:reduce){ .facerow{animation:none} }
@media (max-width:760px){ .face{width:50px; height:50px} }

/* Tiles for accounts nobody has launched for. Same shape as a live tile so
   the grid does not jump when the first real one arrives, but with a photo
   filling it and no figure anywhere — there is nothing to report yet. */
.tile.tile-idle::after{background:linear-gradient(to top,#000000a8 0%,#00000038 50%,transparent 78%)}
.tile .tgo{position:relative; z-index:2; color:#fff; font-size:10px; font-weight:700;
  letter-spacing:.06em; opacity:.85}

/* ============================================================ STOCK STRIP
   The tickers a token can be priced against, sliding past.

   Slower than the face wall and in the same direction as its top row, so the
   two read as one composition rather than two competing animations. The marks
   sit on white chips because several of them are dark logos that vanish on a
   dark page — the chip is what makes one strip work in both themes. */
.stockstrip{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.stkrow{display:flex; gap:10px; width:max-content; animation:slideL 72s linear infinite}
.stockstrip:hover .stkrow{animation-play-state:paused}
.stk{display:flex; align-items:center; gap:8px; flex:none; padding:7px 13px 7px 8px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  transition:border-color .16s var(--ease)}
.stk:hover{border-color:var(--fg-faint)}
.stk img{width:24px; height:24px; border-radius:6px; object-fit:contain; background:#fff;
  padding:2px; flex:none}
.stk b{font-size:12.5px; font-weight:700; letter-spacing:-.01em}
@media (prefers-reduced-motion:reduce){ .stkrow{animation:none} }

/* ============================================================= DIRECTORY
   A dense list of accounts. Two per row on desktop, one on a phone: at 85
   rows a single column is a very long page, and three columns squeezes the
   name to nothing. */
.dlist{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.dcard{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:14px;
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .16s var(--ease), transform .16s var(--ease)}
.dcard:hover{border-color:transparent; transform:translateY(-1px);
  box-shadow:0 6px 20px #6228d71f}
.dring{width:40px; height:40px; border-radius:50%; background:var(--grad); padding:2px; flex:none}
.dring img{width:100%; height:100%; border-radius:50%; display:block;
  /* Portraits are taller than they are wide and the frame is a circle, so
     they are cropped to fill rather than squashed to fit. */
  object-fit:cover; background:var(--surface-2)}
.dmid{min-width:0; flex:1}
.dname{display:block; font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.dhandle{display:block; font-size:12px; color:var(--fg-dim)}
.dright{text-align:right; flex:none}
.dfollow{display:block; font-family:var(--font-num); font-size:13px; font-weight:600}
/* The only part of a row that is not a fixed public fact. It starts as a dash
   and is replaced by whatever the chain says — never by a number from here. */
.dstate{display:block; font-size:11px; color:var(--fg-faint)}
.dstate.has{color:var(--warn); font-weight:600}
@media (max-width:760px){ .dlist{grid-template-columns:1fr} }

/* Attribution. A CC BY-SA photograph used without its credit is simply an
   unlicensed photograph, so this cannot be dropped for tidiness. */
.credits{margin-top:18px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); padding:14px 16px}
.credits summary{cursor:pointer; font-size:13px; font-weight:600}
.creditlist{margin:0; padding-left:18px; font-size:12px; color:var(--fg-dim);
  max-height:260px; overflow-y:auto; line-height:1.7}
.creditlist a{color:var(--link)}

/* ================================================================== BENTO
   A mosaic of panels, not a stack of full-width sections.

   This is the difference between a dashboard and a brochure, and it is the
   whole reason the page was rebuilt: stacked hero-then-stats-then-steps is the
   shape of a landing page, and this is supposed to look like a thing that is
   running.

   Twelve columns and two rows at desktop, so panels can be 7-wide and 5-wide
   and sit side by side at different heights. Below that it collapses to two,
   then one — the row heights go with it, because a fixed 340px row is a
   scrollbar on a phone. */
.bento{display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(330px,auto); gap:14px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:28px;
  overflow:hidden; display:flex; flex-direction:column; min-height:0; box-shadow:var(--shadow)}
.panel-head{display:flex; align-items:center; gap:10px; padding:18px 22px 12px; flex:none}
.panel-head h3{margin:0; font-size:15px; font-weight:700; letter-spacing:-.01em}
.panel-head .sub3{font-size:12px; color:var(--fg-dim)}
.panel-body{flex:1; min-height:0; overflow:hidden; padding:0 14px 14px}
.panel-foot{flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:12px 22px; border-top:1px solid var(--line-soft); font-size:13px; color:var(--fg-dim)}
.panel-foot a:hover{color:var(--accent)}

.c7{grid-column:span 7} .c5{grid-column:span 5}
.c8{grid-column:span 8} .c4{grid-column:span 4}
.c6{grid-column:span 6} .c12{grid-column:span 12}

/* The tile grid inside the accounts panel: three across, two down. */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr);
  gap:10px; height:100%}
.tile{position:relative; border-radius:18px; overflow:hidden; background:var(--surface-2);
  display:flex; flex-direction:column; justify-content:flex-end; padding:12px; min-height:96px;
  transition:transform .2s var(--ease)}
.tile:hover{transform:scale(1.02)}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
/* A scrim under the text, or a light avatar swallows a white label. */
.tile::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,#000000b0 0%,#00000040 45%,transparent 75%)}
.tile .tn,.tile .tv{position:relative; z-index:2; color:#fff}
.tile .tn{font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tile .tv{font-family:var(--font-num); font-size:10.5px; opacity:.85; margin-top:2px}
.tile-empty{grid-column:1/-1; grid-row:1/-1; display:grid; place-items:center;
  border:1px dashed var(--line); border-radius:18px; color:var(--fg-faint); font-size:13px}

/* The centred hero SpotiPaid uses — not a two-column one with art beside it. */
.hero-c{padding:58px 0 34px; text-align:center}
.hero-c h1{font-size:clamp(32px,6vw,56px); line-height:1.08; letter-spacing:-.035em;
  margin:0 auto 20px; font-weight:800; max-width:17ch}
.hero-c .lede{font-size:17px; color:var(--fg-soft); max-width:60ch; margin:0 auto 26px; line-height:1.6}
.hero-c .hero-actions{justify-content:center}
.hero-c .plainly{margin:26px auto 0; text-align:left}

/* A live status line under the hero, the way theirs reads "Paying out @…". */
.pulse{display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); font-size:13px; color:var(--fg-dim)}
.pulse i{width:7px; height:7px; border-radius:50%; background:var(--good); flex:none;
  box-shadow:0 0 0 0 #22c55e66; animation:ping 2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 #22c55e66} 70%{box-shadow:0 0 0 7px #22c55e00} 100%{box-shadow:0 0 0 0 #22c55e00}}

@media (max-width:1100px){
  .bento{grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(300px,auto)}
  .c7,.c5,.c8,.c4,.c6,.c12{grid-column:span 1}
  .c12{grid-column:span 2}
}
@media (max-width:760px){
  .bento{grid-template-columns:1fr; grid-auto-rows:auto}
  .c7,.c5,.c8,.c4,.c6,.c12{grid-column:span 1}
  .panel{min-height:300px}
  .tiles{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr)}
}

/* ================================================================ TICKER
   A strip of recent launches that slides past the top of the page.

   Duplicated in the markup and translated by exactly -50%: with one copy
   there is a visible gap every time it wraps. Paused on hover so a reader can
   actually click one, and stopped dead by prefers-reduced-motion. */
.ticker{background:var(--surface); border-bottom:1px solid var(--line); overflow:hidden;
  position:relative; height:44px; display:flex; align-items:center}
.ticker::before,.ticker::after{content:""; position:absolute; top:0; bottom:0; width:60px; z-index:2;
  pointer-events:none}
.ticker::before{left:0; background:linear-gradient(90deg,var(--surface),transparent)}
.ticker::after{right:0; background:linear-gradient(270deg,var(--surface),transparent)}
.ticker-track{display:flex; gap:0; white-space:nowrap; will-change:transform;
  animation:slide 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.tick{display:inline-flex; align-items:center; gap:9px; padding:0 22px; font-size:13px;
  color:var(--fg-dim); border-right:1px solid var(--line-soft)}
.tick b{color:var(--fg); font-weight:600}
.tick .dot{width:6px; height:6px; border-radius:50%; background:var(--grad); flex:none}

/* ============================================================ CREATOR CARDS
   The grid that carries the product. A card is a whole claim in one glance:
   who, how big the market is, and how much is waiting for them. */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.ccard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease)}
.ccard:hover{transform:translateY(-3px); border-color:transparent;
  box-shadow:0 10px 30px #6228d726, 0 2px 8px #ee2a7b1a}
/* A hairline of gradient along the top edge, revealed on hover. Cheaper to
   read than a full border and it does not shift the layout. */
.ccard::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad);
  opacity:0; transition:opacity .22s var(--ease)}
.ccard:hover::before{opacity:1}
.ccard .top{display:flex; align-items:center; gap:13px; margin-bottom:16px}
.ccard .ring{width:54px; height:54px; border-radius:50%; background:var(--grad); padding:2.5px; flex:none}
.ccard .ring span{display:grid; place-items:center; width:100%; height:100%; border-radius:50%;
  background:var(--surface); font-size:19px; font-weight:700; color:var(--fg-dim)}
.ccard .name{font-weight:700; font-size:16px; letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.ccard .at{font-size:13px; color:var(--fg-dim)}
.ccard .nums{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-top:15px;
  border-top:1px solid var(--line-soft)}
.ccard .nk{font-size:11px; color:var(--fg-dim); font-weight:600; margin-bottom:3px}
.ccard .nv{font-family:var(--font-num); font-variant-numeric:tabular-nums; font-weight:700;
  font-size:16px; letter-spacing:-.02em}

/* ================================================================== FEED */
.feed{display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden}
.fitem{display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center;
  padding:13px 17px; background:var(--surface); font-size:14px}
.fitem:hover{background:var(--surface-2)}
.fitem .amt{font-family:var(--font-num); font-weight:700; letter-spacing:-.02em}
.fitem .when{font-size:12px; color:var(--fg-faint); white-space:nowrap}

/* ================================================================= CHART
   Drawn as inline SVG from real numbers. No chart library: one more script
   from one more domain, for a shape that is forty lines of path data. */
.chart{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--shadow)}
.chart-head{display:flex; align-items:baseline; gap:14px; margin-bottom:6px; flex-wrap:wrap}
.chart-head .big{font-size:30px; font-weight:800; letter-spacing:-.03em;
  font-family:var(--font-num); font-variant-numeric:tabular-nums}
.chart svg{width:100%; height:130px; display:block; overflow:visible}
.chart .gline{fill:none; stroke:url(#gfgrad); stroke-width:2.5; stroke-linecap:round;
  stroke-linejoin:round}
.chart .garea{fill:url(#gffill); opacity:.5}
.chart .gdot{fill:#ee2a7b}
/* A dashed zero line, shown until there is a real series to draw. */
.zeroline{width:100%; height:130px; display:block}
.stepdot{width:26px; height:26px; border-radius:50%; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:700; flex:none}
.chart-empty{height:130px; display:grid; place-items:center; color:var(--fg-faint); font-size:13px;
  border:1px dashed var(--line); border-radius:12px}

/* ============================================================== PIPELINE
   How the money actually moves, named honestly.

   Every box carries the real function it maps to, because "trust the diagram"
   is a weaker claim than "here is the call, go read it". */
.pipe{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; background:var(--surface)}
.pstep{padding:22px; border-right:1px solid var(--line-soft); position:relative}
.pstep:last-child{border-right:0}
.pstep .pk{font-size:11px; font-weight:700; letter-spacing:.14em; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent; margin-bottom:10px}
.pstep h4{margin:0 0 7px; font-size:15px; font-weight:700}
.pstep p{margin:0 0 12px; font-size:13px; color:var(--fg-soft); line-height:1.5}
.pstep code{display:block; font-family:var(--font-num); font-size:11.5px; color:var(--fg-dim);
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:8px;
  padding:8px 10px; word-break:break-all; line-height:1.5}
/* The connector arrow, drawn with borders so it needs no image. */
.pstep:not(:last-child)::after{content:""; position:absolute; right:-7px; top:50%; z-index:1;
  width:13px; height:13px; transform:translateY(-50%) rotate(45deg);
  background:var(--surface); border-top:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft)}

/* =========================================================== ALLOCATION
   The whole supply as one bar.

   Four segments rather than two, because the split stopped being "them and
   us" and became a real allocation: pool, airdrop, launcher, account. The
   pool is 90% of it, so the three small slices need colours that survive at
   a few pixels wide — hence solid fills rather than the gradient, which
   disappears at that size. */
.allocbar{display:flex; height:16px; border-radius:20px; overflow:hidden; background:var(--surface-2)}
.allocbar .al{height:100%}
.al-lp{background:linear-gradient(90deg,#6228d7,#ee2a7b)}
.al-airdrop{background:#f9ce34}
.al-vesting{background:#0095f6}
.al-creator{background:#0095f6}
.al-account{background:#22c55e}
/* The fee bar. Green leads because that segment is the account's, and it is
   the number this page exists to state. */
.al-fee-account{background:#22c55e}
.al-fee-protocol{background:#0095f6}
.al-fee-pool{background:var(--fg-faint)}
.aldot{width:11px; height:11px; border-radius:4px; flex:none; margin-top:4px}
.alloclegend{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 22px; margin-top:16px}
.alitem{display:flex; gap:10px; align-items:flex-start; font-size:13px}
.alvest{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--warn); border:1px solid currentColor; border-radius:20px; padding:1px 7px;
  vertical-align:1px}
@media (max-width:760px){ .alloclegend{grid-template-columns:1fr} }

/* ============================================================== SPLIT BAR */
.splitbar{height:12px; border-radius:20px; overflow:hidden; display:flex; background:var(--surface-2)}
.splitbar .a{background:var(--grad)}
.splitbar .b{background:var(--line)}
.splitlegend{display:flex; gap:18px; margin-top:11px; font-size:13px; flex-wrap:wrap}
.splitlegend i{width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:7px}

/* ============================================================== FOOTER v2 */
.footgrid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:26px; margin-bottom:26px}
.footgrid h5{margin:0 0 11px; font-size:12px; font-weight:700; color:var(--fg)}
.footgrid a{display:block; padding:4px 0; font-size:13px; color:var(--fg-dim)}
.footgrid a:hover{color:var(--accent)}
.footbar{display:flex; gap:16px; flex-wrap:wrap; align-items:center;
  padding-top:20px; border-top:1px solid var(--line)}

/* ============================================================= ANIMATION
   Sections fade up as they arrive. Set by a class from JS rather than by
   animation-delay so an element that is already on screen at load does not
   sit invisible waiting for its turn. */
.reveal{opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none}
  .ticker-track{animation:none}
}
/* A number that counts up to its value when it first appears. The shimmer is
   what plays while it is still unknown. */
.loading{background:linear-gradient(90deg,var(--surface-2),var(--line),var(--surface-2));
  background-size:200% 100%; animation:shimmer 1.3s linear infinite;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent}
@keyframes shimmer{from{background-position:200% 0} to{background-position:-200% 0}}

/* ========================================================= COMMAND PALETTE
   The search SpotiPaid opens with Cmd-K.

   A real overlay rather than a dropdown under the input: it has to sit above
   a sticky sidebar and a sticky app bar, and a dropdown would be clipped by
   one of them. Results are keyboard-navigable because a palette that needs
   the mouse is just a slow search box. */
.palette{position:fixed; inset:0; z-index:80; display:none; padding:12vh 20px 20px;
  background:#00000066; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.palette.on{display:block}
.pal-box{max-width:600px; margin:0 auto; background:var(--surface);
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  box-shadow:0 24px 70px #00000040; animation:palIn .16s var(--ease)}
@keyframes palIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
.pal-in{display:flex; align-items:center; gap:11px; padding:15px 18px;
  border-bottom:1px solid var(--line)}
.pal-in input{flex:1; background:none; border:0; outline:none; font-size:17px; color:var(--fg)}
.pal-in input::placeholder{color:var(--fg-faint)}
.pal-list{max-height:52vh; overflow-y:auto; padding:8px}
.pal-item{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
  cursor:pointer; font-size:14px}
.pal-item img{width:32px; height:32px; border-radius:50%; flex:none}
.pal-item .pi-ico{width:32px; height:32px; border-radius:9px; background:var(--surface-2);
  display:grid; place-items:center; flex:none; color:var(--fg-dim)}
.pal-item .pi-ico svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8}
.pal-item .pi-sub{font-size:12px; color:var(--fg-dim)}
.pal-item .pi-right{margin-left:auto; font-family:var(--font-num); font-size:12px; color:var(--fg-dim)}
/* Hover and keyboard selection are the SAME state, or the two fight: the
   mouse sitting still highlights one row while the arrows move another. */
.pal-item.sel{background:var(--grad-soft)}
.pal-group{font-size:10.5px; font-weight:700; letter-spacing:.13em; color:var(--fg-faint);
  padding:12px 12px 5px}
.pal-foot{display:flex; gap:16px; padding:10px 18px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--fg-faint)}
.pal-foot kbd{font-family:var(--font-num); border:1px solid var(--line); border-radius:5px;
  padding:1px 5px; margin-right:5px}
.pal-empty{padding:26px 12px; text-align:center; color:var(--fg-dim); font-size:13px}

/* ============================================================ SEARCH BOX */
.search{display:flex; align-items:center; gap:9px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px; padding:8px 12px; min-width:230px}
.search input{background:none; border:0; outline:none; font-size:14px; width:100%; color:var(--fg)}
.search input::placeholder{color:var(--fg-faint)}
.search{cursor:pointer}
.search input{cursor:pointer; pointer-events:none}
.search kbd{font-family:var(--font-num); font-size:11px; color:var(--fg-faint);
  border:1px solid var(--line); border-radius:5px; padding:2px 5px; flex:none}

/* --------------------------------------------------------------- mobile */
@media (max-width:820px){
  .grid2,.grid3{grid-template-columns:1fr}
  .hero{padding:44px 0 34px}
  .topbar{height:auto; padding:9px 0}
  .topbar-inner{display:grid; grid-template-areas:"brand right" "nav nav";
    grid-template-columns:1fr auto; gap:9px 10px}
  .brandwrap{grid-area:brand; min-width:0; overflow:hidden}
  .topbar-right{grid-area:right}
  /* A scrollable second row, never display:none — hiding nav on phones is how
     pages end up with sections nobody can reach. */
  .nav{grid-area:nav; width:100%; overflow-x:auto; gap:18px; padding-bottom:2px;
    -webkit-overflow-scrolling:touch}
  .nav a{padding:6px 0; white-space:nowrap}
  .row{grid-template-columns:1fr auto; gap:10px}
  .row .tagcell{grid-column:2; justify-self:end}
  .ledger-head{display:none}
  .cards{grid-template-columns:1fr}
  .pipe{grid-template-columns:1fr}
  .pstep{border-right:0; border-bottom:1px solid var(--line-soft)}
  .pstep:last-child{border-bottom:0}
  .pstep:not(:last-child)::after{display:none}
  .footgrid{grid-template-columns:1fr 1fr}
  .search{display:none}
}
/* ---------------------------------------------------------- account page

   The header of a single account: photograph, name, handle. It is the first
   thing anyone following a shared link sees, and it has to read as a profile
   rather than as a balance sheet — the numbers come after.
*/
.cprofile{display:flex; gap:16px; align-items:center; margin:0 0 18px}
.cprofile img,.cprofile .cavatar{width:84px; height:84px; border-radius:50%; flex:none;
  object-fit:cover; display:block; border:1px solid var(--line);
  background:var(--surface-2)}
.cprofile h2{margin:0 0 2px; font-size:24px; letter-spacing:-.4px}
.cprofile .chandle{margin:0; font-size:14px; color:var(--fg-dim)}
.cprofile .cmeta{margin:5px 0 0; font-size:12.5px; color:var(--fg-faint)}
@media (max-width:560px){
  .cprofile{gap:13px}
  .cprofile img,.cprofile .cavatar{width:64px; height:64px}
  .cprofile h2{font-size:19px}
}

/* The share row. Two actions, equal weight: one copies, one posts. */
.sharerow{display:flex; gap:9px; flex-wrap:wrap; margin-top:15px}
.sharerow .btn{flex:1 1 170px; justify-content:center}

/* The account link in the top bar: the mark alone, squared off.

   No handle beside it, because the destination of an X glyph is the one thing
   on a page nobody needs told. The name still reaches a screen reader through
   aria-label, and a hover still shows it — dropping the text is a visual
   decision, not a reason to make the link unreadable to anyone. */
/*
  Same height as the buttons beside it.

  The first version zeroed the padding to make it square, which threw away the
  vertical padding .btn-sm supplies — so the mark sat in a pill 16px tall next
  to two that were 30px, and read as squashed. The vertical padding is now the
  same as its siblings and only the horizontal is trimmed; the width follows
  from the glyph instead of being declared.
*/
.xbtn{display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; text-decoration:none}
.xbtn:hover{text-decoration:none}
.xbtn svg{flex:none}
/*
  It is NOT hidden on phones.

  The first version dropped it below 420px to protect room for Connect, which
  put it outside the width of most phones — so on the device where people are
  most likely to be checking whether a page is genuine, the one mark that says
  so was gone. Measured instead: on a 360px screen the bar needs 250px of its
  324px, and the search field is already hidden by then. It fits.
*/
@media (max-width:760px){
  .appbar{gap:10px}
  .xbtn{padding:6px 9px}
}

/* The official account link. Small on purpose: it is a signature, not a
   call to action, and a large one beside the disclaimer reads like an ad. */
.xlink{display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; color:var(--fg-dim); text-decoration:none; border-radius:999px;
  border:1px solid var(--line); transition:color .15s var(--ease), border-color .15s var(--ease)}
.xlink:hover{color:var(--fg); border-color:var(--fg-faint); text-decoration:none}
.xlink svg{flex:none}
.footbar .xlink{margin-left:14px}
@media (max-width:760px){ .footbar .xlink{margin-left:0} }

/* Touch screens have no hover, and a button whose fill only appears on hover
   looks like an empty outline on a phone. */
@media (hover:none){
  .btn:hover{border-color:var(--line)}
  .btn-primary:hover,.btn-blue:hover{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}