@font-face { font-family: "Bricolage"; src: url("/static/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Instrument"; src: url("/static/fonts/instrument.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --pine: #0b5f52;
  --pine-deep: #083f37;
  --pine-ink: #052e28;
  --mint: #6fd3bf;
  --sage: #d7e3dd;
  --mist: #eef3f0;
  --paper: #fbfcf8;
  --ink: #15302a;
  --quiet: #4d6359;
  --gold: #f2c14e;
  --display: "Bricolage", "Iowan Old Style", Georgia, serif;
  --body: "Instrument", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--body); }
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sprite { position: absolute; width: 0; height: 0; }
.icon { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.logo { display: inline-flex; align-items: center; gap: 10px; font: 600 22px/1 var(--display); letter-spacing: -.01em; text-decoration: none; }
.logo-mark { width: 30px; height: 30px; }
.lm-path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.lm-a { fill: var(--gold); }
.lm-b { fill: var(--mint); }
.site-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px var(--gutter); position: relative; z-index: 2; }
.site-nav nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); font-size: 15px; }
.site-nav nav a { text-decoration: none; }
.site-nav nav a:not(.nav-cta) { background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat; transition: background-size .25s ease; padding-bottom: 2px; }
.site-nav nav a:not(.nav-cta):hover { background-size: 100% 1.5px; }
.nav-cta { padding: 8px 14px; border: 1.5px solid currentColor; border-radius: 999px; font-weight: 600; transition: background-color .2s ease, color .2s ease; }
.hero .nav-cta:hover { background: var(--paper); color: var(--pine-deep); border-color: var(--paper); }

