/* ==========================================================================
   Pramaan — site system

   Ink, bone and brass, with oxblood held back for the seal. The reference is
   a notarised instrument rather than a software landing page: ruled lines,
   engraved pattern, numerals set large, and very little said twice.

   Motion is slow and decelerating. Nothing bounces, nothing glows.
   ========================================================================== */

:root {
  color-scheme: dark;

  --ink:      #0A0A0B;
  --ink-1:    #101012;
  --ink-2:    #17171A;
  --rule:     #26252A;
  --rule-2:   #37352F;

  --bone:     #ECE6DA;
  --bone-2:   #CBC4B6;
  --stone:    #8E887D;
  --stone-2:  #625E56;

  --paper:    #EDE8DE;
  --paper-2:  #E2DBCD;
  --paper-ink:#151413;
  --paper-mut:#5E584E;
  --paper-rule:#CDC4B3;

  --brass:    #B8935C;
  --brass-hi: #D7BC8F;
  --brass-lo: #7A6340;
  --seal:     #6F2B26;
  --seal-hi:  #8E3A33;

  --serif: "Newsreader", "Iowan Old Style", "Sitka Banner", Georgia, serif;
  --sans:  "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", -apple-system, system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --deva:  "Tiro Devanagari Hindi", "Nirmala UI", "Kohinoor Devanagari", serif;

  --ease:   cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --gutter: clamp(20px, 4.4vw, 64px);
  --maxw:   1320px;
}

* { box-sizing: border-box; }
/* Scrollbars in the site's ink and brass: thin, rounded, no arrow buttons. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2a2925; border-radius: 11px; border: 3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--brass-lo); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-width: thin; scrollbar-color: #2a2925 var(--ink); } }
:root { --tsel-bg: var(--ink-1); --tsel-line: var(--rule-2); --tsel-text: var(--bone); --tsel-text-2: var(--bone-2); --tsel-text-3: var(--stone); --tsel-hover: var(--ink-2); --tsel-accent: var(--brass); --tsel-thumb: #2a2925; --tsel-font: 400 15px/1.45 var(--sans); --tsel-radius: 3px; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}
img, svg, canvas { display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--brass); color: var(--ink); }

/* Fine grain, so large dark fields read as a material rather than a void. */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ type */

.serif { font-family: var(--serif); }
.display {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.028em; line-height: .98;
  font-size: clamp(3.1rem, 8.4vw, 8.6rem); margin: 0;
  font-variation-settings: "opsz" 72;
}
.h1 {
  font-family: var(--serif); font-weight: 300; letter-spacing: -.022em; line-height: 1.02;
  font-size: clamp(2.5rem, 5.6vw, 5.4rem); margin: 0; font-variation-settings: "opsz" 72;
}
.h2 {
  font-family: var(--serif); font-weight: 350; letter-spacing: -.018em; line-height: 1.06;
  font-size: clamp(2rem, 3.6vw, 3.4rem); margin: 0; font-variation-settings: "opsz" 60;
}
.h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
.lead { font-size: clamp(1.05rem, 1.25vw, 1.22rem); line-height: 1.6; color: var(--bone-2); max-width: 44ch; margin: 0; }
.label {
  font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--stone);
}
.label.brass { color: var(--brass); }
.num { font-family: var(--serif); font-weight: 300; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.03em; }
.it { font-style: italic; }
.muted { color: var(--stone); }

/* --------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
section { position: relative; }

/* --------------------------------------------------------------- controls */

