/* The home page in the making (templates/welcome.html). Built on the
   production tokens of tailwind/input.css: the page gradient and grid,
   --solid-* panels, --paper for what TaxMaxi hands you, the ink pill,
   Newsreader for what TaxMaxi says, Geist for the interface, JetBrains
   Mono for every figure. The page is finished without motion: the
   receipt prints and the cards play when static/welcome.js marks them
   seen, the hero's input moves only when a wallet is read, and the
   flow's rail and cards follow the scroll where the browser can. */

.wl {
  --wl-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --wl-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --wl-mono: "JetBrains Mono Variable", ui-monospace, monospace;
  width: min(76rem, 100% - 2rem);
  margin-inline: auto;
  padding-top: 7.5rem;
}
@media (min-width: 40rem) {
  .wl { padding-top: 9rem; }
}

.wl-eyebrow,
.wl-step {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.wl-h2 {
  font-family: var(--blog-serif);
  font-optical-sizing: auto;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--marketing-foreground);
  text-wrap: balance;
  margin-top: 0.75rem;
}
.wl-h3 {
  font-family: var(--blog-serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--paper-ink);
}

.wl-section {
  margin-top: clamp(6rem, 4rem + 8vw, 10rem);
}

/* ---- the hero ------------------------------------------------------- */

.wl-hero {
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "printer";
}
@media (min-width: 64rem) {
  .wl-hero {
    grid-template-columns: minmax(0, 1fr) 21.5rem;
    grid-template-areas: "copy printer";
    align-items: start;
    column-gap: clamp(3rem, 6vw, 6rem);
    row-gap: 2.5rem;
  }
}
.wl-copy { grid-area: copy; max-width: 40rem; }
.wl-read { grid-area: printer; position: relative; display: grid; justify-items: center; gap: 0.875rem; min-width: 0; }

.wl-printer { grid-area: printer; }

.wl-title {
  margin-top: 1.25rem;
  font-family: var(--blog-serif);
  font-optical-sizing: auto;
  font-size: clamp(2.75rem, 1.9rem + 3.2vw, 4.25rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--marketing-foreground);
  text-wrap: balance;
}
.wl-lede {
  margin-top: 1.5rem;
  max-width: 34rem;
  font-size: 1.1875rem;
  line-height: 1.55;
  letter-spacing: -0.006em;
  color: var(--marketing-text);
  text-wrap: pretty;
}

/* The field: the sign-in field's make, raised as a panel, with the ink
   pill inside it. */
.wl-field {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 36rem;
  margin-top: 2.25rem;
  padding: 0.375rem;
  border: 1px solid var(--solid-border);
  border-radius: 9999px;
  background: var(--solid-surface);
  box-shadow: var(--solid-shadow);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.wl-field:focus-within {
  border-color: var(--ring);
  box-shadow: var(--solid-shadow), 0 0 0 4px color-mix(in oklch, var(--ring) 20%, transparent);
}
.wl-input {
  flex: 1;
  min-width: 0;
  height: 2.75rem;
  padding-inline: 1rem 0.5rem;
  border: 0;
  background: transparent;
  font-family: var(--wl-mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--marketing-foreground);
  text-overflow: ellipsis;
  outline: none;
}
.wl-input::placeholder { color: var(--muted-foreground); font-family: inherit; }
.wl-go { flex-shrink: 0; gap: 0.5rem; }
.wl-go svg { transition: translate 200ms var(--wl-ease); }
@media (hover: hover) and (pointer: fine) {
  .wl-go:hover svg { translate: 0.125rem 0; }
}

/* ---- the reading: a solid panel of the year's sentences -------------- */

.wl-addr { font-family: var(--wl-mono); font-size: 0.75rem; }
.wl-count { margin-left: auto; font-variant-numeric: tabular-nums; }

.wl-error {
  padding: 1.25rem;
  font-size: 0.9375rem;
  color: var(--marketing-foreground);
}

/* Reading: the panel's rows step back and a line under the mark
   travels, constant, while the chain answers. */
.wl-reading {
  position: absolute;
  inset: 3rem 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding-top: 3rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--marketing-foreground);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  flex-wrap: wrap;
}

.wl-reading-bar {
  flex-basis: 100%;
  display: block;
  max-width: 10rem;
  height: 2px;
  border-radius: 2px;
  background: var(--solid-border);
  overflow: hidden;
}
.wl-reading-bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: var(--marketing-foreground);
}
.wl-read.htmx-request .wl-reading { opacity: 1; }
.wl-read.htmx-request .wl-reading-bar span { animation: wl-travel 1.1s linear infinite; }
.wl-read.htmx-request .wl-error { opacity: 0.12; filter: blur(1px); transition: opacity 200ms ease, filter 200ms ease; }
.wl-read.htmx-request .wl-receipt { opacity: 0.5; transition: opacity 200ms ease; }
@keyframes wl-travel {
  from { translate: -100% 0; }
  to { translate: 250% 0; }
}

/* ---- the receipt: paper rising out of a slot ------------------------- */

.wl-printer {
  position: relative;
  align-self: start;
  justify-self: center;
  width: 100%;
  max-width: 21.5rem;
  padding-bottom: 0.75rem;
}
.wl-feed {
  /* The paper is cut at the slot, and nowhere else: its shadow and its
     lean stay whole above and beside it. */
  clip-path: inset(-6rem -3rem 0 -3rem);
}
@media (min-width: 64rem) {
  .wl-printer { position: sticky; top: 7rem; }
}
.wl-slot {
  position: absolute;
  inset: auto -0.5rem 0;
  height: 1rem;
  border-radius: 0.5rem;
  background: linear-gradient(180deg, #33453d, #1d2823);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    inset 0 -1px 0 rgb(0 0 0 / 0.4),
    0 1px 1px rgb(0 0 0 / 0.1),
    0 10px 24px -10px rgb(20 30 25 / 0.45);
}
.wl-slot::before {
  /* The mouth the paper comes out of. */
  content: "";
  position: absolute;
  inset: 0.25rem 0.375rem auto;
  height: 2px;
  border-radius: 3px;
  background: #0b100e;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.08);
}

.wl-receipt {
  position: relative;
  margin-inline: 0.25rem;
  padding: 1.25rem 1.25rem 1rem;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.55), transparent 4rem),
    var(--paper);
  color: var(--paper-ink);
  font-family: var(--wl-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--paper-shadow);
  transform-origin: 50% 100%;
  /* The torn top: small teeth, cut by a mask. */
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 0.75rem 0.375rem repeat-x,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - 0.375rem) no-repeat;
}
.wl-receipt hr {
  margin: 0.5rem 0;
  border: 0;
  border-top: 1px dashed color-mix(in oklab, var(--paper-ink) 28%, transparent);
}
.wl-receipt hr.wl-r-double {
  height: 4px;
  border-top: 1px solid color-mix(in oklab, var(--paper-ink) 40%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--paper-ink) 40%, transparent);
}
.wl-r-head { display: grid; justify-items: center; gap: 0; text-align: center; color: var(--paper-muted); }
.wl-r-head svg { margin-bottom: 0.25rem; }
.wl-r-brand { font-weight: 600; letter-spacing: 0.3em; color: var(--paper-ink); margin-right: -0.3em; }
.wl-r-lines { list-style: none; margin: 0; padding: 0; }
.wl-r-lines li { display: flex; justify-content: space-between; gap: 1rem; }
.wl-r-lines li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-r-lines li span:last-child { white-space: nowrap; }
.wl-r-more { color: var(--paper-muted); }
.wl-r-total {
  display: flex;
  justify-content: space-between;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.wl-r-law { color: var(--paper-muted); font-size: 0.6875rem; line-height: 1.45; }
.wl-r-thanks { margin-top: 0.625rem; text-align: center; letter-spacing: 0.08em; }
.wl-r-bars {
  display: flex;
  justify-content: center;
  height: 1.75rem;
  margin-top: 0.5rem;
  overflow: hidden;
}
.wl-r-bars span { flex: none; width: calc(var(--w) * 1.25px); background: var(--paper-ink); }
.wl-r-bars span.gap { background: transparent; }
.wl-r-addr {
  margin-top: 0.375rem;
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--paper-muted);
  word-break: break-all;
}
.wl-r-stub {
  display: block;
  margin: 0.875rem -1.25rem 0;
  padding: 0.625rem 1.25rem 0;
  border-top: 1px dashed color-mix(in oklab, var(--paper-ink) 28%, transparent);
  font-family: var(--font-family-interface, "Geist"), sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--paper-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
  text-underline-offset: 4px;
}
.wl-r-stub::before { content: "✂"; margin-right: 0.5rem; color: var(--paper-muted); text-decoration: none; display: inline-block; }