/* Hero */
.hero { background: var(--pine) url("/static/contours.svg") center / cover no-repeat; color: var(--paper); overflow: hidden; }
.hero-copy { padding: clamp(24px, 5vw, 64px) var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
h1 { font: 650 clamp(44px, 7.3vw, 112px)/.96 var(--display); letter-spacing: -.035em; }
.h-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.h-line > span { display: block; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--sage); max-width: 30em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.btn { display: inline-block; padding: 14px 24px; border-radius: 999px; font-weight: 600; text-decoration: none; transition: translate .18s ease, box-shadow .18s ease; }
.btn-light { background: var(--gold); color: var(--pine-ink); }
.btn-light:hover { translate: 0 -2px; box-shadow: 0 8px 22px rgba(5, 46, 40, .35); }
.btn-text { font-weight: 600; text-underline-offset: 4px; }
.hero-fig { padding: clamp(20px, 3vw, 44px) var(--gutter) clamp(24px, 3vw, 44px); }
.route { display: block; width: 100%; height: auto; font-family: var(--body); }
.route-t { display: none; max-width: 420px; margin: 0 auto; }

.line-base { fill: none; stroke: var(--paper); stroke-opacity: .22; stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.line-fill { fill: none; stroke: var(--mint); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tile { fill: var(--pine-deep); stroke: var(--paper); stroke-opacity: .28; }
.tile-on { fill: var(--mint); }
.coin { opacity: 0; offset-rotate: 0deg; filter: drop-shadow(0 0 7px rgba(242, 193, 78, .75)); }
.coin-disc { fill: var(--gold); }
.coin-ring { fill: none; stroke: var(--pine-ink); stroke-opacity: .3; }
.coin-glyph { fill: none; stroke: var(--pine-ink); stroke-width: 2.4; stroke-linecap: round; }
.device { fill: var(--pine-ink); }
.screen { fill: var(--paper); }
.notch { fill: var(--pine-ink); }
.ph-amount { font: 700 19px var(--display); text-anchor: middle; fill: var(--ink); }
.ph-unit { font-size: 10px; text-anchor: middle; fill: var(--quiet); }
.qr-plate { fill: #fff; stroke: var(--sage); }
.qr-dots { fill: var(--ink); }
.ph-line { fill: var(--sage); }
.chip-wait { fill: var(--sage); }
.chip-seen { fill: #fbe9c8; }
.chip-done { fill: var(--pine); }
.chip-t { font-size: 9.5px; font-weight: 600; text-anchor: middle; fill: var(--ink); }
.chip-t-d { fill: var(--paper); }
.ph-wait, .ph-seen { opacity: 0; }
.shop-wall { fill: var(--pine-deep); stroke: var(--paper); stroke-width: 2.5; stroke-linejoin: round; }
.shop-awn { fill: var(--paper); stroke: var(--paper); stroke-width: 2.5; stroke-linejoin: round; }
.shop-door { fill: var(--mint); }
.shop-win { fill: var(--sage); }
.badge-disc { fill: var(--gold); stroke: var(--pine); stroke-width: 3; }
.badge-check { fill: none; stroke: var(--pine-ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.pulse { fill: none; stroke: var(--mint); stroke-width: 2; opacity: 0; }
.fig-l { font-size: 14px; font-weight: 500; text-anchor: middle; fill: var(--sage); }
.route-t .fig-l { font-size: 15px; }
.fig-l-end { text-anchor: end; }

/* Steps */
main section { padding: clamp(56px, 8vw, 112px) var(--gutter); }
h2 { font: 620 clamp(32px, 4.4vw, 60px)/1.04 var(--display); letter-spacing: -.025em; max-width: 17em; }
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.how h2 { position: sticky; top: 40px; }
.steps { position: relative; display: grid; gap: clamp(40px, 6vw, 72px); view-timeline-name: --steps; }
.steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; position: relative; }
.step-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--pine); color: var(--pine); position: relative; z-index: 1; }
.steps h3 { font: 600 clamp(21px, 2vw, 26px)/1.2 var(--display); letter-spacing: -.01em; margin: 6px 0 6px; }
.steps p { color: var(--quiet); max-width: 34em; }
.rail { position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: var(--sage); }
.rail-fill { display: block; height: 100%; background: var(--pine); transform-origin: top; }

/* Orders */
.orders { background: var(--mist); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.orders-copy p { margin-top: 18px; color: var(--quiet); max-width: 32em; font-size: 18px; }
.collect { display: block; width: 100%; height: auto; font-family: var(--body); }
.c-line { fill: none; stroke: var(--pine); stroke-opacity: .35; stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.c-pill { fill: var(--paper); stroke: var(--sage); }
.c-order { font-size: 15px; font-weight: 600; fill: var(--ink); }
.c-addr { font: 13px ui-monospace, "SF Mono", Menlo, Consolas, monospace; fill: var(--quiet); }
.c-hub { fill: var(--pine); }
.c-ping { fill: none; stroke: var(--pine); stroke-width: 2; opacity: 0; }
.c-wallet { fill: none; stroke: var(--paper); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.c-hub-l { font: 600 16px var(--body); text-anchor: middle; fill: var(--ink); }
.c-coin { fill: var(--gold); stroke: var(--pine-ink); stroke-opacity: .35; opacity: 0; offset-rotate: 0deg; }

/* Code */
.code { background: var(--pine-deep); color: var(--paper); }
.code-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.code-head p { color: var(--sage); max-width: 32em; }
.code-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pane { min-width: 0; background: var(--pine-ink); border-radius: 12px; overflow: hidden; }
.pane-t { display: flex; align-items: center; gap: 10px; padding: 14px 20px; font-weight: 600; color: var(--sage); border-bottom: 1px solid rgba(215, 227, 221, .14); }
.pane-t .icon { width: 22px; height: 22px; color: var(--mint); }
.pane pre { margin: 0; padding: 20px; overflow-x: auto; }
.pane code { font: 14.5px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.k { color: var(--gold); font-weight: 600; }
.p { color: var(--mint); }
.s { color: #f6efd9; }

/* Features */
.feats h2 { margin-bottom: clamp(32px, 5vw, 64px); max-width: 14em; }
.feat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(32px, 6vw, 96px); }
.feat-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 18px; padding-top: 22px; border-top: 2px solid var(--sage); }
.feat-list .icon { color: var(--pine); }
.feat-list h3 { font: 600 21px/1.25 var(--display); letter-spacing: -.01em; margin-bottom: 6px; }
.feat-list p { color: var(--quiet); }

/* End */
.end { background: var(--pine) url("/static/contours.svg") center / cover no-repeat; color: var(--paper); padding: clamp(64px, 9vw, 128px) var(--gutter); }
.end h2 { font-size: clamp(38px, 6vw, 84px); }
.end p { margin: 18px 0 28px; color: var(--sage); max-width: 34em; font-size: 18px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 28px var(--gutter); background: var(--pine-ink); color: var(--sage); }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 15px; }

@media (max-width: 900px) {
  .hero-copy, .how, .orders, .code-head, .code-grid { grid-template-columns: minmax(0, 1fr); }
  .how h2 { position: static; }
}
@media (max-width: 760px) {
  .route-w { display: none; }
  .route-t { display: block; }
  .site-nav nav a:not(.nav-cta):not(.nav-login) { display: none; }
  .feat-list { grid-template-columns: minmax(0, 1fr); }
}

/* Motion is added only for people who haven't asked for less. Without it, the figures rest on their finished state. */
@media (prefers-reduced-motion: no-preference) {
  .h-line > span { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
  .h-line:nth-child(2) > span { animation-delay: .12s; }
  .hero-side { animation: fade-in .8s .35s ease both; }
  @keyframes rise { from { translate: 0 105%; } to { translate: 0 0; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

  .ph-wait { animation: st-wait 13s linear infinite; }
  .ph-seen { animation: st-seen 13s linear infinite; }
  .ph-done { animation: st-done 13s linear infinite; }
  @keyframes st-wait { 0%, 22% { opacity: 1; } 23%, 96% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes st-seen { 0%, 22% { opacity: 0; } 23%, 80% { opacity: 1; } 81%, 100% { opacity: 0; } }
  @keyframes st-done { 0%, 80% { opacity: 0; } 81%, 96% { opacity: 1; } 100% { opacity: 0; } }
  .badge-in { animation: pop 13s linear infinite; }
  @keyframes pop { 0%, 80% { scale: 0; } 82% { scale: 1.25; } 83%, 96% { scale: 1; } 100% { scale: 0; } }
  .pulse { animation: pulse 13s linear infinite; }
  @keyframes pulse { 0%, 80% { opacity: 0; scale: .7; } 81% { opacity: .9; scale: .7; } 89%, 100% { opacity: 0; scale: 1.25; } }
  .shop-door { animation: door 13s linear infinite; }
  @keyframes door { 0%, 80% { fill: var(--sage); } 82%, 96% { fill: var(--mint); } 100% { fill: var(--sage); } }

  @keyframes c-travel { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 30% { offset-distance: 100%; opacity: 1; } 34%, 100% { offset-distance: 100%; opacity: 0; } }
  .c-ping { animation: c-ping 2s infinite; animation-delay: 1.75s; }
  @keyframes c-ping { 0% { opacity: .8; scale: 1; } 45%, 100% { opacity: 0; scale: 1.5; } }

  .btn-light:active { translate: 0 0; }

  @keyframes t-w-0 { 0%, 21.6% { opacity: 0; scale: .6; } 22.8% { opacity: 1; scale: 1.14; } 24.6%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-0 { animation: t-w-0 13s linear infinite; }
  @keyframes t-w-1 { 0%, 25.2% { opacity: 0; scale: .6; } 26.4% { opacity: 1; scale: 1.14; } 28.2%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-1 { animation: t-w-1 13s linear infinite; }
  @keyframes t-w-2 { 0%, 28.3% { opacity: 0; scale: .6; } 29.5% { opacity: 1; scale: 1.14; } 31.3%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-2 { animation: t-w-2 13s linear infinite; }
  @keyframes t-w-3 { 0%, 31.4% { opacity: 0; scale: .6; } 32.6% { opacity: 1; scale: 1.14; } 34.4%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-3 { animation: t-w-3 13s linear infinite; }
  @keyframes t-w-4 { 0%, 35.0% { opacity: 0; scale: .6; } 36.2% { opacity: 1; scale: 1.14; } 38.0%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-4 { animation: t-w-4 13s linear infinite; }
  @keyframes t-w-5 { 0%, 38.4% { opacity: 0; scale: .6; } 39.6% { opacity: 1; scale: 1.14; } 41.4%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-5 { animation: t-w-5 13s linear infinite; }
  @keyframes t-w-6 { 0%, 41.4% { opacity: 0; scale: .6; } 42.6% { opacity: 1; scale: 1.14; } 44.4%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-6 { animation: t-w-6 13s linear infinite; }
  @keyframes t-w-7 { 0%, 44.6% { opacity: 0; scale: .6; } 45.8% { opacity: 1; scale: 1.14; } 47.6%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-7 { animation: t-w-7 13s linear infinite; }
  @keyframes t-w-8 { 0%, 48.1% { opacity: 0; scale: .6; } 49.3% { opacity: 1; scale: 1.14; } 51.1%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-8 { animation: t-w-8 13s linear infinite; }
  @keyframes t-w-9 { 0%, 51.5% { opacity: 0; scale: .6; } 52.7% { opacity: 1; scale: 1.14; } 54.5%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-9 { animation: t-w-9 13s linear infinite; }
  @keyframes t-w-10 { 0%, 54.5% { opacity: 0; scale: .6; } 55.7% { opacity: 1; scale: 1.14; } 57.5%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-10 { animation: t-w-10 13s linear infinite; }
  @keyframes t-w-11 { 0%, 57.8% { opacity: 0; scale: .6; } 59.0% { opacity: 1; scale: 1.14; } 60.8%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-11 { animation: t-w-11 13s linear infinite; }
  @keyframes t-w-12 { 0%, 61.3% { opacity: 0; scale: .6; } 62.5% { opacity: 1; scale: 1.14; } 64.3%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-12 { animation: t-w-12 13s linear infinite; }
  @keyframes t-w-13 { 0%, 64.6% { opacity: 0; scale: .6; } 65.8% { opacity: 1; scale: 1.14; } 67.6%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-13 { animation: t-w-13 13s linear infinite; }
  @keyframes t-w-14 { 0%, 67.6% { opacity: 0; scale: .6; } 68.8% { opacity: 1; scale: 1.14; } 70.6%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-w-14 { animation: t-w-14 13s linear infinite; }
  .coin-w { offset-path: path('M150.0 158.0 C178.7 158.0 287.1 154.3 322.0 158.0 C356.9 161.7 347.0 174.9 359.5 179.9 C372.0 184.9 384.5 188.4 397.0 187.9 C409.5 187.4 422.0 182.6 434.5 176.9 C447.0 171.2 459.5 161.1 472.0 153.9 C484.5 146.6 497.0 137.7 509.5 133.5 C522.0 129.2 534.5 127.1 547.0 128.6 C559.5 130.2 572.0 136.2 584.5 142.5 C597.0 148.8 609.5 159.2 622.0 166.2 C634.5 173.2 647.0 181.4 659.5 184.7 C672.0 188.0 684.5 188.7 697.0 186.2 C709.5 183.7 722.0 176.5 734.5 169.8 C747.0 163.1 759.5 152.6 772.0 145.9 C784.5 139.2 797.0 132.1 809.5 129.7 C822.0 127.3 822.2 126.7 847.0 131.5 C871.8 136.2 939.5 153.6 958.0 158.0'); }
  @keyframes coin-w { 0%, 8% { offset-distance: 0%; opacity: 0; } 9% { opacity: 1; } 22% { offset-distance: 19.92%; } 68% { offset-distance: 86.78%; } 80% { offset-distance: 100%; opacity: 1; } 82%, 100% { offset-distance: 100%; opacity: 0; } }
  .coin-w { animation: coin-w 13s linear infinite; }
  @keyframes fill-w { 0%, 8% { stroke-dashoffset: 1; opacity: 1; } 22% { stroke-dashoffset: 0.8008; } 68% { stroke-dashoffset: 0.1322; } 80%, 95% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  .fill-w { animation: fill-w 13s linear infinite; }
  @keyframes t-t-0 { 0%, 21.6% { opacity: 0; scale: .6; } 22.8% { opacity: 1; scale: 1.14; } 24.6%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-0 { animation: t-t-0 13s linear infinite; }
  @keyframes t-t-1 { 0%, 24.9% { opacity: 0; scale: .6; } 26.1% { opacity: 1; scale: 1.14; } 27.9%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-1 { animation: t-t-1 13s linear infinite; }
  @keyframes t-t-2 { 0%, 28.2% { opacity: 0; scale: .6; } 29.4% { opacity: 1; scale: 1.14; } 31.2%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-2 { animation: t-t-2 13s linear infinite; }
  @keyframes t-t-3 { 0%, 31.4% { opacity: 0; scale: .6; } 32.6% { opacity: 1; scale: 1.14; } 34.4%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-3 { animation: t-t-3 13s linear infinite; }
  @keyframes t-t-4 { 0%, 34.8% { opacity: 0; scale: .6; } 36.0% { opacity: 1; scale: 1.14; } 37.8%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-4 { animation: t-t-4 13s linear infinite; }
  @keyframes t-t-5 { 0%, 38.0% { opacity: 0; scale: .6; } 39.2% { opacity: 1; scale: 1.14; } 41.0%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-5 { animation: t-t-5 13s linear infinite; }
  @keyframes t-t-6 { 0%, 41.3% { opacity: 0; scale: .6; } 42.5% { opacity: 1; scale: 1.14; } 44.3%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-6 { animation: t-t-6 13s linear infinite; }
  @keyframes t-t-7 { 0%, 44.6% { opacity: 0; scale: .6; } 45.8% { opacity: 1; scale: 1.14; } 47.6%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-7 { animation: t-t-7 13s linear infinite; }
  @keyframes t-t-8 { 0%, 47.9% { opacity: 0; scale: .6; } 49.1% { opacity: 1; scale: 1.14; } 50.9%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-8 { animation: t-t-8 13s linear infinite; }
  @keyframes t-t-9 { 0%, 51.2% { opacity: 0; scale: .6; } 52.4% { opacity: 1; scale: 1.14; } 54.2%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-9 { animation: t-t-9 13s linear infinite; }
  @keyframes t-t-10 { 0%, 54.4% { opacity: 0; scale: .6; } 55.6% { opacity: 1; scale: 1.14; } 57.4%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-10 { animation: t-t-10 13s linear infinite; }
  @keyframes t-t-11 { 0%, 57.7% { opacity: 0; scale: .6; } 58.9% { opacity: 1; scale: 1.14; } 60.7%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-11 { animation: t-t-11 13s linear infinite; }
  @keyframes t-t-12 { 0%, 61.0% { opacity: 0; scale: .6; } 62.2% { opacity: 1; scale: 1.14; } 64.0%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-12 { animation: t-t-12 13s linear infinite; }
  @keyframes t-t-13 { 0%, 64.3% { opacity: 0; scale: .6; } 65.5% { opacity: 1; scale: 1.14; } 67.3%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-13 { animation: t-t-13 13s linear infinite; }
  @keyframes t-t-14 { 0%, 67.6% { opacity: 0; scale: .6; } 68.8% { opacity: 1; scale: 1.14; } 70.6%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
  .t-t-14 { animation: t-t-14 13s linear infinite; }
  .coin-t { offset-path: path('M180.0 196.0 C168.3 197.3 129.3 198.0 110.0 204.0 C90.7 210.0 62.0 227.3 64.0 232.0 C66.0 236.7 102.7 232.0 122.0 232.0 C141.3 232.0 160.7 232.0 180.0 232.0 C199.3 232.0 218.7 232.0 238.0 232.0 C257.3 232.0 286.3 223.0 296.0 232.0 C305.7 241.0 305.7 277.0 296.0 286.0 C286.3 295.0 257.3 286.0 238.0 286.0 C218.7 286.0 199.3 286.0 180.0 286.0 C160.7 286.0 141.3 286.0 122.0 286.0 C102.7 286.0 73.7 277.0 64.0 286.0 C54.3 295.0 54.3 331.0 64.0 340.0 C73.7 349.0 102.7 340.0 122.0 340.0 C141.3 340.0 160.7 340.0 180.0 340.0 C199.3 340.0 218.7 340.0 238.0 340.0 C257.3 340.0 292.0 332.3 296.0 340.0 C300.0 347.7 281.3 374.7 262.0 386.0 C242.7 397.3 193.7 404.3 180.0 408.0'); }
  @keyframes coin-t { 0%, 8% { offset-distance: 0%; opacity: 0; } 9% { opacity: 1; } 22% { offset-distance: 11.57%; } 68% { offset-distance: 86.68%; } 80% { offset-distance: 100%; opacity: 1; } 82%, 100% { offset-distance: 100%; opacity: 0; } }
  .coin-t { animation: coin-t 13s linear infinite; }
  @keyframes fill-t { 0%, 8% { stroke-dashoffset: 1; opacity: 1; } 22% { stroke-dashoffset: 0.8843; } 68% { stroke-dashoffset: 0.1332; } 80%, 95% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
  .fill-t { animation: fill-t 13s linear infinite; }
  .c-coin-0 { offset-path: path('M214 52 C330 52 350 170 476 170'); animation: c-travel 6s 0s ease-in-out infinite; }
  .c-coin-1 { offset-path: path('M214 170 C330 170 350 170 476 170'); animation: c-travel 6s 2s ease-in-out infinite; }
  .c-coin-2 { offset-path: path('M214 288 C330 288 350 170 476 170'); animation: c-travel 6s 4s ease-in-out infinite; }

  @supports (animation-timeline: view()) {
    .rail-fill { animation: rail-grow linear both; animation-timeline: --steps; animation-range: entry 40% cover 75%; }
    @keyframes rail-grow { from { scale: 1 0; } to { scale: 1 1; } }
  }
}

/* Integration guide */
.on-light { border-bottom: 1px solid var(--sage); }
.on-light .logo { color: var(--pine); }
.on-light .nav-cta { color: var(--pine); }
.on-light .nav-cta:hover { background: var(--pine); border-color: var(--pine); color: var(--paper); }
.guide { max-width: 780px; margin: 0 auto; padding: 44px 16px 80px; }
.guide h1 { font-size: clamp(36px, 6vw, 56px); line-height: 1.04; color: var(--ink); margin-bottom: 16px; }
.guide h2 { font-size: clamp(25px, 3.4vw, 32px); margin: 52px 0 12px; }
.guide h3 { font: 600 18px/1.3 var(--display); margin: 24px 0 8px; }
.guide p, .guide li { color: #33473f; }
.guide p { margin: 0 0 12px; }
.guide ul, .guide ol { padding-left: 1.4em; margin: 0 0 12px; }
.guide ul { list-style: disc; }
.guide ol { list-style: decimal; }
.guide li { margin-bottom: 6px; }
.guide a { color: var(--pine); }
.guide pre { background: var(--pine-ink); color: #eaf2ee; margin: 8px 0 16px; padding: 16px 18px; overflow-x: auto; border-radius: 10px; }
.guide code { font: 14px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.guide :not(pre) > code { background: var(--sage); padding: 1px 5px; border-radius: 3px; overflow-wrap: anywhere; }
.guide td code { white-space: nowrap; overflow-wrap: normal; }
.guide .warn { padding: 12px 16px; background: #fbe9c8; color: #6b3f00; border-radius: 8px; }
.table-wrap { overflow-x: auto; margin: 8px 0 16px; }
.guide table { width: 100%; border-collapse: collapse; font-size: 15px; }
.guide th, .guide td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #c5d2cb; vertical-align: top; }
.guide th { color: var(--quiet); font-weight: 500; }