.btn {
  --h: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: var(--h); padding: 0 26px; border-radius: 2px;
  font: 500 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  cursor: pointer; white-space: nowrap; border: 1px solid transparent;
}
.btn .arrow { width: 18px; height: 10px; transition: transform .45s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-solid { background: var(--bone); color: var(--ink); }
.btn-solid:hover { background: #fff; }
.btn-line { border-color: var(--rule-2); color: var(--bone); }
.btn-line:hover { border-color: var(--bone-2); }
.btn-ink { background: var(--paper-ink); color: var(--paper); }
.btn-ink:hover { background: #000; }
.btn-sm { --h: 38px; padding: 0 18px; font-size: 11.5px; }

.link {
  display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 var(--sans);
  letter-spacing: .08em; text-transform: uppercase; color: var(--bone);
  padding-bottom: 6px; border-bottom: 1px solid var(--rule-2); transition: border-color .35s var(--ease);
}
.link:hover { border-color: var(--brass); }
.link .arrow { width: 16px; height: 9px; transition: transform .45s var(--ease); }
.link:hover .arrow { transform: translateX(4px); }

/* ------------------------------------------------------------------ nav */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 76px;
  transition: background .5s var(--ease), border-color .5s var(--ease), height .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.solid { background: rgba(10, 10, 11, .86); backdrop-filter: blur(14px) saturate(1.1); border-bottom-color: var(--rule); height: 64px; }
.nav .wrap { display: flex; align-items: center; height: 100%; gap: 40px; }
.nav .links { display: flex; gap: 30px; }
.nav .links a { font: 400 13.5px/1 var(--sans); color: var(--bone-2); transition: color .3s; }
.nav .links a:hover, .nav .links a.on { color: var(--bone); }
.nav .grow { flex: 1; }

.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand svg { width: 26px; height: 26px; }
.brand .seal-logo { width: 30px; height: 30px; flex: none; }
.brand .word { font: 500 13px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; }

.nav .acts { display: flex; align-items: center; gap: 28px; }
.nav .signin { font: 400 13.5px/1 var(--sans); color: var(--bone-2); transition: color .3s; }
.nav .signin:hover, .nav .signin.on { color: var(--bone); }
.nav .links .m-only { display: none; }

.menu-btn { display: none; background: none; border: 0; color: var(--bone); padding: 8px; cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }

/* A label never breaks across two lines: between desktop and tablet the bar tightens
   its spacing instead, and below 1024px it folds into the menu button. */
.nav .links a, .nav .signin, .nav .cta { white-space: nowrap; }
.nav .brand, .nav .acts { flex: none; }
@media (max-width: 1280px) {
  .nav .wrap { gap: 30px; }
  .nav .links { gap: 24px; }
  .nav .acts { gap: 22px; }
}
@media (max-width: 1140px) {
  .nav .wrap { gap: 18px; }
  .nav .links { gap: 15px; }
  .nav .acts { gap: 16px; }
  .nav .cta { padding: 0 13px; letter-spacing: .05em; }
  .nav .links a, .nav .signin { font-size: 13px; }
  .brand .word { letter-spacing: .26em; }
}

/* ------------------------------------------------------- the Market, live
   Two numbers in the bar, and an "i" that opens their history: a card set like the rest
   of the site, ruled and quiet, whose own scrollbar appears only while it scrolls. */

.pulse { flex: none; }
.pulse[hidden] { display: none; }
.pulse-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 5px 0 13px;
  border: 1px solid var(--rule-2); border-radius: 999px; background: rgba(236, 230, 218, .02);
  color: var(--stone); font: 400 12.5px/1 var(--sans); white-space: nowrap; cursor: pointer;
  transition: border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.pulse-btn:hover, .pulse-btn[aria-expanded="true"] { border-color: var(--brass-lo); background: rgba(184, 147, 92, .06); color: var(--bone-2); }
.pulse-btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.pulse .live-dot { width: 6px; height: 6px; }
.pulse .pv b { font: 500 12.5px/1 var(--mono); color: var(--bone); font-variant-numeric: tabular-nums; }
.pulse .psep { width: 1px; height: 12px; background: var(--rule-2); }
.pulse .pi { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--brass); transition: color .3s, background .3s; }
.pulse .pi svg { width: 16px; height: 16px; }
.pulse-btn:hover .pi, .pulse-btn[aria-expanded="true"] .pi { color: var(--brass-hi); background: rgba(184, 147, 92, .13); }

.lc-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(5, 5, 6, .38); opacity: 0; transition: opacity .3s var(--ease); }
.lc-scrim.on { opacity: 1; }
.lc {
  position: fixed; z-index: 61; top: 86px; right: var(--gutter); width: min(424px, calc(100vw - 32px)); max-height: calc(100vh - 100px);
  display: flex; flex-direction: column; overflow: hidden; outline: none;
  background: linear-gradient(180deg, rgba(23, 23, 26, .97), rgba(14, 14, 16, .985));
  border: 1px solid var(--rule-2); border-radius: 4px;
  box-shadow: 0 1px 0 rgba(236, 230, 218, .04) inset, 0 28px 70px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35);
  backdrop-filter: blur(18px) saturate(1.1);
  opacity: 0; transform: translateY(-6px); transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.lc::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; z-index: 1; opacity: .6;
  background: linear-gradient(90deg, transparent, var(--brass) 28%, var(--brass-hi) 50%, var(--brass) 72%, transparent);
}
.lc.on { opacity: 1; transform: none; }
.lc[hidden], .lc-scrim[hidden] { display: none; }
.lc-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.lc-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.lc-thumb { position: absolute; top: 0; right: 4px; width: 3px; border-radius: 2px; background: var(--brass-lo); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.lc.scrolling .lc-thumb { opacity: .95; transition-duration: .12s; }

.lc-head { position: relative; padding: 22px 24px 16px; }
.lc-kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.lc-kicker .live-dot { width: 6px; height: 6px; }
.lc-head h2 { margin: 13px 0 0; font: 300 26px/1.1 var(--serif); letter-spacing: -.016em; color: var(--bone); font-variation-settings: "opsz" 48; }
.lc-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--stone); cursor: pointer; transition: color .3s, border-color .3s; }
.lc-x:hover { color: var(--bone); border-color: var(--rule-2); }
.lc-x:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.lc-x svg { width: 16px; height: 16px; }

.lc-tabs { display: flex; margin: 0 24px; border-bottom: 1px solid var(--rule); }
.lc-tabs button { position: relative; flex: 1; height: 38px; background: none; border: 0; color: var(--stone); font: 500 11px/1 var(--mono); letter-spacing: .16em; cursor: pointer; transition: color .3s; }
.lc-tabs button::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 1px; background: var(--brass-hi); transform: scaleX(0); transition: transform .45s var(--ease); }
.lc-tabs button:hover { color: var(--bone-2); }
.lc-tabs button[aria-selected="true"] { color: var(--bone); }
.lc-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.lc-tabs button:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }

.lc-body { padding: 2px 24px 4px; transition: opacity .3s var(--ease); }
.lc.loading .lc-body { opacity: .5; }
.lc-m { padding: 18px 0 16px; border-bottom: 1px solid var(--rule); }
.lc-m:last-child { border-bottom: 0; }
.lc-mh { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lc-ml { font: 500 10.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
.lc-chip { font: 400 11.5px/1 var(--sans); color: var(--stone); white-space: nowrap; }
.lc-chip.up { color: #8FBBA2; }
.lc-chip.down { color: #C98A80; }
.lc-big { display: flex; align-items: baseline; gap: 10px; margin: 11px 0 12px; }
.lc-big b { font-size: 40px; line-height: 1; color: var(--bone); }
.lc-big span { font: 400 13px/1.3 var(--sans); color: var(--stone); }
.lc-chart { position: relative; height: 78px; }
.lc-m[data-m="apps"] .lc-chart { color: var(--brass-hi); }
.lc-m[data-m="sales"] .lc-chart { color: var(--bone-2); }
.lc-m[data-m="visitors"] .lc-chart { color: #8FBBA2; }
.lc-m.off .lc-chart { opacity: .35; }
.lc-chart svg { width: 100%; height: 78px; overflow: visible; cursor: crosshair; touch-action: pan-y; }
.lc-chart .g { stroke: var(--rule); stroke-width: 1; }
.lc-chart .g.faint { stroke-dasharray: 2 4; opacity: .55; }
.lc-chart .ln { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease); }
.lc-chart .in .ln { stroke-dashoffset: 0; }
.lc-chart .fill { opacity: 0; transition: opacity .9s .25s var(--ease); }
.lc-chart .in .fill { opacity: 1; }
.lc-chart .bar { fill: currentColor; opacity: .5; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .8s var(--ease), opacity .25s; }
.lc-chart .in .bar { transform: scaleY(1); }
.lc-chart .bar.on { opacity: 1; }
.lc-chart .pt { fill: var(--ink-1); stroke: currentColor; stroke-width: 1.2; opacity: 0; transition: opacity .25s; }
.lc-chart .pt.on { opacity: 1; }
.lc-chart .empty { fill: var(--stone-2); font: 400 11px/1 var(--mono); letter-spacing: .08em; }
.lc-chart .cur { stroke: var(--stone); stroke-width: 1; stroke-dasharray: 2 3; transition: opacity .2s; }
.lc-tip {
  position: absolute; bottom: calc(100% + 6px); z-index: 2; padding: 7px 10px; white-space: nowrap; pointer-events: none;
  background: var(--ink); border: 1px solid var(--rule-2); border-radius: 3px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  font: 400 12px/1.3 var(--sans); color: var(--bone-2);
}
.lc-tip[hidden] { display: none; }
.lc-tip b { font: 500 12.5px/1 var(--mono); color: var(--bone); }
.lc-tip span { display: block; margin-top: 5px; font: 400 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--stone); }
.lc-axis { display: flex; justify-content: space-between; margin-top: 9px; font: 400 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--stone-2); }
.lc-note { margin: 0; padding: 16px 24px 22px; border-top: 1px solid var(--rule); background: rgba(10, 10, 11, .45); font: 400 12px/1.65 var(--sans); color: var(--stone); }
.lc-note a { color: var(--bone-2); border-bottom: 1px solid var(--rule-2); transition: color .3s, border-color .3s; }
.lc-note a:hover { color: var(--bone); border-color: var(--brass); }
.lc-upd { display: block; margin-top: 9px; font: 400 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--stone-2); }
html.lc-lock { overflow: hidden; }

.pulse.tight .pw { display: none; }
@media (max-width: 1280px) { .pulse .pw { display: none; } }
@media (max-width: 600px) {
  .nav .wrap { gap: 14px; }
  .pulse-btn { height: 30px; gap: 7px; padding-left: 10px; }
  .lc { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-height: 86vh; border-radius: 12px 12px 0 0; border-bottom: 0; transform: translateY(28px); }
  .lc.on { transform: none; }
  .lc-head { padding-top: 26px; }
  .lc-head::before { content: ""; position: absolute; top: 9px; left: 50%; width: 36px; height: 3px; margin-left: -18px; border-radius: 2px; background: var(--rule-2); }
}
@media (prefers-reduced-motion: reduce) {
  .lc, .lc-scrim, .lc-chart .ln, .lc-chart .fill, .lc-chart .bar { transition: none; }
}

/* ---------------------------------------------------------------- footer
   The same footer on every page, set like the foot of a certificate: the seal and
   the promise on the left, the index on the right, the name engraved beneath. */

.site-foot {
  position: relative; overflow: hidden; color: var(--stone); border-top: 1px solid var(--rule);
  background: radial-gradient(90% 70% at 88% 0%, rgba(184, 147, 92, .07), transparent 62%), var(--ink);
}
.site-foot .foot-in { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); gap: 64px; padding-top: 92px; padding-bottom: 48px; }