@media (min-width: 64rem) {
  .wl-receipt { rotate: 0.8deg; }
}

/* ---- the flow: one rail, the trace's stages, the year's paper ------- */

.wl-lede-sm {
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--marketing-text);
  text-wrap: pretty;
}

.wl-route {
  position: relative;
  list-style: none;
  margin: 4rem 0 0;
  padding: 0;
  display: grid;
  gap: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  view-timeline-name: --wl-route;
}
.wl-rail {
  position: absolute;
  top: 1.375rem;
  bottom: 4rem;
  left: 0.6875rem;
  width: 2px;
  border-radius: 2px;
  background: var(--marketing-border);
}
.wl-rail-fill {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, var(--marketing-accent), var(--marketing-foreground));
  transform-origin: top;
}
.wl-stop {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem 3rem;
  padding-left: 2.75rem;
}
@media (min-width: 52rem) {
  .wl-stop { grid-template-columns: 15rem minmax(0, 1fr); }
}
.wl-node {
  position: absolute;
  left: 0.25rem;
  top: 1.125rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 9999px;
  border: 2px solid var(--marketing-accent);
  background: var(--marketing-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--marketing-accent) 14%, transparent);
}
.wl-stop-say { padding-top: 0.875rem; }
.wl-stop-say p:last-child {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--marketing-text);
  text-wrap: pretty;
}

.wl-mono { font-family: var(--wl-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

/* The source badge's make (templates/source-badge.html). */
.wl-source {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.25rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--marketing-border);
  border-radius: 9999px;
  background: var(--solid-surface);
  font-family: var(--wl-mono);
  font-size: 0.625rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.wl-source::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--muted-foreground); }
.wl-source[data-source="Helius"]::before { background: #ff8a3d; }
.wl-source[data-source*="CoinGecko"]::before { background: #6fbf5a; }

/* The head of the line: where the reading has got to, a point of light
   that the stages light up behind. Only where the scroll drives it. */
.wl-rail-head {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0 0 -0.25rem;
  border-radius: 9999px;
  background: var(--marketing-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--marketing-accent) 18%, transparent), 0 0 16px 2px color-mix(in oklab, var(--marketing-accent) 45%, transparent);
  opacity: 0;
}

/* ---- the reminder: a stub torn off the receipt ---------------------- */

.wl-stub {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding: 2.5rem 1.5rem 2rem;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.5), transparent 6rem),
    var(--paper);
  color: var(--paper-ink);
  box-shadow: var(--paper-shadow);
  /* Perforated along the top: a row of holes. */
  mask:
    radial-gradient(circle at 0.5rem 0.5rem, #0000 0.25rem, #000 calc(0.25rem + 0.5px)) top left / 1rem 1rem repeat-x,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - 1rem) no-repeat;
}
@media (min-width: 52rem) {
  .wl-stub { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 4rem; padding: 3.5rem 3rem 3rem; align-items: center; }
}
/* Where the page is wide, the form takes more of it, so the email
   keeps room beside the long "Remind me on 7 Jan 2027". */
@media (min-width: 64rem) {
  .wl-stub { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); }
}
.wl-stub::after {
  content: "";
  position: absolute;
  inset: 1.375rem 0 auto;
  border-top: 1px dashed color-mix(in oklab, var(--paper-ink) 22%, transparent);
}
.wl-stub .wl-eyebrow { color: var(--paper-muted); }
.wl-stub .wl-h2 { color: var(--paper-ink); }
.wl-stub-copy > p:last-child { margin-top: 1rem; max-width: 30rem; font-size: 1rem; line-height: 1.6; color: var(--paper-muted); }

/* A fieldset is as wide as its content unless told otherwise, which
   would push the stub past a phone's width. */
.wl-days { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; border: 0; margin: 0; padding: 0; }
.wl-remind-form { min-width: 0; }
.wl-day {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding-inline: 0.875rem;
  border: 1px solid var(--paper-line);
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.5);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--paper-ink);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, scale 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wl-day input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.wl-day:active { scale: 0.98; }
.wl-day:has(input[type="radio"]:checked) {
  border-color: #173d33;
  background: #173d33;
  color: #fbf8f1;
}
.wl-day:has(input[type="radio"]:focus-visible) { box-shadow: 0 0 0 3px color-mix(in oklch, #60776f 45%, transparent); }
.wl-day-own svg { opacity: 0.6; }

.wl-stub .lp-cta {
  --marketing-foreground: #173d33;
  --solid-surface: #fffdf8;
}
.wl-ics { display: inline-block; margin-top: 1.125rem; font-size: 0.8125rem; color: var(--paper-muted); }
.wl-remind-done p:not(.wl-h3) { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--paper-muted); }
.wl-remind-done .lp-link { display: inline-block; margin-top: 1rem; color: var(--paper-ink); }
.wl-remind-error { margin-top: 0.75rem; font-size: 0.875rem; color: #9a3b2f; }
.wl-remind-error:empty { display: none; }

/* ---- who builds it --------------------------------------------------- */

.wl-max {
  display: grid;
  gap: 2.5rem;
  max-width: 52rem;
}
@media (min-width: 48rem) {
  .wl-max { grid-template-columns: 11rem minmax(0, 1fr); gap: 4rem; }
}
.wl-print { width: 10rem; justify-self: start; align-self: start; margin-top: 0.5rem; }
@media (hover: hover) and (pointer: fine) {
  .wl-print:hover { transform: rotate(0deg) scale(1.03); }
}
.wl-max-copy > p:not(.wl-eyebrow) {
  margin-top: 1.125rem;
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--marketing-text);
  text-wrap: pretty;
}
.wl-max-copy > p.wl-fine { font-size: 0.9375rem; color: var(--muted-foreground); }
.wl-facts {
  margin-top: 2rem;
  max-width: 36rem;
  border-top: 1px solid var(--marketing-border);
  font-size: 0.875rem;
}
.wl-facts div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--marketing-border);
}
.wl-facts dt { color: var(--muted-foreground); }
.wl-facts dd { margin: 0; color: var(--marketing-foreground); }

/* ---- the last way in ------------------------------------------------- */

.wl-end { margin-bottom: 6rem; }
.wl-end-title { margin-top: 1.5rem; max-width: 30rem; }
.wl-end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.75rem; }
.wl-end-actions .lp-cta { gap: 0.5rem; }

/* ---- motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* The receipt waits in its slot until it is seen, then rises out of
     it, top first (static/welcome.js sets the two marks). */
  .wl-printer[data-wl-wait] .wl-receipt { transform: translateY(100%); }
  .wl-printer[data-wl-print] .wl-receipt {
    animation: wl-print 1600ms var(--wl-ease-sheet) 150ms both;
  }
}
@keyframes wl-rise {
  from { opacity: 0; translate: 0 0.75rem; }
}
@keyframes wl-row {
  from { opacity: 0; translate: 0 0.375rem; filter: blur(3px); }
}
@keyframes wl-print {
  from { transform: translateY(100%); }
}

