/* dx-wallet.com: one stylesheet for every page. Direction C, "Statement bands": full-width bands in Paper,
   Ledger and Night, one statement each, big type, rules instead of cards. Same-origin only: the one font
   is this site's own file, and nothing is loaded from elsewhere. Nothing moves except the header logo. */

/* Schibsted Grotesk (SIL OFL 1.1, see src/fonts/OFL.txt), variable 400-900, subset to Basic Latin and the
   punctuation the copy uses. Its tabular figures are left out on purpose: they give "," and "." a full
   figure width ("41 , 642 . 12"), so every figure on the site is proportional. */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/_astro/schibsted-grotesk-latin.imk7zWNz.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
/* Until it loads: Arial, scaled to Schibsted's widths and line metrics, so the swap moves little text. */
@font-face {
  font-family: "Schibsted Grotesk Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400 500;
  size-adjust: 104.11%;
  ascent-override: 93.80%;
  descent-override: 24.76%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Schibsted Grotesk Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 900;
  size-adjust: 103.13%;
  ascent-override: 94.69%;
  descent-override: 25.00%;
  line-gap-override: 0%;
}

/* --paper is the page ground. The header always sits on it, and the logo's blink cover (.wbd-cover) is
   filled with it, so it must stay the colour behind the header in both schemes. */