.site-foot .footlogo { display: inline-flex; align-items: center; gap: 14px; color: var(--bone); }
.site-foot .footlogo img { width: 38px; height: 38px; flex: none; }
.site-foot .footlogo b { font: 400 29px/1 var(--serif); font-variation-settings: "opsz" 48; letter-spacing: -.012em; color: var(--bone); }
.site-foot .footlogo em { font: normal 400 17px/1 var(--deva); color: var(--brass); letter-spacing: .02em; transform: translateY(2px); }
.site-foot .footsay {
  margin: 26px 0 0; max-width: 28ch; color: var(--bone-2); letter-spacing: -.01em;
  font: 300 clamp(1.45rem, 2.1vw, 1.85rem)/1.22 var(--serif); font-variation-settings: "opsz" 36;
}
.site-foot .footsay i { color: var(--brass-hi); }

.site-foot .footlive { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 24px 0 0; font: 400 12.5px/1.5 var(--sans); color: var(--stone); }
.site-foot .footlive[hidden] { display: none; }
.site-foot .footlive b { font: 500 13px/1 var(--mono); color: var(--bone); font-variant-numeric: tabular-nums; }
.site-foot .fl-sep { color: var(--stone-2); }
.live-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #79A98E; box-shadow: 0 0 0 4px rgba(121, 169, 142, .16); animation: footPulse 2.6s var(--ease-io) infinite; }
@keyframes footPulse { 50% { box-shadow: 0 0 0 7px rgba(121, 169, 142, 0); } }

.site-foot .venture { display: block; margin-top: 22px; font: 400 13px/1.6 var(--sans); color: var(--stone); }
.site-foot .venture a { color: var(--bone-2); border-bottom: 1px solid var(--rule-2); transition: color .3s, border-color .3s; }
.site-foot .venture a:hover { color: var(--bone); border-color: var(--brass); }

.site-foot .socials { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.site-foot .socials a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--bone-2);
  border: 1px solid var(--rule-2); background: rgba(236, 230, 218, .015);
  transition: color .3s, background .3s, border-color .3s, transform .4s var(--ease);
}
.site-foot .socials a:hover { color: var(--ink); background: var(--brass-hi); border-color: var(--brass-hi); transform: translateY(-2px); }
.site-foot .socials svg { width: 15px; height: 15px; }

.site-foot .footcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, .9fr); gap: 32px; }
.site-foot .footcol h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--stone); }
.site-foot .footcol h4::before { content: ""; width: 5px; height: 5px; flex: none; border: 1px solid var(--brass-lo); transform: rotate(45deg); }
.site-foot .footcol a { display: block; width: fit-content; padding: 7px 0; color: var(--bone-2); font: 400 14.5px/1.35 var(--sans); overflow-wrap: anywhere; transition: color .3s; }
.site-foot .footcol a:hover { color: var(--bone); }
.site-foot a:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 3px; }