/* The flow follows the scroll where the browser can: the rail fills as
   the route passes, each stage rises in as it enters. Elsewhere it is
   simply there. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wl-rail-fill {
      animation: wl-fill linear both;
      animation-timeline: --wl-route;
      animation-range: entry 30% exit 60%;
    }
    .wl-rail-head {
      animation: wl-head linear both;
      animation-timeline: --wl-route;
      animation-range: entry 30% exit 60%;
    }
    .wl-stop > :not(.wl-node) {
      animation: wl-enter linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
    .wl-node {
      animation: wl-node linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 45%;
    }
  }
}
@keyframes wl-fill {
  from { transform: scaleY(0); }
}
@keyframes wl-head {
  0% { top: 0%; opacity: 0; }
  4%, 96% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes wl-enter {
  from { opacity: 0; translate: 0 1.5rem; }
}
@keyframes wl-node {
  from { background: var(--solid-surface); box-shadow: 0 0 0 0 transparent; }
}

/* ---- round 3 ---------------------------------------------------------- */

/* The sample's way back, in the panel's head once a wallet of one's own
   is shown. */
.wl-back {
  margin-left: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--marketing-foreground);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
  text-underline-offset: 4px;
  cursor: pointer;
}

/* The launch price: a solid panel with the time left, ticking. */

.wl-unit { display: grid; justify-items: center; gap: 0.25rem; }
.wl-unit small { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }

/* A digit that changes rolls: the old one up and out, the new one up
   from below (static/welcome.js swaps the spans). */

@keyframes wl-digit-in { from { transform: translateY(100%); opacity: 0; } }
@keyframes wl-digit-out { to { transform: translateY(-100%); opacity: 0; } }

/* The field, called to: one ring that swells and settles. */
.wl-field.is-called { animation: wl-call 900ms var(--wl-ease); }
@keyframes wl-call {
  0% { box-shadow: var(--solid-shadow), 0 0 0 0 color-mix(in oklch, var(--marketing-accent) 45%, transparent); }
  40% { box-shadow: var(--solid-shadow), 0 0 0 8px color-mix(in oklch, var(--marketing-accent) 20%, transparent); }
  100% { box-shadow: var(--solid-shadow), 0 0 0 4px color-mix(in oklch, var(--ring) 20%, transparent); }
}

.wl-section-head { max-width: 40rem; }

/* ---- the flow's stages, each in its own material --------------------- */

/* On the chain: a dark console, the transaction as Helius sends it,
   fading out where it would go on for pages. */
.wl-chain {
  border-radius: 1rem;
  background: #0f1714;
  color: #c9dbd2;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.2), 0 24px 48px -24px rgb(10 20 15 / 0.55), inset 0 0 0 1px rgb(255 255 255 / 0.06);
  overflow: hidden;
}
.wl-chain-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
  font-size: 0.75rem;
  color: #8fa89d;
}
.wl-chain-bar .wl-mono { color: #e9f2ec; }
.wl-chain-dots { display: inline-flex; gap: 0.375rem; }
.wl-chain-dots i { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: rgb(255 255 255 / 0.14); }
.wl-chain-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-chain-link { margin-left: auto; color: #9dcaaf; text-decoration: none; font-weight: 500; }
.wl-chain-raw {
  margin: 0;
  max-height: 17rem;
  padding: 1rem 1.125rem 2rem;
  overflow: hidden;
  font-family: var(--wl-mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  white-space: pre;
  color: #9fb8ac;
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}

/* In your report: the year's paper, which opens the document, and what
   comes with it. */
.wl-deliver {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 40rem) {
  .wl-deliver { grid-template-columns: minmax(0, 1fr); }
}
.wl-paper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 12rem;
  aspect-ratio: 1 / 1.4142;
  padding: 1.125rem 1.125rem 1rem;
  border: 1px solid var(--paper-line);
  border-radius: 0.25rem;
  background: var(--paper);
  color: var(--paper-ink);
  text-align: left;
  font: inherit;
  cursor: zoom-in;
  box-shadow: var(--paper-shadow);
  transform: rotate(-1.5deg);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transition:
    transform 600ms cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 600ms cubic-bezier(0.19, 1, 0.22, 1);
}
.wl-paper::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 1.375rem;
  height: 1.375rem;
  background: linear-gradient(225deg, var(--app-page-fallback) 50%, rgb(29 42 36 / 0.12) 50%);
  border-bottom-left-radius: 0.1875rem;
}
@media (hover: hover) and (pointer: fine) {
  .wl-paper:hover {
    transform: translateY(-0.5rem) rotate(0deg);
    box-shadow: 0 2px 4px rgb(20 30 25 / 0.08), 0 28px 50px -18px rgb(20 30 25 / 0.45);
  }
}
.wl-paper:active { transform: translateY(-0.25rem) rotate(0deg) scale(0.985); transition-duration: 150ms; }
.wl-paper:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.wl-paper-kicker { margin-top: 0.75rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-muted); }
.wl-paper-year { margin-top: 0.125rem; font-family: var(--wl-mono); font-weight: 600; font-size: 1.25rem; }
.wl-paper-figure { font-family: var(--wl-mono); font-size: 0.75rem; color: var(--paper-muted); }
.wl-paper-lines { display: grid; gap: 0.4375rem; width: 100%; margin-top: 1.125rem; }
.wl-paper-lines i { display: block; height: 2px; border-radius: 2px; background: var(--paper-line); }
.wl-paper-lines i:nth-child(2n) { width: 84%; }
.wl-paper-lines i:nth-child(3n) { width: 64%; }
.wl-paper-open {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.75rem;
  padding-inline: 0.75rem;
  border-radius: 9999px;
  background: #173d33;
  color: #fbf8f1;
  font-size: 0.75rem;
  font-weight: 500;
  transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
}
@media (hover: hover) and (pointer: fine) {
  .wl-paper:hover .wl-paper-open { transform: translateY(-2px); }
}
.wl-gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.wl-gets li { display: grid; gap: 0.25rem; padding-left: 1.25rem; border-left: 2px solid var(--marketing-border); }
.wl-gets b { font-weight: 500; color: var(--marketing-foreground); }
.wl-gets span { font-size: 0.875rem; line-height: 1.55; color: var(--muted-foreground); }

/* The document over the page: the paper grows into it, the page blurs
   behind (static/welcome.js plays the growth from the paper's place). */
.wl-doc {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem;
  border: 0;
  background: transparent;
  overflow: hidden;
}
/* The dialog takes the focus itself as it opens (autofocus), not its
   first link, which iOS would ring. */