:root {
  --paper: #F4F1E8;
  --text: #18221F;
  --font: "Schibsted Grotesk", "Schibsted Grotesk Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(1.25rem, 0.045rem + 4.944vw, 4rem);
  --band-y: clamp(4rem, 1.809rem + 8.989vw, 9rem);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0E1513; --text: #E7EFEA; }
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
  font-variant-numeric: proportional-nums;
  font-kerning: normal;
  font-synthesis: none;
}
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .18em; }
:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 3px; }
main:focus { outline: none; }
.skip {
  position: absolute; left: var(--gutter); top: -10rem; z-index: 10;
  padding: .75rem 1.25rem; border-radius: 999px;
  background: #0F5E4E; color: #F4F1E8; font-weight: 600; text-decoration: none; --focus: #0F5E4E;
}
.skip:focus { top: 1rem; }
@media (prefers-color-scheme: dark) { .skip { background: #5CC3A4; color: #0E1513; --focus: #5CC3A4; } }

/* The lockup: the Card symbol with its cursor, and the drawn "Wallet by dx" wordmark. */
.brand { display: inline-block; color: inherit; line-height: 0; }
/* The header logo is two SVGs: the icon (47 x 46) and the word, which is the home link. Both have explicit
   sizes, since WebKit shrinks an inline SVG that has only a height, and the row reserves its height. */
.brand-row { display: flex; align-items: flex-start; position: relative; line-height: 0; min-height: 46px; }
.brand-icon svg, .brand-word svg { display: block; height: 46px; }
.brand-icon svg { width: 47px; }
.brand-word svg { width: 192px; }
/* Taps on the icon, with no script. A hidden radio group holds four states: playing or paused, each in
   variant a or b. One tap flips playing and paused (the blink pauses with the stick shown); a second tap
   within 0.4 s (a double tap) switches variant a <-> b, which restarts the intro and the blink, playing.
   Each state shows only the labels that lead out of it; the double-tap labels are visible for 0.4 s after
   each state change. The replay is decorative: the radios and the icon are out of the tab order and hidden
   from screen readers, so Tab and VoiceOver go straight to the home link. */
.ls { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.brand-icon { position: relative; width: 47px; height: 46px; -webkit-tap-highlight-color: transparent; }
.tap, .dbl { position: absolute; inset: 0; display: none; cursor: pointer; touch-action: manipulation; }
.dbl { z-index: 1; visibility: hidden; }
#ls-a:checked ~ .brand-icon .tap-a, #ls-pa:checked ~ .brand-icon .tap-pa,
#ls-b:checked ~ .brand-icon .tap-b, #ls-pb:checked ~ .brand-icon .tap-pb { display: block; }
#ls-a:checked ~ .brand-icon .dbl-to-b { display: block; animation: logo-win-a .4s linear; }
#ls-pa:checked ~ .brand-icon .dbl-to-b { display: block; animation: logo-win-pa .4s linear; }
#ls-b:checked ~ .brand-icon .dbl-to-a { display: block; animation: logo-win-b .4s linear; }
#ls-pb:checked ~ .brand-icon .dbl-to-a { display: block; animation: logo-win-pb .4s linear; }
@keyframes logo-win-a { 0%, 100% { visibility: visible; } }
@keyframes logo-win-pa { 0%, 100% { visibility: visible; } }
@keyframes logo-win-b { 0%, 100% { visibility: visible; } }
@keyframes logo-win-pb { 0%, 100% { visibility: visible; } }
.mark-body, .mark-by { fill: var(--accent); }
.mark-word { fill: var(--ink); }
.mark-cursor { fill: var(--cursor); animation: caret 1.1s step-end infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mark-cursor { animation: none; } }

/* ---------------------------------------------------------------- bands
   Each band sets its own ground and inks. Paper follows the scheme (Night in dark); Ledger stays Ledger in
   both; Night becomes Ink in dark, so it still reads as a band on a Night page. */
.band { background: var(--bg); color: var(--fg); padding-block: var(--band-y); }
.band-paper {
  --bg: var(--paper); --fg: #18221F; --mut: #5B6662; --rule: #18221F; --soft: #D3CDBC;
  --acc: #0F5E4E; --btn-bg: #0F5E4E; --btn-fg: #F4F1E8; --focus: #0F5E4E;
}
.band-ledger {
  --bg: #0F5E4E; --fg: #F4F1E8; --mut: #DCE9E2; --rule: #F4F1E8; --soft: rgba(244, 241, 232, .3);
  --acc: #DCE9E2; --btn-bg: #F4F1E8; --btn-fg: #0F5E4E; --focus: #F4F1E8;
}
.band-night {
  --bg: #0E1513; --fg: #E7EFEA; --mut: #9DABA5; --rule: #E7EFEA; --soft: #2A3732;
  --acc: #5CC3A4; --btn-bg: #5CC3A4; --btn-fg: #0E1513; --focus: #5CC3A4;
}
@media (prefers-color-scheme: dark) {
  .band-paper {
    --fg: #E7EFEA; --mut: #9DABA5; --rule: #E7EFEA; --soft: #26322E;
    --acc: #5CC3A4; --btn-bg: #5CC3A4; --btn-fg: #0E1513; --focus: #5CC3A4;
  }
  .band-night { --bg: #18221F; --mut: #A3B0AA; --soft: #2E3B36; }
}
.band-ledger, .band-night { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media (prefers-color-scheme: dark) { body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } }
.wrap { max-width: 80rem; margin: 0 auto; padding-inline: var(--gutter); }
/* Two Paper bands in a row (the hero, then the data band): a heavy rule marks the new band. */
.band-follows-paper { padding-top: 0; }
.band-follows-paper > .wrap::before {
  content: ""; display: block; grid-column: 1 / -1;
  border-top: 3px solid var(--rule); margin-bottom: clamp(3rem, 1.9rem + 4.5vw, 6rem);
}

/* ---------------------------------------------------------------- type: one family, four roles
   Display 800, section and row heads 700, labels 600, body 400. Sizes run from 390 px to 1280 px wide; the
   big ones are also capped by the width, so a deliberate line ("In one / private place.") never breaks again
   on a 320-389 px phone. */
.display { font-size: clamp(2.625rem, min(15.4vw - 6.5px, 1.716rem + 6.292vw), 6.75rem); line-height: .96; font-weight: 800; letter-spacing: -.03em; }
.statement { font-size: clamp(2.25rem, min(13.3vw - 5.4px, 1.725rem + 4.719vw), 5.5rem); line-height: .98; font-weight: 800; letter-spacing: -.03em; }
.page-title { font-size: clamp(2.25rem, min(11.9vw - 4.8px, 1.186rem + 5.393vw), 5.5rem); line-height: .98; font-weight: 800; letter-spacing: -.03em; }
.section { font-size: clamp(2.125rem, 1.483rem + 3.146vw, 4rem); line-height: 1; font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
.row-h { font-size: clamp(1.5rem, 1.242rem + 1.573vw, 2.5rem); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.ln { display: block; text-wrap: balance; }
.lead { font-size: clamp(1.1875rem, 1.05rem + .562vw, 1.5rem); line-height: 1.45; }
.label {
  font-size: .8125rem; line-height: 1.25; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  font-feature-settings: "case"; color: var(--acc);
}
.label + .display, .label + .statement, .label + .page-title, .label + .section { margin-top: clamp(1rem, .8rem + .9vw, 1.5rem); }
.support { color: var(--mut); max-width: 34em; }
p { text-wrap: pretty; }

/* ---------------------------------------------------------------- header and navigation
   Wide screens show the links and the waitlist pill. Narrow ones fold them into a <details> menu, which
   opens over the page with no script; its summary is a real button for keyboards and screen readers. */
.site-head { position: relative; z-index: 2; padding-block: clamp(1.25rem, 1rem + .9vw, 1.75rem); }
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.nav-menu { margin-left: auto; }
.nav-menu ul { list-style: none; padding: 0; }
.nav-wide ul { list-style: none; padding: 0; display: flex; gap: 1.75rem; }
.nav-wide { display: none; align-items: center; gap: 2rem; }
.nav-wide li a { display: inline-block; padding-block: .375rem; font-weight: 600; text-decoration: none; }
.nav-wide li a[aria-current], .nav-menu li a[aria-current] { text-decoration: underline; }
@media (hover: hover) { .nav-wide li a:hover, .nav-menu li a:hover, .foot-nav a:hover, .pill:hover { text-decoration: underline; } }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 3rem; padding: 0 1.375rem; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.pill[aria-current] { text-decoration: underline; }
.pill-lg { min-height: 3.5rem; padding: 0 1.75rem; font-size: 1.125rem; }
.nav-menu summary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1rem; border: 2px solid currentColor; border-radius: 999px;
  font-weight: 600; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.nav-menu summary::-webkit-details-marker { display: none; }
.burger { display: none; position: relative; width: 1.125rem; height: .75rem; flex: none; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; }
.burger::before { top: 0; box-shadow: 0 5px 0 currentColor; }
.burger::after { bottom: 0; }
.nav-menu[open] .burger::before { top: 5px; box-shadow: none; transform: rotate(45deg); }
.nav-menu[open] .burger::after { bottom: 5px; transform: rotate(-45deg); }
.nav-menu .when-open, .nav-menu[open] .when-closed { display: none; }
.nav-menu[open] .when-open { display: inline; }
.nav-menu > nav {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: .5rem var(--gutter) 2rem; background: var(--bg); border-bottom: 3px solid var(--rule);
}
.nav-menu ul { border-top: 3px solid var(--rule); }
.nav-menu li { border-bottom: 1px solid var(--soft); }
.nav-menu li a { display: block; padding: .875rem 0; font-size: 1.75rem; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.nav-menu .pill { width: 100%; min-height: 3.5rem; margin-top: 1.5rem; font-size: 1.125rem; }
/* While the phone menu is open, the page behind it is hidden from sight, from Tab and from screen readers,
   so focus never lands on content under the menu (WCAG 2.4.11), and the menu fills the screen below the
   header: 100% is the header's height, since the menu is placed against it. Closing the menu brings the
   page back. Wide screens have no menu, so a menu left open on a phone turned sideways can't hide the page. */
@media not all and (min-width: 60em) {
  body:has(.nav-menu[open]) main, body:has(.nav-menu[open]) .site-foot { visibility: hidden; height: 0; overflow: hidden; }
  .nav-menu[open] > nav { min-height: calc(100vh - 100%); min-height: calc(100dvh - 100%); border-bottom: 0; }
}
/* The logo is 239 px wide. Below 380 px it and a worded button don't fit side by side, so the button shows
   an icon instead; its words stay for screen readers. */
@media (max-width: 23.74em) {
  .nav-menu summary { width: 2.75rem; padding: 0; }
  .burger { display: block; }
  .nav-menu summary .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 60em) {
  .nav-wide { display: flex; }
  .nav-menu { display: none; }
}

/* ---------------------------------------------------------------- hero */
.hero { padding-top: clamp(2.5rem, .528rem + 8.09vw, 7rem); padding-bottom: clamp(3rem, 1.9rem + 4.5vw, 6rem); }
.hero-row { display: grid; gap: 2rem; margin-top: clamp(2rem, .904rem + 4.494vw, 4.5rem); }
.hero .lead { max-width: 30em; }
.hero-act { display: grid; gap: 1.5rem; justify-items: start; }
.status {
  display: flex; align-items: center; gap: .625rem; width: 100%;
  padding-top: .875rem; border-top: 3px solid var(--rule);
  font-size: .875rem; line-height: 1.3; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-feature-settings: "case";
}
.status i { width: .625rem; height: .625rem; background: var(--acc); flex: none; }

/* ---------------------------------------------------------------- statement bands and facts tables */
.stmt-side { margin-top: 2rem; }
.facts { margin-top: 1.75rem; border-top: 3px solid var(--rule); }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--soft); }
.facts dt { flex: none; color: var(--mut); }
.facts dd { min-width: 0; font-weight: 600; text-align: right; }
.facts-lg > div { display: block; padding: .875rem 0 .9375rem; }
.facts-lg dt { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-feature-settings: "case"; }
.facts-lg dd { margin-top: .25rem; text-align: left; font-size: clamp(1.3125rem, 1.2rem + .5vw, 1.75rem); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }

/* ---------------------------------------------------------------- rows: a 3 px rule, a head, a few lines */
.sec-head .section { max-width: 12em; }
.rows { list-style: none; padding: 0; margin-top: clamp(2.25rem, 1.26rem + 4.04vw, 4.5rem); }
.prose-band .rows { margin-top: 0; }
.rows > * { border-top: 3px solid var(--rule); padding: 1rem 0 2rem; }
.row-b { margin-top: .75rem; max-width: 36em; }
.row-b .facts { margin-top: 1.25rem; }

/* ---------------------------------------------------------------- the app band: three screens, cropped by
   the band's bottom edge. On phones they sit in a strip that scrolls sideways (focusable, so keyboards can
   scroll it too). */
.app-band { padding-bottom: 0; }
.app-band .wrap { container-type: inline-size; }
.app-head .support { margin-top: 1rem; }
.shots {
  display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 1rem; align-items: end;
  margin: 2.5rem calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  font-size: 9.6px;
}
.shot { scroll-snap-align: start; display: grid; gap: .75rem; width: 29.6em; }
.shot figcaption { font-size: 1rem; line-height: 1.35; }
.shot figcaption b { font-weight: 700; }
.device { height: 49em; overflow: hidden; padding: .8em .8em 0; border-radius: 5em 5em 0 0; background: #070B0A; }
@media (min-width: 45em) { .shots { font-size: 10.8px; } }

/* ---------------------------------------------------------------- waitlist: switched off, and says so */
.state-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .375rem 1rem;
  margin-top: 2rem; padding: .875rem 0; border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.state { display: inline-flex; align-items: center; gap: .625rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-feature-settings: "case"; }
.state i { width: .75rem; height: .75rem; border: 2px solid currentColor; flex: none; }
.state-bar > span + span { color: var(--mut); }
.ask { margin-top: 1.75rem; }
.ask dt { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.ask dd { margin-top: .375rem; max-width: 22em; font-size: clamp(1.5rem, 1.33rem + .7vw, 2rem); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.wl-line { margin-top: 1.25rem; max-width: 34em; font-size: clamp(1.1875rem, 1.05rem + .562vw, 1.5rem); line-height: 1.45; }
.wl-form { margin-top: 2.5rem; max-width: 40rem; }
.wl-form label { display: block; font-weight: 600; }
.wl-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .625rem; }
.wl-row input, .wl-row button {
  min-height: 3.5rem; border: 2px dashed var(--mut); border-radius: 999px; background: transparent;
  color: var(--mut); font: inherit; -webkit-appearance: none; appearance: none; opacity: 1; cursor: not-allowed;
}
.wl-row input { flex: 1 1 16rem; min-width: 0; padding: 0 1.5rem; }
.wl-row button { flex: 1 0 auto; padding: 0 1.75rem; font-weight: 600; font-size: 1.125rem; }
.wl-note { margin-top: 1.5rem; max-width: 34em; color: var(--mut); }

/* ---------------------------------------------------------------- inner pages: the title on a Ledger band */
.page-head { padding-block: clamp(3rem, 2.12rem + 3.6vw, 5rem) clamp(3.5rem, 2.4rem + 4.5vw, 6rem); }
.page-head .lead { margin-top: 1.75rem; max-width: 30em; }
.page-head .updated { margin-top: 1rem; color: var(--mut); }
.page-head .summary { margin-top: 2rem; max-width: 34em; padding-top: 1rem; border-top: 3px solid var(--rule); font-size: clamp(1.1875rem, 1.05rem + .562vw, 1.5rem); line-height: 1.45; }
.page-head .see-also { margin-top: 1rem; max-width: 34em; }
.glance-band { padding-bottom: 0; }
/* Under an inner page's head, and between the glance table and the sections, a shorter gap than a full band. */
.page-head + .band, .glance-band + .prose-band { padding-top: clamp(3rem, 1.9rem + 4.5vw, 6rem); }
.glance-band .facts-lg { margin-top: 1rem; }

/* ---------------------------------------------------------------- footer */
.site-foot { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) 2.5rem; }
.foot-nav ul { list-style: none; padding: 0; display: grid; gap: .25rem; }
.foot-nav a { font-size: clamp(1.625rem, 1.46rem + .67vw, 2rem); line-height: 1.25; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.foot-nav a[aria-current] { text-decoration: underline; }
.foot-brand { display: grid; gap: 1.25rem; margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.foot-lockup { display: block; width: clamp(19.2rem, 14.37rem + 19.78vw, 30.2rem); max-width: 100%; height: auto; }
.foot-brand p { max-width: 30em; color: var(--mut); }
.foot-base { display: grid; gap: .25rem; margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--soft); font-size: .875rem; color: var(--mut); }

/* ---------------------------------------------------------------- 1000 px and up: a 12-column grid */
@media (min-width: 62.5em) {
  .hero-row, .stmt, .app-head, .rows > * {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem;
  }
  .hero-row { align-items: end; }
  .hero .lead { grid-column: 7 / 13; grid-row: 1; }
  .hero-act { grid-column: 1 / 6; grid-row: 1; }
  .stmt { align-items: end; }
  .stmt-main { grid-column: 1 / 9; }
  .stmt-side { grid-column: 9 / 13; margin-top: 0; }
  .support { font-size: 1.125rem; }
  .rows > * { padding: 1.375rem 0 2.75rem; }
  .rows .row-h { grid-column: 1 / 7; }
  .row-b { grid-column: 8 / 13; margin-top: .375rem; font-size: 1.125rem; }
  .app-head { align-items: end; }
  .app-head .label { grid-column: 1 / -1; }
  .app-head .section { grid-column: 1 / 9; }
  .app-head .support { grid-column: 9 / 13; margin-top: 0; }
  .shots {
    grid-auto-flow: row; grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: 1.5rem;
    margin: 5.5rem 0 0; padding: 0; overflow: visible;
    font-size: min(12px, calc((100cqi - 3rem) / 88.8));
  }
  .device { height: 53em; }
  .facts-lg { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .foot-nav ul { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; }
  .foot-brand { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 4rem; }
  .foot-brand p { justify-self: end; }
  .foot-base { display: flex; justify-content: space-between; margin-top: 2.5rem; }
}

/* ---------------------------------------------------------------- schematic app screens (from the design
   board; sizes in em, the strip sets the scale). The iPhone's own system font, as on the phone. */
.app {
  --x-bg: #F4F1E8; --x-s1: #FCFBF7; --x-fg: #18221F; --x-mut: #69736E; --x-line: #E6E1D3; --x-acc: #0F5E4E; --x-acc2: #23977A;
  --x-chip: #DCE9E2; --x-paper: #FFFFFF;
  font-size: 1em; width: 28em; height: 60.6em; border-radius: 4.2em 4.2em 0 0; overflow: hidden; position: relative;
  background: var(--x-bg); color: var(--x-fg); display: flex; flex-direction: column; line-height: 1.25; text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; letter-spacing: 0;
}
@media (prefers-color-scheme: dark) {
  .app {
    --x-bg: #0E1513; --x-s1: #161F1C; --x-fg: #E7EFEA; --x-mut: #8F9E98; --x-line: #24302C; --x-acc: #5CC3A4; --x-acc2: #2E8D72;
    --x-chip: #173129; --x-paper: #E7EFEA;
  }
}
.app ul { list-style: none; }
.app em { font-style: normal; }
.app::before { content: ""; position: absolute; top: 1.1em; left: 50%; width: 9em; height: 2.6em; margin-left: -4.5em; border-radius: 1.3em; background: #05080A; }
.x-sb { display: flex; justify-content: space-between; align-items: center; height: 4.4em; padding: .6em 2.4em 0 2.9em; flex: none; }
.x-sb b { font-size: 1.4em; font-weight: 600; }
.x-ic { display: flex; align-items: flex-end; gap: .18em; }
.x-ic i { width: .32em; background: var(--x-fg); border-radius: .08em; }
.x-ic i:nth-child(1) { height: .45em; } .x-ic i:nth-child(2) { height: .65em; } .x-ic i:nth-child(3) { height: .85em; } .x-ic i:nth-child(4) { height: 1.05em; }
.x-ic s { width: 2.3em; height: 1.1em; border: .1em solid var(--x-mut); border-radius: .3em; margin-left: .5em; position: relative; text-decoration: none; }
.x-ic s::after { content: ""; position: absolute; inset: .12em .5em .12em .12em; background: var(--x-fg); border-radius: .14em; }
.x-top { display: flex; justify-content: space-between; align-items: flex-end; padding: 1em 1.8em .8em; flex: none; }
.x-t { font-size: 2.6em; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.x-add { width: 3em; height: 3em; border-radius: 50%; background: var(--x-chip); position: relative; }
.x-add::before, .x-add::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--x-acc); border-radius: .1em; }
.x-add::before { width: 1.3em; height: .2em; margin: -.1em 0 0 -.65em; } .x-add::after { width: .2em; height: 1.3em; margin: -.65em 0 0 -.1em; }
.x-sum { margin: .2em 1.2em .4em; padding: 1.3em 1.4em 1.2em; border-radius: 1.6em; background: var(--x-s1); display: grid; flex: none; }
.x-cap { font-size: 1.15em; color: var(--x-mut); }
.x-big { font-size: 3.1em; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; margin-top: .15em; }
.x-split { display: flex; gap: .2em; height: .6em; margin-top: 1.1em; border-radius: .3em; overflow: hidden; }
.x-split i:nth-child(1) { flex: 62; background: var(--x-acc); } .x-split i:nth-child(2) { flex: 38; background: var(--x-acc2); }
.x-leg { display: flex; justify-content: space-between; margin-top: .7em; font-size: 1.1em; color: var(--x-mut); }
.x-leg i { display: inline-block; width: .7em; height: .7em; border-radius: .2em; margin-right: .4em; background: var(--x-acc); }
.x-leg span + span i { background: var(--x-acc2); }
.x-grp { font-size: 1.1em; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--x-mut); padding: .9em 1.8em .45em; flex: none; }
.x-list { margin: 0 1.2em; padding: 0 1.2em; border-radius: 1.4em; background: var(--x-s1); flex: none; }
.x-list li { display: flex; justify-content: space-between; align-items: center; gap: .6em; min-height: 2.7em; font-size: 1.3em; border-top: 1px solid var(--x-line); white-space: nowrap; }
.x-list li:first-child { border-top: 0; }
.x-v { font-weight: 550; text-align: right; }
.x-v em { font-size: .78em; color: var(--x-mut); margin-right: .4em; letter-spacing: .04em; font-weight: 500; }
.x-strong { font-weight: 700; }
.x-tab { margin-top: auto; display: flex; justify-content: space-around; align-items: flex-start; padding: .8em .6em 2.6em; border-top: 1px solid var(--x-line); background: var(--x-s1); flex: none; }
.x-tab span { display: grid; justify-items: center; gap: .3em; font-size: .95em; color: var(--x-mut); width: 5.4em; }
.x-tab span i { width: 2.1em; height: 1.6em; border: .16em solid currentColor; border-radius: .45em; }
.x-tab span.on { color: var(--x-acc); font-weight: 600; }
.x-tab .x-tadd { width: 3.6em; height: 3.6em; border-radius: 50%; background: var(--x-acc); position: relative; margin-top: -.3em; }
.x-tab .x-tadd i { position: absolute; inset: 0; border: 0; }
.x-tab .x-tadd i::before, .x-tab .x-tadd i::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--x-bg); border-radius: .1em; }
.x-tab .x-tadd i::before { width: 1.4em; height: .22em; margin: -.11em 0 0 -.7em; } .x-tab .x-tadd i::after { width: .22em; height: 1.4em; margin: -.7em 0 0 -.11em; }
.x-bar3 { display: flex; justify-content: space-between; align-items: center; padding: 1em 1.8em .6em; font-size: 1.35em; flex: none; }
.x-bar3 span { color: var(--x-acc); } .x-bar3 .x-save { font-weight: 650; }
.x-rcpt { display: flex; gap: 1.2em; align-items: center; margin: .6em 1.2em .2em; padding: 1.2em; border-radius: 1.4em; background: var(--x-s1); flex: none; }
.x-paper { width: 7.4em; height: 10.4em; background: var(--x-paper); border: 1px solid var(--x-line); border-radius: .3em; padding: .9em .8em; display: grid; align-content: start; gap: .55em; flex: none; }
.x-paper i { display: block; height: .35em; background: #C9C4B6; border-radius: .1em; }
.x-paper i:nth-child(odd) { width: 72%; } .x-paper i:nth-child(3n) { width: 54%; }
.x-paper i.x-tot { height: .55em; width: 100%; background: #7D877F; margin-top: .4em; }
.x-read { font-size: 1.25em; font-weight: 600; line-height: 1.35; }
.x-read i { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--x-acc); margin-right: .45em; vertical-align: .08em; }
.x-read small { font-size: .85em; font-weight: 400; color: var(--x-mut); }
.x-form { margin-top: .8em; }
.x-form li > span:first-child { color: var(--x-mut); }
.x-note { font-size: 1.1em; color: var(--x-mut); padding: .9em 1.8em; line-height: 1.4; flex: none; }
.x-seg3 { display: flex; margin: .4em 1.2em .6em; padding: .25em; border-radius: 1em; background: var(--x-chip); flex: none; }
.x-seg3 span { flex: 1; padding: .45em 0; border-radius: .75em; text-align: center; font-size: 1.2em; font-weight: 600; color: var(--x-mut); }
.x-seg3 .on { background: var(--x-s1); color: var(--x-fg); }
.x-amt { justify-items: center; padding: 1.8em 1.4em 2em; }
.x-amt .x-big { font-size: 4.4em; }
.x-amt .x-big em { margin-left: .3em; font-size: .36em; font-weight: 600; letter-spacing: .04em; color: var(--x-mut); }
.x-chips { display: flex; gap: .6em; padding: 0 1.8em; flex: none; }
.x-chips span { padding: .45em .9em; border-radius: 1em; background: var(--x-chip); color: var(--x-acc); font-size: 1.2em; font-weight: 600; }
.x-chips .on { background: var(--x-acc); color: var(--x-bg); }

/* The Card + stick symbol and its motion, "Open, then pull" (from the motion study). */
/* Wallet by dx: logo, the Card symbol with its stick. Paste into the site's stylesheet.
   External rules only: no inline styles or scripts (CSP style-src 'self').

   Motion, "Open, then pull": the stick is the wallet's pull-tab. On load the
   card and the stick start inside the body. The stick comes up out of the
   body (204-564 ms, 1 px past rest), the card follows it in the same pull
   (324-840 ms, 1 px past rest), and both seat (stick by 720 ms, card by
   1020 ms). Then, from 8 s after load and every 15 s, the stick lifts 2 px
   and draws the card 1 px, and both seat within about a second: 14 s of
   stillness between beats, no bounce. The rest state is the static logo,
   Card symbol plus stick, the same as the favicon and icon.
   The card and stick sit behind the body in the drawing order, so the body
   hides them while they are inside: no clip or mask.
   translateY values are in the symbol's 64-unit grid: 1.266 units is 1 screen
   px at the 214 x 46 header, so every stop is a whole pixel.
   Cost: transform only, on two groups. Reduced motion and print: static.
   The intro fills backwards so it lets go when it ends; if you retime it,
   keep the beat's delay longer than the intro. */
/* Header size. Keep both: WebKit squeezes an SVG that only has a height. */
.wbd-mark,.wbd-by{fill:#0F5E4E}
.wbd-accent{fill:#23977A}
.wbd-word{fill:#18221F}
@media (prefers-color-scheme: dark){
  .wbd-mark,.wbd-by{fill:#5CC3A4}
  .wbd-accent{fill:#F4F1E8}
  .wbd-word{fill:#E7EFEA}
}
/* Open, once (1.2 s): the stick rises out of the wallet and the card follows, each 1 px past rest, then
   both seat. No pull after it. The -b twins are identical: a double tap swaps them in, which restarts it. */
@keyframes wbd-stick-once{
  0%{transform:translateY(12.661px);animation-timing-function:linear}
  17%{transform:translateY(12.661px);animation-timing-function:cubic-bezier(.55,0,.15,1)}
  47%{transform:translateY(-1.266px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  60%{transform:translateY(0);animation-timing-function:linear}
  100%{transform:translateY(0);animation-timing-function:linear}
}
@keyframes wbd-stick-once-b{
  0%{transform:translateY(12.661px);animation-timing-function:linear}
  17%{transform:translateY(12.661px);animation-timing-function:cubic-bezier(.55,0,.15,1)}
  47%{transform:translateY(-1.266px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  60%{transform:translateY(0);animation-timing-function:linear}
  100%{transform:translateY(0);animation-timing-function:linear}
}
@keyframes wbd-card-once{
  0%{transform:translateY(10.129px);animation-timing-function:linear}
  27%{transform:translateY(10.129px);animation-timing-function:cubic-bezier(.55,0,.15,1)}
  70%{transform:translateY(-1.266px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  85%{transform:translateY(0);animation-timing-function:linear}
  100%{transform:translateY(0);animation-timing-function:linear}
}
@keyframes wbd-card-once-b{
  0%{transform:translateY(10.129px);animation-timing-function:linear}
  27%{transform:translateY(10.129px);animation-timing-function:cubic-bezier(.55,0,.15,1)}
  70%{transform:translateY(-1.266px);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  85%{transform:translateY(0);animation-timing-function:linear}
  100%{transform:translateY(0);animation-timing-function:linear}
}
.wbd-stick,.wbd-card{transform-box:fill-box;transform-origin:50% 100%}
.wbd-stick{animation:wbd-stick-once 1.2s linear backwards}
.wbd-card{animation:wbd-card-once 1.2s linear backwards}
#ls-b:checked ~ .brand-icon .wbd-stick,#ls-pb:checked ~ .brand-icon .wbd-stick{animation-name:wbd-stick-once-b}
#ls-b:checked ~ .brand-icon .wbd-card,#ls-pb:checked ~ .brand-icon .wbd-card{animation-name:wbd-card-once-b}
/* After the 3.4 s intro, the stick blinks like a text cursor (1.1 s, on and off), as the old logo's cursor
   did. A replay restarts it with the intro. */
/* The cursor blink: the first off comes at 3 s (the blink starts at 2.45 s, on for its first 0.55 s), the stick blinks every 1.1 s: a plain cover path
   in the page colour, straight in the svg and outside the moving groups (like the live site's cursor),
   switches on and off over it. */
@keyframes wbd-cover{0%{opacity:0}50%{opacity:1}}
@keyframes wbd-cover-b{0%{opacity:0}50%{opacity:1}}
.wbd-cover{fill:var(--paper);opacity:0;animation:wbd-cover 1.1s step-end 2.45s infinite}
#ls-b:checked ~ .brand-icon .wbd-cover,#ls-pb:checked ~ .brand-icon .wbd-cover{animation-name:wbd-cover-b}
/* Paused: the blink stops with the stick shown (an !important value wins over the running animation). */
#ls-pa:checked ~ .brand-icon .wbd-cover,#ls-pb:checked ~ .brand-icon .wbd-cover{animation-play-state:paused;opacity:0 !important}
@media (prefers-reduced-motion: reduce),print{
  .wbd-stick,.wbd-card,.wbd-cover{animation:none}
  .tap,.dbl{cursor:default}
}