/* The name, engraved: a hairline outline over a brass wash that fades into the rule. */
.site-foot .footword {
  position: relative; max-width: var(--maxw); margin: 0 auto; padding: .12em var(--gutter) .08em;
  font: 300 clamp(96px, 19.5vw, 300px)/.8 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.045em;
  white-space: nowrap; color: transparent; user-select: none; pointer-events: none; transform: translateY(13%);
  -webkit-mask-image: linear-gradient(#000 58%, transparent 92%); mask-image: linear-gradient(#000 58%, transparent 92%);
}
.site-foot .footword::before, .site-foot .footword::after { content: attr(data-word); position: absolute; inset: 0; padding: inherit; font: inherit; letter-spacing: inherit; white-space: nowrap; }
.site-foot .footword::before { color: transparent; -webkit-text-stroke: 1.5px rgba(236, 230, 218, .13); }
.site-foot .footword::after {
  background: linear-gradient(180deg, rgba(215, 188, 143, .2), rgba(236, 230, 218, .03) 82%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

.site-foot .footnote { position: relative; border-top: 1px solid var(--rule); background: var(--ink); }
.site-foot .footnote .wrap { padding-top: 28px; padding-bottom: 40px; }
.site-foot .footnote p { margin: 0; max-width: 92ch; font: 400 13px/1.7 var(--sans); color: var(--stone); }
.site-foot .footnote .row { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font: 400 12px/1.7 var(--sans); color: var(--stone); }
.site-foot .footnote .tech { font: 400 11px/1.9 var(--mono); letter-spacing: .03em; }
.site-foot .footnote a { color: var(--bone-2); transition: color .3s; }
.site-foot .footnote a:hover { color: var(--bone); }
.site-foot .footnote .sep { margin: 0 7px; color: var(--stone-2); }

/* Compact: the focused account pages (sign in, get started, checkout). */
.site-foot.compact { background: var(--ink); }
.site-foot.compact .footnote { border-top: 0; }
.site-foot.compact .row { margin-top: 0; padding-top: 26px; padding-bottom: 30px; align-items: center; }
.site-foot.compact .mini { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.site-foot.compact .footlogo { gap: 10px; }
.site-foot.compact .footlogo img { width: 26px; height: 26px; }
.site-foot.compact .footlogo b { font-size: 19px; }
.site-foot.compact .footlogo em { font-size: 13px; }
.site-foot.compact .socials { margin-top: 0; gap: 6px; }
.site-foot.compact .socials a { width: 32px; height: 32px; }
.site-foot.compact .socials svg { width: 13px; height: 13px; }

@media (max-width: 1180px) { .site-foot .footcols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; } }
@media (max-width: 860px) { .site-foot .foot-in { grid-template-columns: 1fr; gap: 52px; padding-top: 76px; } }
@media (max-width: 420px) { .site-foot .footcols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ------------------------------------------------------------- reveals */

.rv { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; } .rv.d4 { transition-delay: .32s; }

/* Line-by-line mask reveal for display type. */
.mask { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.mask > span { display: block; transform: translateY(130%); transition: transform 1.3s var(--ease); }
.in .mask > span, .mask.in > span { transform: none; }
.mask:nth-child(2) > span { transition-delay: .09s; }
.mask:nth-child(3) > span { transition-delay: .18s; }

/* ------------------------------------------------------------- paper */

.paper { background: var(--paper); color: var(--paper-ink); }
.paper .label { color: var(--paper-mut); }
.paper .lead, .paper .muted { color: var(--paper-mut); }
.paper .rule { background: var(--paper-rule); }
.paper ::selection { background: var(--paper-ink); color: var(--paper); }

@media (max-width: 1023px) {
  .nav .links, .nav .cta, .nav .acts { display: none; }
  .nav.open .links .m-only { display: block; }
  .menu-btn { display: block; }
  .nav.open { background: var(--ink); height: auto; border-bottom-color: var(--rule); }
  .nav.open .wrap { flex-wrap: wrap; padding-top: 20px; padding-bottom: 24px; gap: 20px; }
  .nav.open .links { display: flex; flex-direction: column; width: 100%; order: 3; gap: 18px; }
  .nav.open .links a { font-size: 17px; }
}

/* -------------------------------------------------------- account pages
   Get started, Sign in and Checkout. The account itself lives inside Pramaan
   on the visitor's computer; these pages only talk to it. */

.acct { padding: 160px 0 14vh; }
.acct .grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 6vw; align-items: start; }
.acct .label { display: block; margin-bottom: 26px; }
.acct h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -.024em; margin: 0; }
.acct h1 em { font-style: italic; color: var(--brass-hi); }
.acct .lead { margin-top: 24px; }
.acct .stage { max-width: 540px; }
.acct .stage[hidden] { display: none; }
.acct h2.st { font: 400 1.7rem/1.15 var(--serif); letter-spacing: -.01em; margin: 0 0 10px; }
.acct p.sd { margin: 0 0 30px; color: var(--stone); font-size: 14.5px; line-height: 1.6; max-width: 50ch; }

.probe { display: grid; grid-template-columns: 10px 1fr auto; gap: 18px; align-items: start; padding: 18px 20px; border: 1px solid var(--rule-2); background: var(--ink-1); margin: 7vh 0 44px; max-width: 540px; }
.probe .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; background: var(--stone-2); }
.probe[data-state="checking"] .dot { animation: probe-pulse 1.4s var(--ease-io) infinite; }
.probe[data-state="ok"] .dot { background: #79A98E; box-shadow: 0 0 0 4px rgba(121, 169, 142, .14); }
.probe[data-state="off"] .dot { background: var(--seal-hi); box-shadow: 0 0 0 4px rgba(142, 58, 51, .18); }
.probe b { display: block; font: 400 1.1rem/1.3 var(--serif); }
.probe p { margin: 4px 0 0; color: var(--stone); font-size: 13.5px; line-height: 1.55; }
.probe p:empty { display: none; }
.probe [data-p="again"] { background: none; border: 0; padding: 4px 0; cursor: pointer; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-2); border-bottom: 1px solid var(--rule-2); margin-top: 4px; }
.probe[data-state="ok"] [data-p="again"] { display: none; }
@keyframes probe-pulse { 50% { opacity: .2; } }

.howto { list-style: none; margin: 0 0 30px; padding: 0; counter-reset: h; border-top: 1px solid var(--rule); }
.howto li { counter-increment: h; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; color: var(--bone-2); line-height: 1.6; }
.howto li::before { content: counter(h, lower-roman) "."; font: italic 400 1.1rem/1.4 var(--serif); color: var(--brass); }
.howto b { color: var(--bone); font-weight: 500; }
.howto code { font: 400 12.5px var(--mono); color: var(--brass-hi); background: var(--ink-2); padding: 2px 7px; }
.howto a { color: var(--bone); border-bottom: 1px solid var(--rule-2); }

.steps { display: flex; flex-wrap: wrap; gap: 10px 30px; list-style: none; margin: 0 0 34px; padding: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--stone-2); }
.steps li { display: flex; gap: 10px; align-items: baseline; }
.steps li i { font: italic 400 15px/1 var(--serif); letter-spacing: 0; text-transform: none; }
.steps li.done { color: var(--stone); }
.steps li.on { color: var(--bone); }
.steps li.on i { color: var(--brass); }

.fld { display: block; margin: 0 0 22px; }
.fld > span { display: flex; justify-content: space-between; font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--stone); margin-bottom: 10px; }
.fld > span small { font: inherit; letter-spacing: .1em; text-transform: none; color: var(--stone-2); }
.fld input { width: 100%; height: 52px; background: var(--ink-1); border: 1px solid var(--rule-2); border-radius: 2px; color: var(--bone); font: 400 15px/1 var(--sans); padding: 0 16px; transition: border-color .3s var(--ease), background .3s var(--ease); }
.fld input:focus { outline: none; border-color: var(--brass); background: var(--ink-2); }
.fld input::placeholder { color: var(--stone-2); }
.fld.bad input { border-color: var(--seal-hi); }
.fld select, .fld textarea {
  width: 100%; background-color: var(--ink-1); border: 1px solid var(--rule-2); border-radius: 2px; color: var(--bone);
  font: 400 15px/1.55 var(--sans); transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.fld select {
  height: 52px; padding: 0 46px 0 16px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23B8935C' stroke-width='1.3'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.fld select option { background: var(--ink-1); color: var(--bone); }
.fld textarea { min-height: 176px; padding: 14px 16px; resize: vertical; display: block; }
.fld textarea::placeholder { color: var(--stone-2); }
.fld select:focus, .fld textarea:focus { outline: none; border-color: var(--brass); background-color: var(--ink-2); }
.fld.bad textarea, .fld.bad select { border-color: var(--seal-hi); }
.fld .pw { position: relative; }
.fld .pw input { padding-right: 70px; }
.fld .pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 10px; cursor: pointer; font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
.fld .pw button:hover { color: var(--bone); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.roles { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule-2); margin-bottom: 26px; }
.roles button { background: none; border: 0; padding: 15px 16px; text-align: left; cursor: pointer; color: var(--bone-2); font: 400 13.5px/1.3 var(--sans); transition: background .3s var(--ease), color .3s; }
.roles button + button { border-left: 1px solid var(--rule-2); }
.roles button small { display: block; margin-top: 5px; color: var(--stone); font-size: 12px; line-height: 1.45; }
.roles button.on { background: var(--ink-2); color: var(--bone); box-shadow: inset 0 -2px 0 var(--brass); }

.chk { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--bone-2); cursor: pointer; line-height: 1.5; }
.chk input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: none; margin: 1px 0 0; border: 1px solid var(--rule-2); background: var(--ink-1); display: grid; place-items: center; cursor: pointer; }
.chk input:checked { background: var(--brass); border-color: var(--brass); }
.chk input:checked::after { content: ""; width: 9px; height: 5px; border: solid var(--ink); border-width: 0 0 1.6px 1.6px; transform: translateY(-1px) rotate(-45deg); }
.chk input:focus-visible, .roles button:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }

.frow { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: -4px 0 26px; flex-wrap: wrap; }
.ferr { min-height: 1.5em; margin: 0 0 14px; color: #DDA195; font-size: 13.5px; line-height: 1.5; }
.fine { margin: 18px 0 0; font-size: 12.5px; color: var(--stone); line-height: 1.6; }
.fine a, .alt a, a.alt { color: var(--bone-2); border-bottom: 1px solid var(--rule-2); transition: color .3s, border-color .3s; cursor: pointer; }
.fine a:hover, .alt a:hover, a.alt:hover { color: var(--bone); border-color: var(--brass); }
.alt { margin: 28px 0 0; font-size: 14px; color: var(--stone); }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.rcode { font: 500 clamp(1.25rem, 2.3vw, 1.8rem)/1 var(--mono); letter-spacing: .14em; color: var(--brass-hi); text-align: center; padding: 32px 20px; border: 1px dashed var(--brass-lo); background: var(--ink-1); user-select: all; margin-bottom: 14px; }
.rbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
.rbar button { background: none; border: 1px solid var(--rule-2); color: var(--bone); padding: 10px 14px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.rbar button:hover { border-color: var(--bone-2); }

.note-box { margin: 0 0 30px; padding: 20px 22px; border-left: 2px solid var(--brass); background: var(--ink-1); color: var(--bone-2); font-size: 14.5px; line-height: 1.6; }
.note-box b { color: var(--bone); font-weight: 500; }

/* The plan summary card, on Checkout and Get started. */
.summary { position: sticky; top: 100px; border: 1px solid var(--rule-2); background: var(--paper); color: var(--paper-ink); padding: 34px; }
.summary .k { font: 500 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--paper-mut); }
.summary .pn { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 18px 0 6px; }
.summary .pn b { font: 350 2.1rem/1 var(--serif); letter-spacing: -.016em; }
.summary .pn select { font: 500 12px var(--sans); background: transparent; border: 1px solid var(--paper-rule); color: var(--paper-ink); padding: 7px 10px; }
.summary .tl { color: var(--paper-mut); font-size: 14px; margin: 0 0 24px; }
.summary .cyc { display: inline-flex; border: 1px solid var(--paper-rule); margin-bottom: 24px; }
.summary .cyc[hidden] { display: none; }
.summary .cyc button { background: none; border: 0; padding: 10px 16px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-mut); cursor: pointer; }
.summary .cyc button + button { border-left: 1px solid var(--paper-rule); }
.summary .cyc button.on { background: var(--paper-ink); color: var(--paper); }
.summary ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--paper-ink); }
.summary li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--paper-rule); font-size: 14px; }
.summary li span:last-child { color: var(--paper-mut); text-align: right; }
.summary .tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 24px; }
.summary .tot span { font: 500 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--paper-mut); }
.summary .tot b { font: 300 2.6rem/1 var(--serif); letter-spacing: -.02em; }
.summary .tot b small { font: 400 13px var(--sans); color: var(--paper-mut); margin-left: 6px; letter-spacing: 0; }
.summary .save { text-align: right; font-size: 12.5px; color: var(--brass-lo); margin-top: 6px; min-height: 1.2em; }
.summary .where { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--paper-rule); font-size: 13px; color: var(--paper-mut); line-height: 1.6; }

/* Sign in: the seal, large, beside the form. */
.sealside { display: grid; justify-items: center; text-align: center; padding-top: 6vh; }
.sealside .ring { position: relative; width: min(360px, 78%); aspect-ratio: 1; }
.sealside .ring::before { content: ""; position: absolute; inset: -9%; border-radius: 50%; border: 1px solid var(--rule-2); }
.sealside .ring::after { content: ""; position: absolute; inset: -17%; border-radius: 50%; border: 1px dashed var(--rule); }
.sealside img { width: 100%; height: 100%; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); }
.sealside p { margin: 10vh 0 0; font: italic 400 1.25rem/1.45 var(--serif); color: var(--bone-2); max-width: 26ch; }

@media (max-width: 960px) {
  .acct .grid { grid-template-columns: 1fr; }
  .summary { position: static; order: -1; }
  .summary.trail { order: 0; }
  .sealside { display: none; }
}
@media (max-width: 560px) {
  .two { grid-template-columns: 1fr; }
  .roles { grid-template-columns: 1fr; }
  .roles button + button { border-left: 0; border-top: 1px solid var(--rule-2); }
  .probe { grid-template-columns: 10px 1fr; }
  .probe [data-p="again"] { grid-column: 2; justify-self: start; }
}