.wl-doc:focus { outline: none; }
.wl-doc::backdrop {
  background: rgb(23 33 29 / 0.32);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  opacity: 0;
  transition: opacity 400ms ease;
}
.wl-doc[data-shown]::backdrop { opacity: 1; }
.wl-doc-frame {
  display: flex;
  flex-direction: column;
  width: min(54rem, 100%);
  height: 100%;
  margin-inline: auto;
  border-radius: 0.75rem;
  background: #fbf8f1;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.1), 0 40px 120px -20px rgb(0 0 0 / 0.5);
  overflow: hidden;
  transform-origin: 0 0;
}
.wl-doc-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  border-bottom: 1px solid rgb(29 42 36 / 0.12);
  font-size: 0.8125rem;
  color: #6b776f;
  --marketing-foreground: #173d33;
  --sheet-chip: rgb(23 61 51 / 0.07);
}
.wl-doc-bar span { flex: 1; min-width: 0; }
.wl-doc-bar .lp-link { color: #173d33; }
.wl-doc-page { position: relative; flex: 1; overflow: auto; background: #e9e4d8; }
.wl-doc-page iframe {
  display: block;
  width: 210mm;
  height: 100%;
  border: 0;
  background: #fff;
  transform-origin: 0 0;
}
/* The PDF's pages, drawn by pdf.js (static/welcome.js) as pictures
   the width of the page, one under the other. */
.wl-doc-pages {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #e4e1d9;
}
.wl-doc-pages img { display: block; width: 100%; height: auto; background: #fff; }
.wl-doc-wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: 0.875rem;
  color: #6b776f;
}
.wl-doc-wait[hidden], .wl-doc-pages[hidden], .wl-doc-page iframe[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .wl-doc::backdrop { transition: none; }
}

/* ---- the reminder, calmer ---------------------------------------------- */

.wl-remind-label {
  display: block;
  margin-bottom: 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-muted);
}
.wl-days { margin-bottom: 1.5rem; }
.wl-days legend { float: left; width: 100%; }
.wl-field-paper {
  margin-top: 0;
  max-width: none;
  border-color: var(--paper-line);
  background: #fffdf8;
  box-shadow: 0 1px 1px rgb(20 30 25 / 0.05), 0 10px 24px -14px rgb(20 30 25 / 0.3);
  --marketing-foreground: #173d33;
  --solid-surface: #fffdf8;
  --muted-foreground: #6b776f;
  --ring: #60776f;
}
.wl-field-paper .wl-input-text { font-family: inherit; font-size: 0.9375rem; color: #1d2a24; color-scheme: light; }

/* ---- what it reads ------------------------------------------------------ */

.wl-protocols {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}
.wl-protocol {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "mark name arrow" "mark kind arrow";
  align-items: center;
  column-gap: 0.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--solid-border);
  border-radius: 1rem;
  background: var(--solid-surface);
  box-shadow: var(--solid-shadow);
  text-decoration: none;
  transition: border-color 200ms ease, transform 300ms var(--wl-ease);
}
.wl-protocol .mark { grid-area: mark; }
.wl-protocol-name { grid-area: name; font-weight: 500; color: var(--marketing-foreground); }
.wl-protocol-kind { grid-area: kind; font-size: 0.8125rem; color: var(--muted-foreground); }
.wl-protocol-arrow { grid-area: arrow; color: var(--muted-foreground); transition: translate 200ms var(--wl-ease), color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .wl-protocol:hover { border-color: color-mix(in oklab, var(--marketing-foreground) 30%, transparent); }
  .wl-protocol:hover .wl-protocol-arrow { translate: 0.125rem 0; color: var(--marketing-foreground); }
}
.wl-more { margin-top: 1.5rem; font-size: 0.9375rem; }

/* ---- the signature ------------------------------------------------------ */

/* La Belle Aurore (SIL Open Font License), cut down to the letters of
   the name: a quick, legible hand. It stands still. */
@font-face {
  font-family: "Signature";
  src: url("/static/fonts/signature-la-belle-aurore.woff2") format("woff2");
  font-display: block;
}
.wl-signature {
  margin-top: 1.25rem;
  font-family: "Signature", cursive;
  font-size: 3.25rem;
  line-height: 1.1;
  color: var(--marketing-foreground);
  transform: rotate(-2deg);
  transform-origin: left center;
}
@property --wl-pen {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 110%;
}
@media (prefers-reduced-motion: no-preference) {
  .wl-signature[data-wl-wait] { --wl-pen: 0%; }
  .wl-signature[data-wl-sign-play] { animation: wl-sign 1900ms cubic-bezier(0.45, 0.05, 0.35, 1) both; }
}
@keyframes wl-sign { from { --wl-pen: 0%; } to { --wl-pen: 110%; } }
.wl-max-copy > .wl-fine { margin-top: 1.25rem; }
.wl-de { font-size: 0.8125rem; color: var(--muted-foreground); }

/* ---- questions ------------------------------------------------------------ */

.wl-a { padding: 0 2rem 1.25rem 0; }
.wl-a p { font-size: 0.9375rem; line-height: 1.65; color: var(--marketing-text); }
.wl-a p + p { margin-top: 0.625rem; }
.wl-a a { color: var(--marketing-foreground); text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 30%, transparent); text-underline-offset: 4px; }

.wl-end-title { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.wl-end-sub { margin-top: 0.5rem; font-size: 1rem; color: var(--marketing-text); }

/* The flow's figures fill as their stage arrives, where the scroll
   drives it. */

@keyframes wl-grow { from { transform: scaleX(0); } }

/* ---- round 4 ---------------------------------------------------------- */

/* The way in: the price first, the time left on one quiet line, the
   field as the panel's action, one line of fine print. One object. */
.wl-buy {
  max-width: 36rem;
  margin-top: 2.25rem;
  padding: 1.375rem 1.375rem 1.125rem;
  border: 1px solid var(--solid-border);
  border-radius: 1.5rem;
  background: var(--solid-surface);
  box-shadow: var(--solid-shadow);
}

.wl-buy-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 1.5rem;
  padding-inline: 0.625rem;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--task) 12%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--task);
}
.wl-buy-tag::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: currentColor; }
.wl-buy-ends {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.wl-unit { display: inline-flex; align-items: baseline; }
.wl-unit small { margin-left: 0.0625rem; font-size: 0.8125rem; color: var(--muted-foreground); }

.wl-buy-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 1rem 0 1.25rem;
}
.wl-price-now {
  font-family: var(--blog-serif);
  font-optical-sizing: auto;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--marketing-foreground);
  font-variant-numeric: lining-nums tabular-nums;
}
.wl-price-was {
  font-family: var(--blog-serif);
  font-size: 1.375rem;
  color: var(--muted-foreground);
  text-decoration-thickness: 1.5px;
}

.wl-buy .wl-field { margin-top: 0; max-width: none; box-shadow: none; background: var(--solid-inset); }
.wl-buy .wl-field:focus-within { background: var(--solid-surface); }