/* ---------------------------------------------------------- Pramaan Market
   The store front and app pages. Apps are cards on the chain; their artwork
   and downloads come from each publisher's own computer. */

.mkt-page { padding: 150px 0 0; }
.mkt-page .label { display: block; margin-bottom: 26px; }
.mkt-page h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.8rem, 6.4vw, 6.2rem); line-height: .98; letter-spacing: -.028em; margin: 0; }
.mkt-page h1 em { font-style: italic; color: var(--brass-hi); }
.mkt-page .lead { margin-top: 26px; max-width: 52ch; }
.mk-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 6vw; align-items: end; }
.search { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--rule-2); padding-bottom: 14px; transition: border-color .4s var(--ease); }
.search:focus-within { border-color: var(--brass); }
.search svg { width: 20px; height: 20px; color: var(--stone); flex: none; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--bone); font: 300 1.45rem/1.3 var(--serif); }
.search input::placeholder { color: var(--stone-2); }
.mk-count { margin-top: 14px; font: 500 10.5px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
.mk-resale { display: inline-block; margin-top: 10px; font-size: 13.5px; color: var(--brass-hi); border-bottom: 1px solid var(--brass-lo); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8vh 0 0; }
.chips button, .chips a { display: inline-flex; align-items: center; text-decoration: none; background: none; border: 1px solid var(--rule-2); color: var(--bone-2); height: 36px; padding: 0 16px; border-radius: 18px; font: 400 13px/1 var(--sans); cursor: pointer; transition: background .3s var(--ease), color .3s, border-color .3s; }
.chips button:hover, .chips a:hover { border-color: var(--bone-2); color: var(--bone); }
.chips button.on, .chips a.on { background: var(--bone); color: var(--ink); border-color: var(--bone); }

.feat { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); margin-top: 44px; border: 1px solid var(--rule-2); background: var(--ink-1); overflow: hidden; min-height: 380px; transition: border-color .5s var(--ease); }
.feat:hover { border-color: var(--stone-2); }
.feat .fx { padding: 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; position: relative; }
.feat h2 { font: 300 clamp(2.2rem, 3.8vw, 3.6rem)/1 var(--serif); letter-spacing: -.02em; margin: 18px 0 0; }
.feat p { margin: 16px 0 0; color: var(--bone-2); font-size: 1.05rem; line-height: 1.55; max-width: 34ch; }
.feat .fimg { position: relative; overflow: hidden; border-left: 1px solid var(--rule); background: var(--ink-2); }
.feat .fimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.6s var(--ease); }
.feat:hover .fimg img { transform: scale(1.05); }
.feat .fimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,16,18,.55), transparent 40%); }