/* The transaction signature's copy button and the marks of links that leave. */
.wl-icon { flex: none; }
.wl-out { display: inline-flex; align-items: center; gap: 0.3125rem; }
.wl-out .wl-icon { opacity: 0.7; }
.wl-chain-link { display: inline-flex; align-items: center; gap: 0.375rem; }
.wl-copybtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  margin-left: -0.375rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: #8fa89d;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, scale 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wl-copybtn:active { scale: 0.9; }
@media (hover: hover) and (pointer: fine) {
  .wl-copybtn:hover { background: rgb(255 255 255 / 0.08); color: #e9f2ec; }
}
.wl-copybtn .wl-icon { grid-area: 1 / 1; transition: opacity 150ms ease, scale 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.wl-copybtn .wl-icon-done { opacity: 0; scale: 0.5; color: #9dcaaf; }
.wl-copybtn[data-copied] .wl-icon:not(.wl-icon-done) { opacity: 0; scale: 0.5; }
.wl-copybtn[data-copied] .wl-icon-done { opacity: 1; scale: 1; }

.wl-buy-ends .wl-unit small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.wl-max-copy > p.wl-signature { margin-top: 1.25rem; font-size: 2.5rem; line-height: 1.1; color: var(--marketing-foreground); max-width: none; }
.wl-faq .faq { max-width: 48rem; margin-top: 2rem; }

/* ---- round 5 ---------------------------------------------------------- */

/* The reading's caption and states, over the receipt. */
.wl-cap { justify-self: stretch; max-width: 21.5rem; margin-inline: auto; font-size: 0.8125rem; color: var(--muted-foreground); text-align: center; }
.wl-cap .wl-back { margin-left: 0.5rem; }
.wl-read > .wl-error {
  width: 100%;
  max-width: 21.5rem;
  padding: 1.25rem;
  border: 1px solid var(--solid-border);
  border-radius: 1rem;
  background: var(--solid-surface);
  box-shadow: var(--solid-shadow);
}
.wl-read > .wl-reading {
  inset: 2.5rem 0 auto;
  z-index: 2;
  padding-top: 6rem;
  flex-direction: column;
  flex-wrap: nowrap;
}
.wl-read > .wl-reading img { border-radius: 9999px; }
.wl-read.htmx-request .wl-receipt { opacity: 0.25; filter: blur(2px); transition: opacity 200ms ease, filter 200ms ease; }

/* The countdown: plain figures, mono, settling softly when they change. */
.wl-num {
  display: inline-block;
  min-width: 1.25em;
  font-family: var(--wl-mono);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--marketing-foreground);
  text-align: right;
}
.wl-buy-ends .wl-unit + .wl-unit { margin-left: 0.25rem; }

/* On a phone the field and its button stack: the address needs the
   width, the button keeps its size. */
@media (max-width: 40rem) {
  .wl-field {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.375rem;
    border-radius: 1.25rem;
  }
  .wl-input { height: 3rem; padding-inline: 0.875rem; text-align: left; }
  .wl-go { justify-content: center; width: 100%; height: 3rem; }
  .wl-buy { padding: 1.125rem 1rem 1rem; border-radius: 1.25rem; }
  .wl-price-now { font-size: 2.5rem; }
}

/* The console's head: the date and program, then the signature with
   its copy and Solscan. On a phone those are two lines. */
.wl-chain-id { display: inline-flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.wl-chain-id .wl-mono { color: #e9f2ec; }
.wl-chain-id .wl-copybtn { margin-left: -0.5rem; }
.wl-chain-link { margin-left: 0.25rem; }
@media (max-width: 40rem) {
  .wl-chain-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); row-gap: 0.5rem; }
  .wl-chain-meta { grid-column: 2; }
  .wl-chain-id { grid-column: 1 / -1; margin-left: 0; justify-content: space-between; }
  .wl-chain-link { margin-left: auto; }
}

/* Paper in the dark: the receipt, the ledger and the stub dim to a warm
   night tone with light ink, so they keep their shape without glaring. */
:root[data-theme="dark"] .wl {
  --paper: #2b312c;
  --paper-ink: #e6e1d4;
  --paper-muted: #a7a493;
  --paper-line: rgb(230 225 212 / 0.14);
  --paper-shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 18px 36px -16px rgb(0 0 0 / 0.6);
}
:root[data-theme="dark"] .wl-receipt {
  background: var(--paper);
  color: var(--paper-ink);
}
:root[data-theme="dark"] .wl-receipt hr { border-top-color: rgb(230 225 212 / 0.22); }
:root[data-theme="dark"] .wl-receipt hr.wl-r-double { border-color: rgb(230 225 212 / 0.32); }
:root[data-theme="dark"] .wl-r-bars span:not(.gap) { background: var(--paper-ink); }
:root[data-theme="dark"] .wl-r-law,
:root[data-theme="dark"] .wl-r-addr,
:root[data-theme="dark"] .wl-r-more { color: var(--paper-muted); }
:root[data-theme="dark"] .wl-r-stub { color: var(--paper-ink); border-top-color: rgb(230 225 212 / 0.22); }

:root[data-theme="dark"] .wl-stub { background: var(--paper); color: var(--paper-ink); }
:root[data-theme="dark"] .wl-stub .wl-h2 { color: var(--paper-ink); }
:root[data-theme="dark"] .wl-day { background: rgb(255 255 255 / 0.04); color: var(--paper-ink); }
:root[data-theme="dark"] .wl-day:has(input[type="radio"]:checked) { background: #e6e1d4; border-color: #e6e1d4; color: #1d2a24; }
:root[data-theme="dark"] .wl-field-paper { background: rgb(0 0 0 / 0.18); border-color: var(--paper-line); }
:root[data-theme="dark"] .wl-field-paper .wl-input-text { color: var(--paper-ink); color-scheme: dark; }
:root[data-theme="dark"] .wl-paper-open { background: #e6e1d4; color: #1d2a24; }

/* The document over the page: Geist in its bar, and the page scaled
   inside it rather than scrolled sideways. */
.wl-doc { font-family: "Geist", ui-sans-serif, system-ui, sans-serif; }
.wl-doc-page { overflow: hidden; }
.wl-doc-page iframe { transform-origin: 0 0; }
@media (max-width: 40rem) {
  .wl-doc { padding: max(0.75rem, env(safe-area-inset-top)) 0.5rem 0.5rem; }
  .wl-doc-bar { gap: 0.5rem; padding-left: 1rem; }
  .wl-doc-bar span { display: none; }
  .wl-doc-bar .lp-link { margin-right: auto; }
}

/* The reminder's email and button stack on a phone, like the wallet
   field. */
@media (max-width: 40rem) {
  .wl-field-paper .wl-go { width: 100%; }
}
.wl-read { grid-template-columns: minmax(0, 21.5rem); justify-content: center; justify-items: stretch; }
.wl-read > .wl-printer { justify-self: stretch; }
.wl-cap { max-width: none; }
.wl-read > .wl-printer { grid-area: auto; }
@media (max-width: 40rem) {
  .wl-slot { inset: auto 0 0; }
}

/* The countdown's digits: a slot per digit, one tabular figure wide,
   in which the leaving and the arriving digit share one cell while they
   cross (static/welcome.js). */
.wl-num { display: inline-flex; min-width: 0; }
.wl-d { display: inline-grid; width: 1ch; justify-items: center; }
.wl-g { grid-area: 1 / 1; will-change: transform, opacity; }

/* ---- round 6 ---------------------------------------------------------- */

/* The way in is the field alone; the price moved to its own section.
   Under it, the free part and the way to later, on one line. */
.wl-hero-fine {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  max-width: 36rem;
  margin-top: 0.875rem;
  padding-inline: 1.25rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.wl-later { font-size: 0.8125rem; }

/* ---- the hero's answer: ready, reading, read ---------------------------- */

/* One field and one button at a time (templates/welcome.html,
   "welcome-act"). Read: the year in a sentence, the address as a chip,
   the email in the field's place. Edit ("Change"): the address back. */
.wl-act[data-state="read"] .wl-ask,
.wl-act[data-state="read"] .wl-address-field,
.wl-act[data-state="edit"] .wl-result,
.wl-act[data-state="edit"] .wl-chip-row,
.wl-act[data-state="edit"] .wl-email-field,
.wl-act[data-state="edit"] .wl-email-fine { display: none; }
.wl-result { text-wrap: pretty; }
.wl-chip-row { display: flex; align-items: center; gap: 0.875rem; margin-top: 1.75rem; }
.wl-wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.875rem 0 0.625rem;
  overflow: hidden;
  border: 1px solid var(--solid-border);
  border-radius: 9999px;
  background: var(--solid-surface);
  box-shadow: var(--solid-shadow);
  color: var(--marketing-foreground);
  white-space: nowrap;
}
.wl-chip-read { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 500; color: #1e6b4f; }
:root[data-theme="dark"] .wl-chip-read { color: #8fd0a3; }
.wl-change { padding: 0; border: 0; background: none; font-size: 0.8125rem; cursor: pointer; }
.wl-email-field { margin-top: 0.875rem; }
.wl-email-fine { display: block; margin-top: 0.75rem; }

/* Reading: the button is the progress, at the width it had; a thin bar
   runs along the field's foot. */
.wl-address-field { position: relative; }
.wl-address-field .wl-go { display: inline-grid; place-items: center; }
.wl-address-field .wl-go > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.5rem; }
.wl-go-busy { visibility: hidden; }
.wl-act.htmx-request .wl-go-say { visibility: hidden; }
.wl-act.htmx-request .wl-go-busy { visibility: visible; }
.wl-field-bar {
  position: absolute;
  inset: auto 1.75rem 0.1875rem;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.wl-field-bar span { display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--marketing-foreground); }
.wl-act.htmx-request .wl-field-bar { opacity: 0.5; }
.wl-act.htmx-request .wl-field-bar span { animation: wl-travel 1.1s linear infinite; }

/* Read, just now: only the input moves. The chip takes the field's
   place (static/welcome.js narrows it from the field's width) and the
   email field rises where the address was; the words around them just
   change, and the hero never plays an entrance of its own. */
@media (prefers-reduced-motion: no-preference) {
  .wl-act.is-new[data-state="read"] .wl-chip-row { animation: wl-up 280ms var(--wl-ease) both; }
  .wl-act.is-new[data-state="read"] .wl-email-field { animation: wl-up 320ms var(--wl-ease) 120ms both; }
  .wl-act.is-new[data-state="read"] .wl-email-fine { animation: wl-up 320ms var(--wl-ease) 200ms both; }
}
@keyframes wl-up {
  from { opacity: 0; translate: 0 6px; }
}

/* The reminder's days say why, the day after it, quieter. */
.wl-day small { font-size: 0.75rem; font-weight: 400; opacity: 0.7; font-variant-numeric: tabular-nums; }

/* Pricing: the year is the one to buy, an ink card in front with
   everything on it; Lifetime beside it, quieter; the pack only a line
   under both. In the dark the ink card stays green, lit a little
   at its edge, so it leads without glaring. */
.wl-plans {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 52rem) {
  .wl-plans { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .wl-plans-one { grid-template-columns: minmax(0, 40rem); }
}
.wl-plan {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--solid-border);
  border-radius: 1.5rem;
  background: var(--solid-surface);
  box-shadow: var(--solid-shadow);
}
.wl-plan-main {
  --marketing-foreground: #f6f3ea;
  --marketing-text: #d3e2d9;
  --muted-foreground: #9db5aa;
  --marketing-accent: #9dcaaf;
  --solid-surface: #173d33;
  --solid-border: rgb(255 255 255 / 0.12);
  --task: #f0c987;
  padding: 2rem;
  border-color: #0f2c24;
  background: radial-gradient(120% 80% at 100% 0%, #24564a, #173d33 60%);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 30px 60px -30px rgb(23 61 51 / 0.6);
  color: var(--marketing-text);
}
:root[data-theme="dark"] .wl-plan-main {
  --muted-foreground: #8fa99d;
  --marketing-accent: #8fd0a3;
  --solid-surface: #143a30;
  border-color: rgb(143 208 163 / 0.22);
  background: radial-gradient(120% 80% at 100% 0%, #245246, #163a30 60%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 1px 2px rgb(0 0 0 / 0.3), 0 30px 60px -30px rgb(0 0 0 / 0.7);
}
.wl-plan-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.wl-plan-name { font-size: 0.9375rem; font-weight: 600; color: var(--marketing-foreground); }
.wl-plan .wl-buy-price { margin: 1.25rem 0 0.375rem; }
.wl-plan-main .wl-price-now { font-size: 3.75rem; }
.wl-price-sm { font-size: 2.25rem; }
.wl-plan-for { font-size: 0.9375rem; color: var(--marketing-text); }
.wl-plan-main .wl-buy-ends { margin-top: 1rem; }
.wl-plan-go { align-self: stretch; justify-content: center; gap: 0.5rem; height: 3rem; margin-top: 1.5rem; font-size: 0.9375rem; }
.wl-plan-main .wl-plan-fine { margin-top: 0.75rem; text-align: center; }
.wl-plan-fine { font-size: 0.8125rem; color: var(--muted-foreground); }
.wl-plan-gets {
  display: grid;
  gap: 0.625rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--solid-border);
}
@media (min-width: 52rem) {
  .wl-plan-gets { grid-template-columns: 1fr 1fr; }
}
.wl-plan-gets li { display: flex; gap: 0.625rem; font-size: 0.9375rem; line-height: 1.45; color: var(--marketing-text); }
.wl-plan-gets li::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1875rem;
  background: var(--marketing-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wl-plan-gets b { font-weight: 600; color: var(--marketing-foreground); }
/* Lifetime: the same card, quieter, its button a link. */
.wl-plan-life { padding: 1.75rem; }
.wl-plan-say { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--solid-border); font-size: 0.9375rem; line-height: 1.55; color: var(--marketing-text); }
.wl-plan-link { align-self: flex-start; margin-top: 1.25rem; }
.wl-plan-more { margin-top: 1.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
@media (max-width: 40rem) {
  .wl-plan, .wl-plan-main { padding: 1.375rem; border-radius: 1.25rem; }
  .wl-plan-main .wl-price-now { font-size: 3rem; }
  .wl-hero-fine { padding-inline: 0.5rem; }
}

/* A section the header links to stops below the floating header. */
#pricing, #wl-remind { scroll-margin-top: 6rem; }

/* The app on the page: the dashboard in a window, to look at. It
   settles from large to its size as it scrolls in, where the browser
   ties an animation to the scroll; elsewhere it simply sits there. The
   screen is cut at a height and fades out at its foot. */
.wl-window {
  margin-top: 2.5rem;
  overflow: clip;
  border: 1px solid var(--solid-border);
  border-radius: 1.25rem;
  background: var(--app-page-fallback);
  box-shadow: var(--solid-shadow), 0 40px 80px -40px rgb(20 40 34 / 0.35);
}
.wl-window-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 2.5rem;
  padding-inline: 1rem;
  border-bottom: 1px solid var(--solid-border);
  background: var(--solid-surface);
}
.wl-window-bar .wl-chain-dots i { background: var(--solid-border); }
.wl-window-url {
  flex: 1;
  max-width: 18rem;
  margin-inline: auto;
  padding: 0.1875rem 0.75rem;
  border-radius: 9999px;
  background: var(--solid-inset);
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-align: center;
}
.wl-window-screen {
  position: relative;
  height: clamp(36rem, 82vh, 52rem);
  overflow: hidden;
  user-select: none;
}
.wl-window-screen > [data-page="app"] { border: 0; border-radius: 0; min-height: 100%; }
.wl-window-screen::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 40;
  height: 6rem;
  background: linear-gradient(to bottom, transparent, var(--app-page-fallback));
  pointer-events: none;
}
.wl-window-cap { padding: 0.875rem 1rem; border-top: 1px solid var(--solid-border); background: var(--solid-surface); font-size: 0.8125rem; color: var(--muted-foreground); text-align: center; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wl-window {
      animation: wl-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
  }
}
@keyframes wl-settle {
  from { transform: translateY(3rem) scale(1.1); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}
/* Settling, the window grows past the 1rem gutter and the screen's
   edge. The body's clip hides that, but iOS still lets the page be
   dragged sideways onto it; a clip on the page itself stops that. */
.blog-page:has(> .wl) { overflow-x: clip; }

/* ---- round 7 ---------------------------------------------------------- */

/* On a phone the field and its button part: the field is a field of its
   own, the button a full-width button under it, not one box holding
   both. 16px text keeps iOS from zooming in on focus. */
@media (max-width: 40rem) {
  .wl-field,
  .wl-field-paper,
  :root[data-theme="dark"] .wl-field-paper {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .wl-field:focus-within { box-shadow: none; }
  .wl-field .wl-input {
    flex: none;
    height: 3.25rem;
    padding-inline: 1.125rem;
    border: 1px solid var(--solid-border);
    border-radius: 0.875rem;
    background: var(--solid-surface);
    box-shadow: var(--solid-shadow);
    font-size: 1rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }
  .wl-field .wl-input:focus {
    border-color: var(--ring);
    box-shadow: var(--solid-shadow), 0 0 0 4px color-mix(in oklch, var(--ring) 20%, transparent);
  }
  .wl-field-paper .wl-input { border-color: var(--paper-line); background: #fffdf8; }
  :root[data-theme="dark"] .wl-field-paper .wl-input { background: rgb(0 0 0 / 0.18); }
  .wl-field .wl-go { width: 100%; height: 3.25rem; justify-content: center; border-radius: 0.875rem; font-size: 0.9375rem; }
  .wl-field.is-called { animation: none; }
  .wl-field.is-called .wl-input { animation: wl-call 900ms var(--wl-ease); }
}

/* The dashboard in its window starts at the fan: the toolbar above it
   is cut, the room for a hovered card's lift kept, so more of the table
   shows under it. */
.wl-window-screen > [data-page="app"] { margin-top: -8rem; }

/* The report over the page: no frame around the paper. The page itself,
   white and A4 wide, lies on a dark scrim with its own shadow; its words
   and buttons sit on the scrim above it. One surface instead of a beige
   frame, a beige well and a white page in each other. */
.wl-doc::backdrop {
  background: rgb(12 20 17 / 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 220ms ease;
}
.wl-doc-frame {
  gap: 0.625rem;
  width: min(49.625rem, 100%);
  border-radius: 0.5rem;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.wl-doc-bar {
  padding: 0 0 0 0.25rem;
  border: 0;
  color: rgb(255 255 255 / 0.7);
  --marketing-foreground: #ffffff;
  --muted-foreground: rgb(255 255 255 / 0.8);
  --sheet-chip: rgb(255 255 255 / 0.14);
  --sheet-chip-hover: rgb(255 255 255 / 0.24);
}
.wl-doc-bar .lp-link { color: #ffffff; text-decoration-color: rgb(255 255 255 / 0.35); }
/* The disc's right edge on the page's, not past it. */
.wl-doc-bar .overlay-sheet-close { margin-right: -0.375rem; }
.wl-doc-page {
  border-radius: 0.375rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 24px 64px -16px rgb(0 0 0 / 0.55);
}

/* The statement (templates/welcome.html, "welcome-statement"): one
   card for the ledger, the euros and the law, the same rows each time.
   A step adds a column or a block, never a new material, so the three
   read as one entry filling in. */
.wl-st {
  --wl-st-cols: minmax(0, 1fr) 7.5rem 7.5rem;
  overflow: hidden;
  border: 1px solid var(--solid-border);
  border-radius: 1rem;
  background: var(--solid-surface);
  box-shadow: var(--solid-shadow);
  font-size: 0.875rem;
  color: var(--marketing-text);
}
.wl-st:not([data-step="ledger"]) { --wl-st-cols: minmax(0, 1fr) 6.5rem 6.5rem 6.5rem; }
.wl-st-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--solid-border);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.wl-st-head span:last-child { color: var(--marketing-foreground); font-weight: 500; }
.wl-st-row {
  display: grid;
  grid-template-columns: var(--wl-st-cols);
  gap: 1rem;
  align-items: baseline;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--solid-border);
  transition: opacity 200ms ease;
}
.wl-st-row > span + span { text-align: right; white-space: nowrap; }
.wl-st-cols {
  padding-block: 0.5rem;
  background: var(--solid-inset);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.wl-st-label { min-width: 0; color: var(--marketing-foreground); }
.wl-st-label small { display: block; margin-top: 0.125rem; font-size: 0.75rem; color: var(--muted-foreground); }
.wl-st-out, .wl-st-in, .wl-st-eur, .wl-st-fig { font-family: var(--wl-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.wl-st-out { color: #8a3a2f; }
.wl-st-in { color: #1e6b4f; }
.wl-st-eur { color: var(--marketing-foreground); }
.wl-st small { font-size: 0.6875rem; color: var(--muted-foreground); }
.wl-st-label small { font-size: 0.75rem; }
.wl-st-note { padding: 0.875rem 1.25rem; font-size: 0.875rem; color: var(--muted-foreground); }

/* Under the law: the other lines step back, the sale's stays, and the
   tax is worked out under it and ruled off. */
/* A step's own law card folds the other lines away, as the shared card
   does; while it waits to play they are still there. */
.wl-st[data-step="law"]:not([data-live]):not([data-wl-wait]) .is-other { grid-template-rows: 0fr; opacity: 0; }
.wl-st[data-step="law"]:not([data-live]):not([data-wl-wait]) .is-other > * { padding-block: 0; border-bottom-width: 0; }
.wl-st .is-sale .wl-st-row { background: color-mix(in oklab, var(--marketing-accent) 7%, transparent); }
.wl-st-tax { padding: 0.5rem 1.25rem 0; }
.wl-st-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.5rem 0; }
.wl-st-line > span:first-child { min-width: 0; }
.wl-st-lot { color: var(--marketing-text); }
.wl-st-verdict {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: color-mix(in oklab, #9a3b2f 10%, transparent);
  color: #9a3b2f;
}
.wl-st-verdict[data-taxable="false"] { background: color-mix(in oklab, #1e6b4f 10%, transparent); color: #1e6b4f; }
.wl-st-result {
  margin-top: 0.375rem;
  padding: 0.875rem 0 1rem;
  border-top: 3px double var(--marketing-foreground);
  font-weight: 600;
  color: var(--marketing-foreground);
}
.wl-st-result b { font-size: 1.25rem; font-weight: 600; }
.wl-st-tax[data-tone="gain"] .wl-st-result b { color: #1e6b4f; }
.wl-st-tax[data-tone="loss"] .wl-st-result b { color: #9a3b2f; }
.wl-st-law { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--solid-border); background: var(--solid-inset); }
.wl-law { margin: 0; }
.wl-law p[lang] { margin: 0.5rem 0 0.75rem; font-family: var(--blog-serif); font-size: 1rem; line-height: 1.55; color: var(--marketing-foreground); }
:root[data-theme="dark"] .wl-st-out, :root[data-theme="dark"] .wl-st-verdict { color: #e59a8c; }
:root[data-theme="dark"] .wl-st-in, :root[data-theme="dark"] .wl-st-verdict[data-taxable="false"], :root[data-theme="dark"] .wl-st-tax[data-tone="gain"] .wl-st-result b { color: #8fd0a3; }
:root[data-theme="dark"] .wl-st-tax[data-tone="loss"] .wl-st-result b { color: #e59a8c; }

/* On a phone a line is two lines of two: what it was and its euros,
   then the amount, signed for its side, and where the price came from.
   The kind alone names it (the head says the rest), the sign stands in
   for Out and In, and the price of one is left to the wide screen and
   the report. */
.wl-st-kind, .wl-st-amt, .wl-st-src { display: none; }
@media (max-width: 40rem) {
  .wl-st-head, .wl-st-tax, .wl-st-law, .wl-st-note { padding-inline: 1rem; }
  .wl-st-cols, .wl-st-long, .wl-st .wl-st-price, .wl-st-out, .wl-st-in { display: none; }
  .wl-st-kind, .wl-st-amt, .wl-st-src { display: block; }
  .wl-st .wl-st-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label eur" "amt src";
    gap: 0.25rem 1rem;
    align-items: baseline;
    padding-inline: 1rem;
  }
  .wl-st-row > .wl-st-label { grid-area: label; }
  .wl-st-row > .wl-st-eur { grid-area: eur; font-size: 0.875rem; }
  .wl-st-row > .wl-st-amt { grid-area: amt; text-align: left; font-family: var(--wl-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
  .wl-st-row > .wl-st-src { grid-area: src; justify-self: end; line-height: 1; }
  .wl-st-amt[data-side="out"] { color: #8a3a2f; }
  .wl-st-amt[data-side="in"] { color: #1e6b4f; }
  :root[data-theme="dark"] .wl-st-amt[data-side="out"] { color: #e59a8c; }
  :root[data-theme="dark"] .wl-st-amt[data-side="in"] { color: #8fd0a3; }
}
.wl-law p[lang] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.wl-st-fig { white-space: nowrap; }

/* ---- the stage: one statement filling in ------------------------------ */

/* The ledger, the euros and the law as one card. On a phone each step
   keeps its own; on a wide screen the card stays in view beside the
   steps and changes as each reaches the middle (static/welcome.js sets
   data-step, and data-wl-live on the stage). The server sends the card
   whole, so without the script it reads as the law's. */
.wl-stage { position: relative; list-style: none; }
.wl-stage-steps { display: grid; gap: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.wl-stage-card { display: none; }
.wl-stage-aside { display: none; }
@media (min-width: 52rem) {
  .wl-stage {
    display: grid;
    grid-template-columns: 17.75rem minmax(0, 1fr);
    column-gap: 3rem;
  }
  .wl-stage-steps { gap: 0; }
  .wl-stage .wl-stop {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-height: clamp(17rem, 46vh, 26rem);
  }
  .wl-stage .wl-stop:last-child { min-height: clamp(24rem, 62vh, 36rem); }
  .wl-stage .wl-stop > .wl-st { display: none; }
  .wl-stage-card {
    display: block;
    position: sticky;
    top: 6.5rem;
    align-self: start;
  }
  .wl-stage-aside {
    display: block;
    margin-top: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--marketing-border);
  }
  .wl-stage-aside .wl-law p[lang] { font-size: 0.9375rem; -webkit-line-clamp: 6; line-clamp: 6; }
  .wl-stage[data-wl-live] .wl-stop-say { transition: opacity 300ms ease; }
  .wl-stage[data-wl-live] .wl-stop:not(.is-on) .wl-stop-say { opacity: 0.35; }
}

/* A fold opens and closes its one child by its height, without
   measuring it. */
.wl-fold {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 480ms var(--wl-ease), opacity 280ms ease;
}
.wl-fold > * { min-height: 0; overflow: hidden; }
.wl-st-price { margin-top: 0.125rem; }
.wl-st-price small { display: block; }

/* The live card at each step. The € column opens beside Out and In,
   the prices fold in under the lines with their source stamped on, then
   the other lines fold away and the sale is worked out under its own. */
.wl-st[data-live] {
  --wl-st-cols: minmax(0, 1fr) 6.5rem 6.5rem 6.5rem;
  transition: box-shadow 300ms ease;
}
.wl-st[data-live] .wl-st-row { transition: grid-template-columns 480ms var(--wl-ease), background-color 300ms ease; }
.wl-st[data-live] .wl-st-eur { transition: opacity 300ms ease 120ms; }
.wl-st[data-live] .wl-source {
  transition: opacity 200ms ease, transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(220ms + var(--i, 0) * 70ms);
}
.wl-st[data-live] .is-sale .wl-st-eur { font-weight: 600; }
.wl-st[data-live][data-step="ledger"] { --wl-st-cols: minmax(0, 1fr) 7.5rem 7.5rem 0rem; }
.wl-st[data-live][data-step="ledger"] .wl-st-eur { opacity: 0; transition-delay: 0ms; }
.wl-st[data-live][data-step="ledger"] .wl-st-row { column-gap: 1rem; }
.wl-st[data-live][data-step="ledger"] .wl-st-price,
.wl-st[data-live][data-step="ledger"] .wl-st-ifeuros,
.wl-st[data-live]:not([data-step="law"]) .wl-st-iflaw,
.wl-st[data-live][data-step="law"] .is-other { grid-template-rows: 0fr; opacity: 0; }
.wl-st[data-live][data-step="law"] .wl-st-ifeuros { grid-template-rows: 0fr; opacity: 0; }
/* A folded child gives up its padding and its rule too, or they would
   hold it open. */
.wl-st[data-live] .wl-fold > * { transition: padding 480ms var(--wl-ease), border-width 480ms var(--wl-ease); }
.wl-st[data-live][data-step="ledger"] .wl-st-ifeuros > *,
.wl-st[data-live]:not([data-step="law"]) .wl-st-iflaw > *,
.wl-st[data-live]:not([data-step="law"]) .wl-st-iflaw .wl-st-tax,
.wl-st[data-live][data-step="law"] .is-other > *,
.wl-st[data-live][data-step="law"] .wl-st-ifeuros > * { padding-block: 0; border-bottom-width: 0; }
.wl-st[data-live][data-step="ledger"] .wl-source { opacity: 0; transform: scale(1.35) rotate(-4deg); transition-delay: 0ms; }
.wl-st[data-live]:not([data-step="ledger"]) .is-sale .wl-st-row { background: color-mix(in oklab, var(--marketing-accent) 7%, transparent); }
.wl-st[data-live]:not([data-step="law"]) .is-sale .wl-st-row { background: transparent; }

/* The result, the figure the whole route comes to. */
.wl-st[data-live] .wl-st-result b { font-size: 1.75rem; letter-spacing: -0.01em; }

/* ---- the days held, against the year ---------------------------------- */

/* Each lot's holding as a bar on one scale with the year marked: short
   of the mark it is taxed, past it free. The bar grows when the law's
   step is reached. */
.wl-st-lot { padding-bottom: 0.25rem; }
.wl-hold { padding: 0.25rem 0 0.625rem; }
.wl-hold-track {
  position: relative;
  height: 0.625rem;
  margin-top: 1.25rem;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--marketing-foreground) 7%, transparent);
}
.wl-hold-free {
  position: absolute;
  inset: 0 0 0 var(--year);
  border-radius: 0 9999px 9999px 0;
  background: repeating-linear-gradient(135deg, color-mix(in oklab, #1e6b4f 16%, transparent) 0 4px, color-mix(in oklab, #1e6b4f 8%, transparent) 4px 8px);
}
.wl-hold-free i,
.wl-hold-mark i {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  font-family: var(--wl-mono);
  font-size: 0.625rem;
  font-style: normal;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.wl-hold-free i { right: 0; color: #1e6b4f; }
:root[data-theme="dark"] .wl-hold-free i { color: #8fd0a3; }
.wl-hold-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--held);
  border-radius: 9999px;
  background: linear-gradient(90deg, color-mix(in oklab, #c2410c 55%, transparent), #c2410c);
  transform-origin: left;
  transition: transform 1100ms var(--wl-ease) 380ms;
}
.wl-hold[data-taxable="false"] .wl-hold-fill { background: linear-gradient(90deg, color-mix(in oklab, #1e6b4f 55%, transparent), #1e6b4f); }
.wl-hold-mark {
  position: absolute;
  top: -0.375rem;
  bottom: -0.375rem;
  left: var(--year);
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--marketing-foreground);
}
.wl-hold-mark i { right: 0.375rem; bottom: calc(100% - 0.125rem); color: var(--marketing-foreground); }
.wl-hold-say {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin-top: 0.625rem;
  font-family: var(--wl-mono);
  font-size: 0.75rem;
  color: var(--marketing-foreground);
}
.wl-hold-say .wl-st-verdict { margin-left: 0; font-family: var(--font-family-interface, "Geist"), sans-serif; }
.wl-st[data-live]:not([data-step="law"]) .wl-hold-fill { transform: scaleX(0); transition: transform 200ms ease; }
:root[data-theme="dark"] .wl-hold-fill { background: linear-gradient(90deg, color-mix(in oklab, #f08a5d 45%, transparent), #f08a5d); }
:root[data-theme="dark"] .wl-hold[data-taxable="false"] .wl-hold-fill { background: linear-gradient(90deg, color-mix(in oklab, #8fd0a3 45%, transparent), #8fd0a3); }
:root[data-theme="dark"] .wl-hold-free { background: repeating-linear-gradient(135deg, rgb(143 208 163 / 0.18) 0 4px, rgb(143 208 163 / 0.08) 4px 8px); }

/* A step's own card (on a phone) waits looking like the step before
   and plays its own when reached (static/welcome.js). The euros' figures
   fade in and their sources stamp on; the law's sale is worked out under
   its line, the other lines step back, and the bar grows. */
.wl-st[data-wl-anim] .wl-st-eur { transition: opacity 300ms ease 120ms; }
.wl-st[data-wl-anim] .wl-source {
  transition: opacity 200ms ease, transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(220ms + var(--i, 0) * 70ms);
}
.wl-st[data-wl-anim] .wl-fold > * { transition: padding 480ms var(--wl-ease), border-width 480ms var(--wl-ease); }
.wl-st[data-step="euros"][data-wl-wait] .wl-st-eur { opacity: 0; transition-delay: 0ms; }
.wl-st[data-step="euros"][data-wl-wait] .wl-source { opacity: 0; transform: scale(1.35) rotate(-4deg); transition-delay: 0ms; }
.wl-st[data-step="law"][data-wl-wait] .wl-st-iflaw { grid-template-rows: 0fr; opacity: 0; }
.wl-st[data-step="law"][data-wl-wait] .wl-st-iflaw .wl-st-tax { padding-block: 0; }
.wl-st[data-step="law"][data-wl-wait] .wl-hold-fill { transform: scaleX(0); transition: transform 200ms ease; }

@media (prefers-reduced-motion: reduce) {
  .wl-fold, .wl-st[data-live] *, .wl-st[data-wl-anim] *, .wl-stage[data-wl-live] .wl-stop-say { transition: none !important; }
}