.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); column-gap: 48px; margin-top: 30px; border-top: 1px solid var(--rule); }
.app { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.app .ic, .ic-lg { width: 76px; height: 76px; border-radius: 19px; overflow: hidden; display: grid; place-items: center; background: var(--ink-2); border: 1px solid var(--rule-2); color: var(--stone); font: 400 1.35rem/1 var(--serif); box-shadow: 0 14px 30px rgba(0, 0, 0, .38); flex: none; }
.app .ic img, .ic-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app .tx { min-width: 0; }
.app b { display: block; font: 400 1.32rem/1.15 var(--serif); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app small { display: block; margin-top: 5px; color: var(--stone); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .rsn { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font: 500 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.app .rsn i { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 3px rgba(201, 162, 110, .16); }
.ap-resale { margin-top: 64px; }
.ap-resale[hidden] { display: none; }
.ap-resale h2 { font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); margin: 0 0 14px; display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.ap-resale h2 span { color: var(--brass); letter-spacing: .12em; }
.ap-resale .rs-lead { margin: 0 0 22px; max-width: 70ch; color: var(--bone-2); font-size: 14.5px; line-height: 1.65; }
.rs-quotes { border-top: 1px solid var(--rule); }
.rq { display: grid; grid-template-columns: minmax(0, 1fr) 120px 140px 110px; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.rq .who b { display: block; font-weight: 500; font-size: 14.5px; color: var(--bone); }
.rq .who small { display: block; margin-top: 3px; color: var(--stone); font-size: 12.5px; }
.rq .ver { color: var(--stone); font-size: 12.5px; }
.rq .pr { font: 400 1.25rem/1 var(--serif); color: var(--bone); white-space: nowrap; }
.rq .pill { cursor: pointer; width: 100%; }
.rq.new { background: linear-gradient(90deg, rgba(201, 162, 110, .06), transparent 60%); }
.rq .st { font-size: 13px; color: var(--bone-2); }
.frz { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 34px; border-radius: 17px; border: 1px dashed var(--seal-hi); color: var(--seal-hi); font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: help; }
.rq .rq-acts { margin-top: 6px; }
.lk { background: none; border: 0; border-bottom: 1px solid var(--brass-lo); padding: 0; color: var(--brass-hi); font: inherit; cursor: pointer; }
.lk:hover { color: var(--bone); border-bottom-color: var(--bone-2); }
.chg { font-style: normal; font: 500 11px/1 var(--mono); letter-spacing: .04em; margin-left: 4px; }
.chg.up { color: #8FBF9F; } .chg.down { color: #D98F86; }
.ap-history { margin-top: 48px; }
.hist-foot { margin: 16px 0 0; color: var(--stone); font-size: 13.5px; }
.hist { list-style: none; margin: 18px 0 8px; padding: 0 0 0 18px; border-left: 1px solid var(--rule-2); }
.hist li { position: relative; padding: 0 0 16px 4px; }
.hist li::before { content: ""; position: absolute; left: -23px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 1px solid var(--brass-lo); }
.hist li.now::before { background: var(--brass); border-color: var(--brass); }
.hist b { display: block; color: var(--bone); font-weight: 500; font-size: 14.5px; }
.hist .hp { display: block; margin: 3px 0; font: 400 1.15rem/1.2 var(--serif); color: var(--bone); }
.hist small { display: block; color: var(--stone); font-size: 12.5px; line-height: 1.5; }
.hist-now { margin: 6px 0 14px; color: var(--bone-2); font-size: 14px; }
.hist-log { margin: 0 0 16px; color: var(--stone); font-size: 12.5px; }
.hist-log summary { cursor: pointer; color: var(--brass-hi); }
.hist-log ul { list-style: none; margin: 10px 0 0; padding: 0; }
.hist-log li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--rule); }
.hist-same { padding: 14px 16px; border: 1px solid var(--rule-2); border-radius: 10px; color: var(--bone-2); font-size: 13px; line-height: 1.6; }
.hist-same b { color: var(--bone); font-weight: 500; }
.hist-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.hist-acts .pill { height: 36px; padding: 0 18px; cursor: pointer; border-color: var(--brass-lo); color: var(--brass-hi); background: transparent; }
.hist-acts .pill:hover { background: var(--brass-hi); border-color: var(--brass-hi); color: var(--ink); }
.hist-acts .lk { font-size: 12.5px; color: var(--stone); border-bottom-color: var(--rule-2); }
.hist-acts .lk:hover { color: var(--bone-2); }
.hist-links { display: inline-flex; gap: 16px; flex-wrap: wrap; }
.shareapp { display: inline-block; margin-top: 12px; font-size: 12.5px; }
.share-ways { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.share-ways .pill { height: 32px; min-width: 0; text-decoration: none; }
.pubstat { display: flex; gap: 9px; align-items: baseline; margin-top: 14px; max-width: 46ch; font-size: 12.5px; line-height: 1.5; color: var(--stone); }
.pubstat i { flex: none; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-1px); }
.pubstat.on i { background: #79A98E; box-shadow: 0 0 0 4px rgba(121, 169, 142, .14); }
.pubstat.off i { background: var(--seal-hi); box-shadow: 0 0 0 4px rgba(142, 58, 51, .18); }
.gs-f .gs-l { display: block; margin-bottom: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.gs-f select { width: 100%; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--rule-2); background: var(--ink-2); color: var(--bone); font: 13px/1.2 var(--sans); }
.gs-f[hidden] { display: none; }
@media (max-width: 720px) { .rq { grid-template-columns: minmax(0, 1fr) auto; } .rq .ver { display: none; } .rq > span:last-child { grid-column: 1 / -1; } }
.app em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 6px; font-style: normal; color: var(--bone-2); font-size: 13.5px; line-height: 1.45; overflow: hidden; }
.app .get, .pill { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 76px; padding: 0 16px; border-radius: 17px; background: var(--ink-2); border: 1px solid var(--rule-2); color: var(--bone); font: 600 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: background .35s var(--ease), color .35s, border-color .35s; }
.app:hover .get, .pill:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.app.skel .ic, .app.skel b, .app.skel small { background: var(--ink-2); color: transparent; border-color: transparent; box-shadow: none; }
.app.skel b { width: 60%; height: 1.2em; } .app.skel small { width: 40%; height: .9em; }
.mk-empty { padding: 70px 0; border-bottom: 1px solid var(--rule); color: var(--stone); font-size: 15px; }
.mk-empty b { display: block; font: 300 1.8rem/1.2 var(--serif); color: var(--bone); margin-bottom: 10px; }

.mk-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(64px, 9vh, 120px); border-top: 1px solid var(--rule); }
.mk-how div { padding: 34px 34px 40px 0; border-right: 1px solid var(--rule); }
.mk-how div + div { padding-left: 34px; }
.mk-how div:last-child { border-right: 0; }
.mk-how .num { display: block; font-size: 3rem; color: var(--brass); margin-bottom: 18px; }
.mk-how h3 { font: 400 1.4rem/1.2 var(--serif); margin: 0 0 10px; }
.mk-how p { margin: 0; color: var(--stone); font-size: 14.5px; line-height: 1.6; max-width: 34ch; }

.sell { margin-top: 16vh; padding: 12vh 0; }
.sell .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6vw; align-items: center; }
.sell dl { margin: 0; border-top: 1px solid var(--paper-ink); }
.sell dl div { display: grid; grid-template-columns: 160px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--paper-rule); }
.sell dt { font: 500 10.5px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-mut); }
.sell dd { margin: 0; font-size: 15px; line-height: 1.55; }
.sell dd b { font: 400 1.6rem/1 var(--serif); }

/* app page */
.app-page { padding: 140px 0 0; }
.crumbs { display: flex; gap: 12px; align-items: center; font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--stone); margin-bottom: 44px; }
.crumbs a { color: var(--bone-2); transition: color .3s; } .crumbs a:hover { color: var(--bone); }
.ap-head { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 46px; align-items: center; }
.ic-lg { width: 168px; height: 168px; border-radius: 38px; font-size: 3rem; box-shadow: 0 34px 70px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.app-page h1 { font: 300 clamp(2.6rem, 5.2vw, 4.6rem)/1 var(--serif); letter-spacing: -.026em; margin: 0; overflow-wrap: anywhere; }
.app-page .sub { margin: 14px 0 0; font-size: 1.15rem; color: var(--bone-2); }
.app-page .pub { margin: 10px 0 0; color: var(--brass); font-size: 14px; }
.buy { display: flex; align-items: center; gap: 24px; margin-top: 30px; flex-wrap: wrap; }
.getbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 52px; min-width: 168px; padding: 0 34px; border-radius: 26px; border: 0; background: var(--bone); color: var(--ink); font: 600 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .35s var(--ease), transform .35s var(--ease); }
.getbtn:hover { background: #fff; }
.getbtn:active { transform: scale(.98); }
.getbtn[disabled] { opacity: .45; cursor: not-allowed; }
.buy small { color: var(--stone); font-size: 13px; line-height: 1.55; }
.verified { display: inline-flex; align-items: center; gap: 9px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--stone); margin-top: 22px; }
.verified i { width: 7px; height: 7px; border-radius: 50%; background: #79A98E; box-shadow: 0 0 0 4px rgba(121, 169, 142, .14); }
.verified.no i { background: var(--seal-hi); box-shadow: 0 0 0 4px rgba(142, 58, 51, .18); }

.ap-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 64px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ap-facts div { padding: 24px 16px; text-align: center; border-right: 1px solid var(--rule); min-width: 0; }
.ap-facts div:last-child { border-right: 0; }
.ap-facts small { display: block; font: 500 9.5px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--stone); }
.ap-facts b { display: block; margin: 12px 0 6px; font: 400 1.3rem/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-facts span { color: var(--stone); font-size: 12.5px; }

.gallery { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 56px 0 14px; scrollbar-width: thin; }
.gallery button { flex: none; scroll-snap-align: start; height: clamp(220px, 32vw, 430px); aspect-ratio: 16 / 10; padding: 0; border: 1px solid var(--rule-2); border-radius: 14px; overflow: hidden; background: var(--ink-2); cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(5, 5, 6, .94); display: grid; place-items: center; cursor: zoom-out; animation: lb-in .35s var(--ease); }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 10px; box-shadow: 0 40px 90px rgba(0, 0, 0, .6); }
@keyframes lb-in { from { opacity: 0; } }

.ap-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 7vw; margin-top: 64px; padding-bottom: 14vh; }
.ap-body h2 { font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--stone); margin: 0 0 22px; }
.ap-body h2 + .h-note { margin: -12px 0 20px; color: var(--stone-2); font-size: 12.5px; }
.about { font-size: 1.06rem; line-height: 1.75; color: var(--bone-2); white-space: pre-line; margin: 0; }
.about.clamp { max-height: 11.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.morebtn { margin-top: 14px; background: none; border: 0; padding: 0 0 4px; color: var(--bone); font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--rule-2); cursor: pointer; }
.newbox { margin-top: 54px; }
.newbox .v { display: flex; justify-content: space-between; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-bottom: 14px; }
.infol { list-style: none; margin: 0 0 50px; padding: 0; border-top: 1px solid var(--rule); }
.infol li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.infol li span:first-child { color: var(--stone); }
.infol li span:last-child { color: var(--bone-2); text-align: right; overflow-wrap: anywhere; }
.infol a { color: var(--bone); border-bottom: 1px solid var(--rule-2); }
.prot { list-style: none; margin: 0; padding: 0; }
.prot li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 10px 0; font-size: 14.5px; color: var(--bone-2); line-height: 1.5; }
.prot li::before { content: ""; width: 14px; height: 8px; margin-top: 5px; border: solid var(--brass); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }

/* the Get sheet */
.gscrim { position: fixed; inset: 0; z-index: 80; background: rgba(5, 5, 6, .72); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; animation: lb-in .3s var(--ease); }
.gsheet { width: min(520px, 100%); max-height: 92vh; overflow-y: auto; background: var(--ink-1); border: 1px solid var(--rule-2); box-shadow: 0 40px 100px rgba(0, 0, 0, .6); animation: gs-in .45s var(--ease); }
@keyframes gs-in { from { opacity: 0; transform: translateY(14px); } }
.gs-top { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 26px 28px; border-bottom: 1px solid var(--rule); }
.gs-top .ic-lg { width: 64px; height: 64px; border-radius: 15px; font-size: 1.2rem; box-shadow: none; }
.gs-top b { display: block; font: 400 1.35rem/1.15 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-top small { color: var(--stone); font-size: 12.5px; }
.gs-x { background: none; border: 0; color: var(--stone); cursor: pointer; font: 400 26px/1 var(--sans); padding: 4px 8px; }
.gs-x:hover { color: var(--bone); }
.gs-body { padding: 28px; }
.gs-body h3 { font: 400 1.6rem/1.15 var(--serif); margin: 0 0 10px; }
.gs-body p { margin: 0 0 22px; color: var(--stone); font-size: 14.5px; line-height: 1.6; }
.gs-body p b { color: var(--bone-2); font-weight: 500; }
.gs-rows { border-top: 1px solid var(--rule); margin: 0 0 24px; }
.gs-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--stone); }
.gs-rows div span:last-child { color: var(--bone); text-align: right; }
.gs-rows .tot span:last-child { font: 400 1.5rem/1 var(--serif); }
.gs-steps { list-style: none; margin: 0 0 24px; padding: 0; }
.gs-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: center; padding: 11px 0; color: var(--stone-2); font-size: 14.5px; }
.gs-steps li i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--rule-2); }
.gs-steps li.run { color: var(--bone); }
.gs-steps li.run i { border-color: var(--brass); border-top-color: transparent; animation: gs-spin .8s linear infinite; }
.gs-steps li.ok { color: var(--bone-2); }
.gs-steps li.ok i { border-color: #79A98E; background: #79A98E; box-shadow: inset 0 0 0 3px var(--ink-1); }
.gs-steps li.skip { color: var(--stone); }
.gs-steps li.skip i { border-style: dashed; }
@keyframes gs-spin { to { transform: rotate(360deg); } }
.gs-ol { margin: 0 0 16px; padding-left: 20px; color: var(--bone-2); font-size: 14.5px; line-height: 1.6; }
.gs-ol li { margin-bottom: 8px; }
.gs-ol a { color: var(--brass-hi); border-bottom: 1px solid var(--brass-lo); }
.gs-f { display: block; margin-bottom: 16px; }
.gs-f input { width: 100%; height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--rule-2); background: var(--ink-2); color: var(--bone); font: 13px/1 var(--mono); }
.buy .forphone { display: block; margin-top: 10px; color: var(--brass); font: 500 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.app small b.plat { font-weight: 500; color: var(--brass); }
.gs-note { margin-top: 18px; font-size: 12.5px; color: var(--stone); line-height: 1.6; }
.gs-note.test { padding: 12px 14px; border: 1px dashed var(--brass-lo); color: var(--brass-hi); }
.gs-err { padding: 14px 16px; border-left: 2px solid var(--seal-hi); background: rgba(142, 58, 51, .08); color: #DDA195; font-size: 14px; line-height: 1.55; margin-bottom: 22px; }
.gs-body textarea { width: 100%; min-height: 84px; background: var(--ink); border: 1px solid var(--rule-2); color: var(--bone); font: 400 12px/1.5 var(--mono); padding: 12px; resize: vertical; margin-bottom: 12px; }
.gs-body textarea:focus { outline: none; border-color: var(--brass); }
.gs-acts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

@media (max-width: 960px) {
  .mk-top, .feat, .sell .grid, .ap-body { grid-template-columns: 1fr; }
  .feat .fimg { min-height: 240px; border-left: 0; border-top: 1px solid var(--rule); order: -1; }
  .feat .fx { padding: 30px; }
  .mk-how { grid-template-columns: 1fr; }
  .mk-how div, .mk-how div + div { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .ap-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-facts div:nth-child(3) { border-right: 0; }
  .ap-facts div:nth-child(n+4) { border-top: 1px solid var(--rule); }
  .ap-head { grid-template-columns: 1fr; gap: 28px; }
  .ic-lg { width: 128px; height: 128px; border-radius: 30px; }
}
@media (max-width: 560px) {
  .apps { grid-template-columns: 1fr; }
  .app { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; }
  .app .ic { width: 60px; height: 60px; border-radius: 15px; }
  .sell dl div { grid-template-columns: 1fr; gap: 6px; }
  .ap-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-facts div { border-right: 0 !important; border-top: 1px solid var(--rule); }
  .ap-facts div:nth-child(odd) { border-right: 1px solid var(--rule) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .rv { opacity: 1; transform: none; }
  .mask > span { transform: none; }
}