:root {
  color-scheme: light;
  --ink: #18191f;
  --muted: #606673;
  --paper: #fffaf0;
  --panel: #ffffff;
  --line: rgba(24, 25, 31, 0.14);
  --shadow: 0 20px 55px rgba(35, 42, 57, 0.16);
  --sticky: #ffe36e;
  --sky: #9bd9f3;
  --coral: #ff7d6e;
  --green: #64bd8a;
  --violet: #7462d8;
  --cream: #fff3cf;
  --mint-paper: #e8f6df;
  --blue-paper: #e6f7ff;
  --peach-paper: #ffe4d7;
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(24, 25, 31, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 25, 31, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 12% 18%, rgba(255, 125, 110, 0.22), transparent 25rem),
    radial-gradient(circle at 86% 8%, rgba(100, 189, 138, 0.24), transparent 24rem),
    radial-gradient(circle at 68% 72%, rgba(155, 217, 243, 0.28), transparent 28rem),
    linear-gradient(135deg, #fff0c6 0%, #e8f7ff 42%, #ffe9df 100%);
  background-size:
    34px 34px,
    34px 34px,
    auto,
    auto,
    auto,
    auto;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

button,
select,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.page-shell {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px;
}

.page-shell,
.workspace,
.intro-copy,
.controls > *,
.rate-strip > *,
.content-grid,
.notes-section,
.banknote-card,
.side-panel {
  min-width: 0;
}

.workspace,
.ad-slot-wide,
.notes-section,
.side-panel > section {
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.92), rgba(236, 248, 243, 0.86)),
    rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.workspace {
  position: relative;
  z-index: 10;
  display: grid;
  gap: 20px;
  min-height: 42vh;
  padding: clamp(18px, 4vw, 42px);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 8% 11%, rgba(255, 227, 110, 0.3), transparent 12rem),
    radial-gradient(circle at 92% 18%, rgba(38, 199, 211, 0.19), transparent 15rem),
    linear-gradient(135deg, rgba(255, 252, 241, 0.93), rgba(238, 250, 246, 0.9));
}

.intro {
  display: grid;
  grid-template-columns: minmax(350px, 0.86fr) minmax(280px, 1.35fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
}

.brand-line {
  position: relative;
  display: block;
  width: min(100%, 480px);
  min-height: 316px;
  overflow: visible;
}

.brand-logo-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.brand-svg-sticker {
  fill: #f33c31;
  filter: drop-shadow(11px 13px 0 #05060a);
}

.brand-svg-bill-shadow,
.brand-svg-domain-shadow {
  fill: #05060a;
}

.brand-svg-bill {
  stroke: #05060a;
  stroke-width: 8;
}

.brand-svg-bill-green {
  fill: #d8efb6;
}

.brand-svg-bill-blue {
  fill: #78d8e6;
}

.brand-svg-bill-gold {
  fill: #ffe7a6;
}

.brand-svg-bill-frame {
  fill: none;
  stroke: rgba(24, 25, 31, 0.5);
  stroke-width: 7;
}

.brand-svg-bill-seal {
  fill: rgba(24, 25, 31, 0.36);
}

.brand-svg-word,
.brand-svg-domain-text {
  font-family:
    "Arial Black", "Segoe UI Black", "Trebuchet MS", Verdana, system-ui,
    sans-serif;
  font-weight: 900;
  letter-spacing: 0;
}

.brand-svg-word {
  stroke: #05060a;
  stroke-linejoin: round;
  stroke-width: 18px;
  paint-order: stroke fill;
}

.brand-svg-word-shadow {
  fill: #05060a;
  stroke: #05060a;
  transform: translate(14px, 17px);
}

.brand-svg-word-shadow .brand-svg-word {
  fill: #05060a;
  stroke: #05060a;
}

.brand-svg-cash {
  fill: #ffffff;
  font-size: 150px;
}

.brand-svg-gold,
.brand-svg-country {
  fill: #ffd12e;
}

.brand-svg-by {
  fill: #26c7d3;
  font-size: 116px;
}

.brand-svg-country {
  font-size: 126px;
}

.brand-svg-domain {
  transform: rotate(-2deg);
  transform-origin: 370px 420px;
}

.brand-svg-domain-badge {
  fill: #05060a;
}

.brand-svg-domain-text {
  fill: #ffffff;
  font-size: 46px;
}

.intro-copy h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.35rem, 6vw, 5.9rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.intro-copy p {
  max-width: 700px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.55;
}

.controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.control {
  display: grid;
  gap: 8px;
}

.control > span,
.rate-label,
.eyebrow {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

select,
.swap-button,
.refresh-button,
.quick-pairs button {
  min-height: 48px;
  border: 1px solid rgba(24, 25, 31, 0.18);
  border-radius: 8px;
  background: #fffdf7;
  color: var(--ink);
}

select {
  width: 100%;
  min-width: 0;
  padding: 0 42px 0 14px;
}

.native-select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.currency-picker {
  position: relative;
  min-width: 0;
}

.currency-picker.is-open {
  z-index: 80;
}

.currency-trigger,
.currency-option {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(24, 25, 31, 0.18);
  background: #fffdf7;
  color: var(--ink);
  text-align: left;
}

.currency-trigger {
  min-height: 56px;
  padding: 8px 42px 8px 12px;
  border-radius: 8px;
  position: relative;
}

.currency-trigger:hover,
.currency-picker.is-open .currency-trigger {
  border-color: rgba(24, 25, 31, 0.38);
}

.dropdown-caret {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-65%) rotate(45deg);
}

.currency-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 90;
  display: none;
  max-height: 372px;
  overflow: hidden;
  padding: 6px;
  border: 1px solid rgba(24, 25, 31, 0.18);
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: 0 18px 38px rgba(35, 42, 57, 0.2);
}

.currency-picker.is-open .currency-menu {
  display: grid;
  gap: 4px;
}

.currency-search {
  display: grid;
  gap: 5px;
  padding: 6px;
  border-bottom: 1px solid rgba(24, 25, 31, 0.1);
}

.currency-search span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.currency-search-input {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(24, 25, 31, 0.18);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
}

.currency-search-input:focus {
  outline: 0;
  border-color: rgba(24, 25, 31, 0.42);
  box-shadow: 0 0 0 3px rgba(255, 227, 110, 0.32);
}

.currency-options-list {
  display: grid;
  gap: 4px;
  max-height: 268px;
  overflow: auto;
  padding-top: 2px;
}

.currency-empty {
  padding: 12px 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.currency-option {
  min-height: 54px;
  padding: 8px;
  border-color: transparent;
  border-radius: 7px;
}

.currency-option:hover,
.currency-option[aria-selected="true"] {
  background: #fff2bf;
  border-color: rgba(24, 25, 31, 0.12);
}

.currency-option-text {
  display: grid;
  min-width: 0;
  gap: 1px;
  line-height: 1.15;
}

.currency-option-text strong,
.currency-option-text span,
.currency-option-text small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.currency-option-text strong {
  font-size: 0.94rem;
}

.currency-option-text span {
  color: var(--ink);
  font-size: 0.85rem;
}

.currency-option-text small {
  color: var(--muted);
  font-size: 0.74rem;
}

.flag-icon {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 26px;
  flex: 0 0 38px;
  overflow: hidden;
  border: 1px solid rgba(24, 25, 31, 0.32);
  border-radius: 5px;
  background: #dfe8f2;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 1px 0 rgba(24, 25, 31, 0.08);
}

.flag-icon::before,
.flag-icon::after {
  position: absolute;
  content: "";
}

.flag-usd {
  background: repeating-linear-gradient(to bottom, #b22234 0 7.69%, #fff 7.69% 15.38%);
}

.flag-usd::before {
  left: 0;
  top: 0;
  width: 48%;
  height: 54%;
  background:
    radial-gradient(circle, #fff 0 0.55px, transparent 0.9px) 1.4px 1.5px / 3.4px 3px,
    radial-gradient(circle, #fff 0 0.55px, transparent 0.9px) 3.1px 3px / 3.4px 3px,
    #3c3b6e;
}

.flag-eur {
  background: #003399;
}

.flag-eur::before {
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffcc00;
  box-shadow:
    0 -8px 0 #ffcc00,
    4px -7px 0 #ffcc00,
    7px -4px 0 #ffcc00,
    8px 0 0 #ffcc00,
    7px 4px 0 #ffcc00,
    4px 7px 0 #ffcc00,
    0 8px 0 #ffcc00,
    -4px 7px 0 #ffcc00,
    -7px 4px 0 #ffcc00,
    -8px 0 0 #ffcc00,
    -7px -4px 0 #ffcc00,
    -4px -7px 0 #ffcc00;
  transform: translate(-50%, -50%);
}

.flag-jpy {
  background: radial-gradient(circle at center, #bc002d 0 30%, transparent 31%), #fff;
}

.flag-gbp {
  background:
    linear-gradient(90deg, transparent 45%, #c8102e 45% 55%, transparent 55%),
    linear-gradient(0deg, transparent 42%, #c8102e 42% 58%, transparent 58%),
    linear-gradient(90deg, transparent 39%, #fff 39% 61%, transparent 61%),
    linear-gradient(0deg, transparent 34%, #fff 34% 66%, transparent 66%),
    linear-gradient(28deg, transparent 39%, #fff 39% 45%, #c8102e 45% 51%, #fff 51% 57%, transparent 57%),
    linear-gradient(152deg, transparent 39%, #fff 39% 45%, #c8102e 45% 51%, #fff 51% 57%, transparent 57%),
    #012169;
}

.flag-cny {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2038%2026%22%3E%3Crect%20width%3D%2238%22%20height%3D%2226%22%20fill%3D%22%23de2910%22%2F%3E%3Cdefs%3E%3Cpath%20id%3D%22s%22%20d%3D%22M0-1%200.294-.405.951-.309.476.155.588.809%200%20.5-.588.809-.476.155-.951-.309-.294-.405Z%22%20fill%3D%22%23ffde00%22%2F%3E%3C%2Fdefs%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22translate(8%207)%20scale(4.3)%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22translate(17%204.4)%20rotate(22)%20scale(1.45)%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22translate(20.7%207.4)%20rotate(45)%20scale(1.45)%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22translate(20.8%2011.5)%20rotate(70)%20scale(1.45)%22%2F%3E%3Cuse%20href%3D%22%23s%22%20transform%3D%22translate(17%2014.8)%20rotate(92)%20scale(1.45)%22%2F%3E%3C%2Fsvg%3E") center / cover no-repeat,
    #de2910;
}

.flag-aud {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2038%2026'%3E%3Crect%20width%3D'38'%20height%3D'26'%20fill%3D'%23012169'%2F%3E%3Cg%3E%3Crect%20width%3D'19'%20height%3D'14'%20fill%3D'%23012169'%2F%3E%3Cpath%20d%3D'M0%200l19%2014M19%200%200%2014'%20stroke%3D'%23fff'%20stroke-width%3D'3.2'%2F%3E%3Cpath%20d%3D'M0%200l19%2014M19%200%200%2014'%20stroke%3D'%23c8102e'%20stroke-width%3D'1.4'%2F%3E%3Cpath%20d%3D'M9.5%200v14M0%207h19'%20stroke%3D'%23fff'%20stroke-width%3D'4.2'%2F%3E%3Cpath%20d%3D'M9.5%200v14M0%207h19'%20stroke%3D'%23c8102e'%20stroke-width%3D'2.2'%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cpath%20id%3D's'%20d%3D'M0-1%20.294-.405%20.951-.309%20.476.155%20.588.809%200%20.5-.588.809-.476.155-.951-.309-.294-.405Z'%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D'%23fff'%3E%3Cuse%20href%3D'%23s'%20transform%3D'translate(9.5%2019.2)%20scale(2.45)'%2F%3E%3Cuse%20href%3D'%23s'%20transform%3D'translate(27.8%206.3)%20scale(1.45)'%2F%3E%3Cuse%20href%3D'%23s'%20transform%3D'translate(31.7%2012.8)%20scale(1.2)'%2F%3E%3Cuse%20href%3D'%23s'%20transform%3D'translate(26.4%2017.5)%20scale(1.35)'%2F%3E%3Cuse%20href%3D'%23s'%20transform%3D'translate(33.6%2020)%20scale(1.05)'%2F%3E%3Cuse%20href%3D'%23s'%20transform%3D'translate(23.7%2012.9)%20scale(.9)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat,
    #012169;
}

.flag-nzd {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2038%2026'%3E%3Crect%20width%3D'38'%20height%3D'26'%20fill%3D'%23012169'%2F%3E%3Cg%3E%3Crect%20width%3D'19'%20height%3D'14'%20fill%3D'%23012169'%2F%3E%3Cpath%20d%3D'M0%200l19%2014M19%200%200%2014'%20stroke%3D'%23fff'%20stroke-width%3D'3.2'%2F%3E%3Cpath%20d%3D'M0%200l19%2014M19%200%200%2014'%20stroke%3D'%23c8102e'%20stroke-width%3D'1.4'%2F%3E%3Cpath%20d%3D'M9.5%200v14M0%207h19'%20stroke%3D'%23fff'%20stroke-width%3D'4.2'%2F%3E%3Cpath%20d%3D'M9.5%200v14M0%207h19'%20stroke%3D'%23c8102e'%20stroke-width%3D'2.2'%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cpath%20id%3D's'%20d%3D'M0-1%20.294-.405%20.951-.309%20.476.155%20.588.809%200%20.5-.588.809-.476.155-.951-.309-.294-.405Z'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20href%3D'%23s'%20fill%3D'%23fff'%20transform%3D'translate(27.2%206.4)%20scale(1.7)'%2F%3E%3Cuse%20href%3D'%23s'%20fill%3D'%23c8102e'%20transform%3D'translate(27.2%206.4)%20scale(1.15)'%2F%3E%3Cuse%20href%3D'%23s'%20fill%3D'%23fff'%20transform%3D'translate(32%2013.7)%20scale(1.7)'%2F%3E%3Cuse%20href%3D'%23s'%20fill%3D'%23c8102e'%20transform%3D'translate(32%2013.7)%20scale(1.15)'%2F%3E%3Cuse%20href%3D'%23s'%20fill%3D'%23fff'%20transform%3D'translate(26.4%2019.2)%20scale(1.45)'%2F%3E%3Cuse%20href%3D'%23s'%20fill%3D'%23c8102e'%20transform%3D'translate(26.4%2019.2)%20scale(.98)'%2F%3E%3Cuse%20href%3D'%23s'%20fill%3D'%23fff'%20transform%3D'translate(34.3%2021.4)%20scale(1.25)'%2F%3E%3Cuse%20href%3D'%23s'%20fill%3D'%23c8102e'%20transform%3D'translate(34.3%2021.4)%20scale(.84)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat,
    #012169;
}

.flag-cad {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2038%2026%22%3E%3Crect%20width%3D%2238%22%20height%3D%2226%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20width%3D%229.5%22%20height%3D%2226%22%20fill%3D%22%23d52b1e%22%2F%3E%3Crect%20x%3D%2228.5%22%20width%3D%229.5%22%20height%3D%2226%22%20fill%3D%22%23d52b1e%22%2F%3E%3Cpath%20fill%3D%22%23d52b1e%22%20d%3D%22M19%203.2l2.1%205.4%203.6-2-1.2%204.5%204.4-.5-3.4%203.1%203.1%202-4.9.6%201.2%203.8-3.6-2.1-.8%204.8h-1l-.8-4.8-3.6%202.1%201.2-3.8-4.9-.6%203.1-2-3.4-3.1%204.4.5-1.2-4.5%203.6%202L19%203.2Z%22%2F%3E%3C%2Fsvg%3E") center / cover no-repeat,
    #fff;
}

.flag-chf {
  background: #d52b1e;
}

.flag-chf::before {
  left: 15.5px;
  top: 5px;
  width: 7px;
  height: 16px;
  background: #fff;
}

.flag-chf::after {
  left: 10.5px;
  top: 9.5px;
  width: 17px;
  height: 7px;
  background: #fff;
}

.flag-hkd {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 26'%3E%3Crect width='38' height='26' fill='%23de2910'/%3E%3Cg transform='translate(19 13)'%3E%3Cg fill='%23fff'%3E%3Cpath d='M0-1.1C1.5-5 4.2-6.8 7.2-6.1 6.8-2.8 4.3-.4.9 1.4Z' transform='rotate(-90)'/%3E%3Cpath d='M0-1.1C1.5-5 4.2-6.8 7.2-6.1 6.8-2.8 4.3-.4.9 1.4Z' transform='rotate(-18)'/%3E%3Cpath d='M0-1.1C1.5-5 4.2-6.8 7.2-6.1 6.8-2.8 4.3-.4.9 1.4Z' transform='rotate(54)'/%3E%3Cpath d='M0-1.1C1.5-5 4.2-6.8 7.2-6.1 6.8-2.8 4.3-.4.9 1.4Z' transform='rotate(126)'/%3E%3Cpath d='M0-1.1C1.5-5 4.2-6.8 7.2-6.1 6.8-2.8 4.3-.4.9 1.4Z' transform='rotate(198)'/%3E%3C/g%3E%3Cg fill='%23de2910'%3E%3Ccircle cx='0' cy='-4.7' r='.55' transform='rotate(-90)'/%3E%3Ccircle cx='0' cy='-4.7' r='.55' transform='rotate(-18)'/%3E%3Ccircle cx='0' cy='-4.7' r='.55' transform='rotate(54)'/%3E%3Ccircle cx='0' cy='-4.7' r='.55' transform='rotate(126)'/%3E%3Ccircle cx='0' cy='-4.7' r='.55' transform='rotate(198)'/%3E%3C/g%3E%3Ccircle r='1.25' fill='%23de2910'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    #de2910;
}

.flag-sgd {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 26'%3E%3Cpath fill='%23ef3340' d='M0 0h38v13H0z'/%3E%3Cpath fill='%23fff' d='M0 13h38v13H0z'/%3E%3Ccircle cx='8.2' cy='6.5' r='4.2' fill='%23fff'/%3E%3Ccircle cx='9.9' cy='6.5' r='3.7' fill='%23ef3340'/%3E%3Cg fill='%23fff'%3E%3Cpath d='M0-1 .294-.405 .951-.309 .476.155 .588.809 0 .5-.588.809-.476.155-.951-.309-.294-.405Z' transform='translate(16 3.1) scale(1.05)'/%3E%3Cpath d='M0-1 .294-.405 .951-.309 .476.155 .588.809 0 .5-.588.809-.476.155-.951-.309-.294-.405Z' transform='translate(18.2 5.3) scale(1.05)'/%3E%3Cpath d='M0-1 .294-.405 .951-.309 .476.155 .588.809 0 .5-.588.809-.476.155-.951-.309-.294-.405Z' transform='translate(17.3 8.3) scale(1.05)'/%3E%3Cpath d='M0-1 .294-.405 .951-.309 .476.155 .588.809 0 .5-.588.809-.476.155-.951-.309-.294-.405Z' transform='translate(14.7 8.3) scale(1.05)'/%3E%3Cpath d='M0-1 .294-.405 .951-.309 .476.155 .588.809 0 .5-.588.809-.476.155-.951-.309-.294-.405Z' transform='translate(13.8 5.3) scale(1.05)'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    linear-gradient(#ef3340 0 50%, #fff 50%);
}

.flag-sek {
  background:
    linear-gradient(90deg, transparent 0 28%, #fecc00 28% 42%, transparent 42%),
    linear-gradient(0deg, transparent 0 38%, #fecc00 38% 58%, transparent 58%),
    #006aa7;
}

.flag-nok {
  background:
    linear-gradient(90deg, transparent 0 35%, #00205b 35% 47%, transparent 47%),
    linear-gradient(0deg, transparent 0 39%, #00205b 39% 58%, transparent 58%),
    linear-gradient(90deg, transparent 0 29%, #fff 29% 53%, transparent 53%),
    linear-gradient(0deg, transparent 0 31%, #fff 31% 66%, transparent 66%),
    #ba0c2f;
}

.flag-mxn {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 26'%3E%3Cpath fill='%23006847' d='M0 0h12.7v26H0z'/%3E%3Cpath fill='%23fff' d='M12.7 0h12.6v26H12.7z'/%3E%3Cpath fill='%23ce1126' d='M25.3 0H38v26H25.3z'/%3E%3Cg transform='translate(19 13)'%3E%3Cpath d='M-6.5 4.1c2.7 2.7 10.3 2.7 13 0' fill='none' stroke='%232f7f45' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M-5.8 3.4c1.5.9 3.5 1.4 5.8 1.4s4.3-.5 5.8-1.4' fill='none' stroke='%23b63a2d' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M-1.8-4.2c2.1-1.8 5-.8 6.2 1.2-2.3-.1-4.1.9-5.1 2.7 1.6.4 3.1 1.4 4.5 2.9-2.7.6-6.7-.1-8.3-2.3-1.1-1.5-.4-3.2 2.7-4.5Z' fill='%2390602f' stroke='%23613b1d' stroke-width='.75' stroke-linejoin='round'/%3E%3Cpath d='M-1.9-3.8c-.9-1.4-2.4-1.7-3.8-.6 1.2 0 2.1.5 2.8 1.3' fill='none' stroke='%23613b1d' stroke-width='.75' stroke-linecap='round'/%3E%3Cpath d='M2.1-4.6 4.8-5.8 3.3-3.4Z' fill='%23613b1d'/%3E%3Ccircle cx='1.4' cy='-3' r='.45' fill='%2318191f'/%3E%3Cpath d='M-4.1.7c-.7 2.3.2 4 2.9 5.1' fill='none' stroke='%231f6f3f' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M4.1.7c.7 2.3-.2 4-2.9 5.1' fill='none' stroke='%231f6f3f' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    linear-gradient(90deg, #006847 0 33%, #fff 33% 66%, #ce1126 66%);
}

.flag-inr {
  background:
    linear-gradient(#ff9933 0 33%, #fff 33% 66%, #138808 66%);
}

.flag-inr::before {
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border: 1px solid #000080;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.flag-inr::after {
  left: 50%;
  top: 50%;
  width: 1px;
  height: 4.5px;
  background: #000080;
  box-shadow:
    0 0 0 #000080,
    -1.8px 1.8px 0 -0.3px #000080,
    1.8px 1.8px 0 -0.3px #000080;
  transform: translate(-50%, -50%) rotate(45deg);
}

.flag-krw {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2038%2026%22%3E%3Crect%20width%3D%2238%22%20height%3D%2226%22%20fill%3D%22white%22%2F%3E%3Cg%20stroke%3D%22%23111%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22square%22%3E%3Cg%20transform%3D%22translate(8.5%206.2)%20rotate(-28)%22%3E%3Cpath%20d%3D%22M-3.8%20-2.4h7.6M-3.8%200h7.6M-3.8%202.4h7.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(29.5%206.2)%20rotate(28)%22%3E%3Cpath%20d%3D%22M-3.8%20-2.4h7.6M-3.8%200h2.3M1.5%200h2.3M-3.8%202.4h7.6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(8.5%2019.8)%20rotate(28)%22%3E%3Cpath%20d%3D%22M-3.8%20-2.4h2.3M1.5%20-2.4h2.3M-3.8%200h7.6M-3.8%202.4h2.3M1.5%202.4h2.3%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(29.5%2019.8)%20rotate(-28)%22%3E%3Cpath%20d%3D%22M-3.8%20-2.4h2.3M1.5%20-2.4h2.3M-3.8%200h2.3M1.5%200h2.3M-3.8%202.4h2.3M1.5%202.4h2.3%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(19%2013)%20rotate(28)%22%3E%3Ccircle%20r%3D%225.4%22%20fill%3D%22%23c60c30%22%2F%3E%3Cpath%20d%3D%22M0-5.4a5.4%205.4%200%200%201%200%2010.8%202.7%202.7%200%200%200%200-5.4%202.7%202.7%200%200%201%200-5.4Z%22%20fill%3D%22%23003478%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / cover no-repeat,
    #fff;
}

.flag-brl {
  background: #009b3a;
}

.flag-brl::before {
  left: 5px;
  top: 4px;
  width: 28px;
  height: 18px;
  background: #ffdf00;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.flag-brl::after {
  left: 14px;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background:
    linear-gradient(12deg, transparent 38%, #fff 38% 47%, transparent 47%),
    #002776;
}

.flag-zar {
  background:
    linear-gradient(145deg, transparent 0 23%, #ffb612 23% 30%, #007a4d 30% 48%, #fff 48% 56%, transparent 56%),
    linear-gradient(35deg, transparent 0 23%, #ffb612 23% 30%, #007a4d 30% 48%, #fff 48% 56%, transparent 56%),
    linear-gradient(#de3831 0 50%, #002395 50%);
}

.flag-zar::before {
  inset: 0 auto 0 0;
  width: 45%;
  background: #000;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.flag-try {
  background:
    radial-gradient(circle at 40% 50%, #e30a17 0 13%, transparent 13.8%),
    radial-gradient(circle at 35% 50%, #fff 0 20%, transparent 20.8%),
    #e30a17;
}

.flag-try::after {
  width: 8px;
  height: 8px;
  right: 8px;
  top: 9px;
  background: #fff;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}

.flag-pln {
  background: linear-gradient(#fff 0 50%, #dc143c 50%);
}

.flag-dkk {
  background:
    linear-gradient(90deg, transparent 0 30%, #fff 30% 42%, transparent 42%),
    linear-gradient(0deg, transparent 0 39%, #fff 39% 57%, transparent 57%),
    #c60c30;
}

.flag-czk {
  background:
    linear-gradient(146deg, #11457e 0 34%, transparent 35%),
    linear-gradient(#fff 0 50%, #d7141a 50%);
}

.flag-huf {
  background: linear-gradient(#ce2939 0 33%, #fff 33% 66%, #477050 66%);
}

.flag-idr {
  background: linear-gradient(#ce1126 0 50%, #fff 50%);
}

.flag-myr {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2038%2026'%3E%3Crect%20width%3D'38'%20height%3D'26'%20fill%3D'%23fff'%2F%3E%3Cpath%20fill%3D'%23cc0001'%20d%3D'M0%200h38v1.86H0zM0%203.71h38v1.86H0zM0%207.43h38v1.86H0zM0%2011.14h38V13H0zM0%2014.86h38v1.86H0zM0%2018.57h38v1.86H0zM0%2022.29h38v1.86H0z'%2F%3E%3Crect%20width%3D'19'%20height%3D'14.86'%20fill%3D'%23010066'%2F%3E%3Ccircle%20cx%3D'6.7'%20cy%3D'7.4'%20r%3D'4.6'%20fill%3D'%23ffcc00'%2F%3E%3Ccircle%20cx%3D'8.4'%20cy%3D'7.4'%20r%3D'4'%20fill%3D'%23010066'%2F%3E%3Cpolygon%20points%3D'13.9%2C4.1%2014.22%2C5.99%2015.33%2C4.43%2014.8%2C6.27%2016.48%2C5.34%2015.21%2C6.77%2017.12%2C6.67%2015.35%2C7.4%2017.12%2C8.13%2015.21%2C8.03%2016.48%2C9.46%2014.8%2C8.53%2015.33%2C10.37%2014.22%2C8.81%2013.9%2C10.7%2013.58%2C8.81%2012.47%2C10.37%2013%2C8.53%2011.32%2C9.46%2012.59%2C8.03%2010.68%2C8.13%2012.45%2C7.4%2010.68%2C6.67%2012.59%2C6.77%2011.32%2C5.34%2013%2C6.27%2012.47%2C4.43%2013.58%2C5.99'%20fill%3D'%23ffcc00'%2F%3E%3C%2Fsvg%3E") center / cover no-repeat,
    #fff;
}

.flag-php {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 26'%3E%3Cpath fill='%230038a8' d='M0 0h38v13H0z'/%3E%3Cpath fill='%23ce1126' d='M0 13h38v13H0z'/%3E%3Cpath fill='%23fff' d='M0 0l19 13L0 26z'/%3E%3Cg fill='%23fcd116'%3E%3Cpath d='M0-1 .294-.405 .951-.309 .476.155 .588.809 0 .5-.588.809-.476.155-.951-.309-.294-.405Z' transform='translate(3.8 3.9) scale(1.65)'/%3E%3Cpath d='M0-1 .294-.405 .951-.309 .476.155 .588.809 0 .5-.588.809-.476.155-.951-.309-.294-.405Z' transform='translate(3.8 22.1) scale(1.65)'/%3E%3Cpath d='M0-1 .294-.405 .951-.309 .476.155 .588.809 0 .5-.588.809-.476.155-.951-.309-.294-.405Z' transform='translate(15.6 13) scale(1.65)'/%3E%3Cg transform='translate(7.7 13)'%3E%3Cpath d='M0-6 1-2.8-1-2.8ZM0 6-1 2.8H1ZM6 0 2.8 1v-2ZM-6 0-2.8-1v2ZM4.25-4.25 2.7-1.3 1.3-2.7ZM4.25 4.25 1.3 2.7 2.7 1.3ZM-4.25 4.25-2.7 1.3-1.3 2.7ZM-4.25-4.25-1.3-2.7-2.7-1.3Z'/%3E%3Ccircle r='2.45'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
}

.flag-thb {
  background: linear-gradient(#a51931 0 16%, #fff 16% 27%, #2d2a4a 27% 73%, #fff 73% 84%, #a51931 84%);
}

.flag-ron {
  background: linear-gradient(90deg, #002b7f 0 33%, #fcd116 33% 66%, #ce1126 66%);
}

.flag-isk {
  background:
    linear-gradient(90deg, transparent 0 41%, #dc1e35 41% 53%, transparent 53%),
    linear-gradient(0deg, transparent 0 42%, #dc1e35 42% 58%, transparent 58%),
    linear-gradient(90deg, transparent 0 30%, #fff 30% 64%, transparent 64%),
    linear-gradient(0deg, transparent 0 32%, #fff 32% 68%, transparent 68%),
    #02529c;
}

.swap-button,
.refresh-button,
.quick-pairs button {
  padding: 0 16px;
  font-weight: 800;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.swap-button {
  min-width: 72px;
  background: var(--ink);
  color: #fffef7;
}

.exchange-swap-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding-inline: 15px;
  border: 1px solid rgba(24, 25, 31, 0.26);
  background: #fffef9;
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(24, 25, 31, 0.12),
    0 4px 10px rgba(24, 25, 31, 0.08);
  line-height: 1;
}

.swap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  color: #087d83;
  transition: transform 180ms ease;
}

.swap-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swap-label {
  display: block;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 800;
}

.refresh-button {
  background: #ffe36e;
  box-shadow: 4px 4px 0 rgba(24, 25, 31, 0.9);
}

.swap-button:hover,
.refresh-button:hover,
.quick-pairs button:hover {
  transform: translateY(-2px);
}

.exchange-swap-button:hover {
  border-color: #087d83;
  background: #f2fbf9;
  box-shadow:
    0 2px 3px rgba(24, 25, 31, 0.12),
    0 7px 16px rgba(8, 125, 131, 0.13);
}

.exchange-swap-button:hover .swap-icon {
  transform: translateX(2px);
}

.exchange-swap-button:focus-visible {
  outline: 3px solid rgba(8, 125, 131, 0.3);
  outline-offset: 3px;
}

.exchange-swap-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(24, 25, 31, 0.14);
}

.rate-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}

.rate-card,
.rate-card-visual {
  display: grid;
  min-height: 74px;
  border: 1px solid rgba(24, 25, 31, 0.12);
  border-radius: 8px;
}

.rate-card {
  gap: 7px;
  padding: 18px 20px;
  background:
    radial-gradient(circle at 88% 18%, rgba(38, 199, 211, 0.18), transparent 6rem),
    linear-gradient(90deg, rgba(255, 227, 110, 0.42), rgba(232, 247, 255, 0.38) 52%, rgba(255, 228, 215, 0.36)),
    #fff8e9;
  box-shadow: 5px 5px 0 rgba(24, 25, 31, 0.12);
}

.cash-callout {
  justify-self: start;
  display: inline-block;
  margin-top: 5px;
  padding: 8px 13px 9px;
  border: 3px solid #05060a;
  border-radius: 8px;
  background: #f33c31;
  color: #fffef7;
  box-shadow: 5px 5px 0 #05060a;
  font-family:
    "Arial Black", "Segoe UI Black", "Trebuchet MS", Verdana, system-ui,
    sans-serif;
  font-size: clamp(0.94rem, 1.7vw, 1.15rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  text-shadow:
    2px 0 0 #05060a,
    -2px 0 0 #05060a,
    0 2px 0 #05060a,
    0 -2px 0 #05060a;
  transform: rotate(-1.5deg);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.cash-callout:hover {
  box-shadow: 7px 7px 0 #05060a;
  transform: translateY(-2px) rotate(-1.5deg);
}

.cash-callout:focus-visible {
  outline: 3px solid #ffe36e;
  outline-offset: 4px;
}

.rate-card strong {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.12;
}

.rate-card small {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.rate-card-visual {
  position: relative;
  align-content: center;
  justify-items: center;
  min-width: 220px;
  min-height: 132px;
  overflow: hidden;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(38, 199, 211, 0.22), transparent 54%),
    #fff8d9;
  box-shadow: 5px 5px 0 rgba(24, 25, 31, 0.18);
}

.cash-preview-label {
  position: absolute;
  left: 14px;
  top: 10px;
  z-index: 4;
  padding: 5px 8px;
  border: 2px solid #05060a;
  border-radius: 7px;
  background: #ffe36e;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.preview-note {
  position: absolute;
  display: grid;
  place-items: center;
  width: 106px;
  height: 58px;
  border: 3px solid #05060a;
  border-radius: 8px;
  box-shadow: 5px 6px 0 rgba(5, 6, 10, 0.9);
}

.preview-note::before,
.preview-note::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.preview-note::before {
  inset: 7px;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  border-radius: 5px;
}

.preview-note::after {
  right: 10px;
  top: 12px;
  width: 26px;
  height: 22px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0 5px, rgba(255, 255, 255, 0.2) 5px 10px);
}

.preview-note span {
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: start;
  margin: 0 0 9px 10px;
  color: #05060a;
  font-size: 1rem;
  font-weight: 950;
}

.preview-note-back {
  left: 28px;
  top: 38px;
  background: linear-gradient(115deg, #d8efb6, #78b36b 64%, #f6efd0);
  transform: rotate(-9deg);
}

.preview-note-front {
  right: 26px;
  top: 26px;
  z-index: 2;
  background: linear-gradient(115deg, #78d8e6, #21aebb 58%, #fff2bf);
  transform: rotate(8deg);
}

.preview-note-side {
  left: 76px;
  bottom: 14px;
  z-index: 1;
  background: linear-gradient(115deg, #ffd12e, #ff9f43 62%, #fff6ce);
  transform: rotate(2deg);
}

.bill-calculator {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(24, 25, 31, 0.12);
}

.bill-calculator-heading {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
}

.bill-calculator-heading h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.bill-calculator-heading p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.bill-currency-controls {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(24, 25, 31, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 243, 207, 0.74), rgba(232, 247, 255, 0.68)),
    rgba(255, 253, 248, 0.82);
}

.bill-currency-card {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.bill-currency-card > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.currency-readout {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(24, 25, 31, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
}

.bill-swap-button {
  min-width: 74px;
  min-height: 56px;
  align-self: end;
}

.amount-control,
.bill-result {
  min-width: 0;
  border: 1px solid rgba(24, 25, 31, 0.12);
  border-radius: 8px;
  background: #fffdf8;
}

.amount-control {
  position: relative;
  display: grid;
  gap: 11px;
  align-self: start;
  overflow: hidden;
  padding: 16px;
  border-width: 2px;
  background:
    radial-gradient(circle at 88% 10%, rgba(38, 199, 211, 0.28), transparent 5.8rem),
    radial-gradient(circle at 10% 100%, rgba(255, 227, 110, 0.42), transparent 5rem),
    #fffdf8;
  box-shadow: 5px 5px 0 rgba(24, 25, 31, 0.12);
}

.amount-control::before {
  position: absolute;
  right: -28px;
  top: -30px;
  width: 86px;
  height: 86px;
  border: 15px solid rgba(255, 255, 255, 0.46);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.amount-control > span {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  padding: 6px 9px;
  border: 2px solid #05060a;
  border-radius: 8px;
  background: #f33c31;
  color: #fffef7;
  box-shadow: 3px 3px 0 #05060a;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  text-shadow:
    1px 0 0 #05060a,
    -1px 0 0 #05060a,
    0 1px 0 #05060a,
    0 -1px 0 #05060a;
  transform: rotate(-2deg);
}

.amount-input-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 2px solid rgba(24, 25, 31, 0.9);
  border-radius: 8px;
  background: #fffef7;
  box-shadow: 4px 4px 0 rgba(24, 25, 31, 0.9);
}

.amount-code {
  display: grid;
  align-self: stretch;
  place-items: center;
  min-width: 72px;
  padding: 0 12px;
  border-right: 2px solid rgba(24, 25, 31, 0.9);
  background: #ffe36e;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
}

.amount-control .amount-code {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
  text-transform: uppercase;
}

.amount-control input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 850;
}

.amount-control input::placeholder {
  color: rgba(24, 25, 31, 0.46);
  font-size: 1rem;
  font-weight: 850;
}

.amount-control input:focus {
  outline: 0;
}

.amount-input-shell:focus-within {
  border-color: rgba(24, 25, 31, 0.42);
  box-shadow:
    4px 4px 0 rgba(24, 25, 31, 0.9),
    0 0 0 4px rgba(255, 227, 110, 0.36);
}

.bill-result {
  display: grid;
  gap: 12px;
  padding: 16px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 227, 110, 0.22), transparent 7rem),
    linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(232, 247, 255, 0.8));
}

.bill-result-main {
  display: grid;
  gap: 4px;
}

.bill-result-main span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.bill-result-main strong {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.15;
}

.bill-result-main small {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.bill-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 14px;
}

.cash-stack-group {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  min-width: 0;
}

.cash-stack-group + .cash-stack-group {
  margin-top: 2px;
}

.cash-stack-group-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cash-stack-group-heading::after {
  content: "";
  flex: 1;
  min-width: 32px;
  border-top: 2px dashed rgba(24, 25, 31, 0.16);
}

.cash-stack-group-heading span {
  width: fit-content;
  padding: 5px 9px;
  border: 2px solid rgba(24, 25, 31, 0.85);
  border-radius: 999px;
  background: #fffef7;
  box-shadow: 3px 3px 0 rgba(24, 25, 31, 0.86);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.cash-stack-group-coins .cash-stack-group-heading span {
  background: #ffe36e;
}

.cash-stack-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 14px;
  min-width: 0;
}

.cash-stack-coin-grid {
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
}

.bill-empty-prompt {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  min-height: 0;
  justify-items: center;
  gap: 10px;
  overflow: visible;
  padding: 16px;
  border: 2px dashed rgba(24, 25, 31, 0.22);
  border-radius: 8px;
  text-align: center;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 227, 110, 0.52), transparent 6.5rem),
    linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(232, 247, 255, 0.76));
}

.bill-empty-visual {
  position: relative;
  width: min(100%, 220px);
  height: 128px;
  justify-self: center;
}

.bill-empty-label {
  position: absolute;
  left: 8px;
  top: 6px;
  z-index: 6;
  padding: 6px 11px;
  border: 3px solid #05060a;
  border-radius: 8px;
  background: #f33c31;
  color: #fffef7;
  box-shadow: 4px 4px 0 #05060a;
  font-size: 0.84rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  text-shadow:
    1px 0 0 #05060a,
    -1px 0 0 #05060a,
    0 1px 0 #05060a,
    0 -1px 0 #05060a;
  transform: rotate(-5deg);
}

.bill-empty-note {
  position: absolute;
  display: grid;
  place-items: center;
  width: 132px;
  height: 72px;
  overflow: hidden;
  border: 3px solid #05060a;
  border-radius: 8px;
  box-shadow: 6px 7px 0 rgba(5, 6, 10, 0.9);
}

.bill-empty-note::before,
.bill-empty-note::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.bill-empty-note::before {
  inset: 8px;
  border: 2px dashed rgba(255, 255, 255, 0.62);
  border-radius: 6px;
}

.bill-empty-note::after {
  right: 10px;
  top: 12px;
  width: 34px;
  height: 28px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0 6px, rgba(255, 255, 255, 0.2) 6px 12px);
}

.bill-empty-note strong {
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: start;
  margin: 0 0 12px 12px;
  font-size: 1.25rem;
  font-weight: 950;
}

.bill-empty-note-back {
  left: 18px;
  top: 48px;
  background: linear-gradient(115deg, #d8efb6, #64bd8a 64%, #f6efd0);
  transform: rotate(-8deg);
}

.bill-empty-note-front {
  right: 12px;
  top: 30px;
  z-index: 2;
  background: linear-gradient(115deg, #78d8e6, #26c7d3 58%, #fff2bf);
  transform: rotate(8deg);
}

.bill-empty-note-side {
  left: 58px;
  bottom: 6px;
  z-index: 1;
  background: linear-gradient(115deg, #ffd12e, #ff9f43 62%, #fff6ce);
  transform: rotate(1deg);
}

.bill-empty-copy {
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 0;
}

.bill-empty-copy strong {
  max-width: 260px;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.08;
}

.bill-empty-copy span {
  max-width: 300px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.bill-stack-item {
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  padding: 16px;
  border: 2px solid rgba(24, 25, 31, 0.16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 227, 110, 0.42), transparent 4.7rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(232, 247, 255, 0.72));
  box-shadow: 4px 4px 0 rgba(24, 25, 31, 0.1);
}

.bill-coin-item {
  display: grid;
  min-width: 0;
  min-height: 124px;
  place-items: center;
  overflow: hidden;
  padding: 14px;
  border: 2px solid rgba(24, 25, 31, 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 227, 110, 0.45), transparent 4.2rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(232, 247, 255, 0.72));
  box-shadow: 4px 4px 0 rgba(24, 25, 31, 0.1);
}

.bill-stack-visual {
  position: relative;
  width: 168px;
  height: 110px;
  justify-self: center;
}

.stacked-note {
  position: absolute;
  left: 8px;
  bottom: 12px;
  z-index: var(--stack-z);
  display: grid;
  width: 116px;
  height: 64px;
  align-content: space-between;
  overflow: hidden;
  padding: 6px;
  border: 2px solid rgba(24, 25, 31, 0.78);
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.32) 0 3px,
      transparent 3px 11px
    ),
    linear-gradient(115deg, var(--note-a), var(--note-b) 58%, var(--note-c));
  box-shadow: 4px 4px 0 rgba(24, 25, 31, 0.84);
  transform: translate(var(--stack-x), var(--stack-y)) rotate(var(--tilt));
}

.stacked-note::before,
.stacked-note::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.stacked-note::before {
  inset: 7px;
  border: 2px dashed rgba(255, 255, 255, 0.58);
  border-radius: 5px;
}

.stacked-note::after {
  right: -12px;
  top: -14px;
  width: 38px;
  height: 38px;
  border: 7px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
}

.stacked-note strong,
.stacked-note small {
  position: relative;
  z-index: 1;
}

.stacked-note strong {
  font-size: clamp(0.82rem, 2vw, 1.18rem);
  font-weight: 950;
  line-height: 0.9;
}

.stacked-note small {
  justify-self: start;
  width: fit-content;
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  font-size: 0.58rem;
  font-weight: 900;
}

.bill-count-badge {
  position: absolute;
  right: 6px;
  top: 8px;
  z-index: 12;
  min-width: 50px;
  padding: 6px 8px;
  border: 3px solid #05060a;
  border-radius: 999px;
  background: #f33c31;
  color: #fffef7;
  box-shadow: 4px 4px 0 #05060a;
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow:
    1px 0 0 #05060a,
    -1px 0 0 #05060a,
    0 1px 0 #05060a,
    0 -1px 0 #05060a;
}

.bill-coin-pile {
  position: relative;
  width: 116px;
  height: 84px;
}

.bill-stacked-coin {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: var(--coin-stack-z);
  display: flex;
  width: var(--stacked-coin-size, 60px);
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  border: 3px solid rgba(24, 25, 31, 0.82);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.78), transparent 24%),
    linear-gradient(135deg, var(--coin-c), var(--coin-a) 45%, var(--coin-b));
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.2),
    4px 4px 0 rgba(24, 25, 31, 0.8);
  clip-path: var(--coin-clip, none);
  transform: translate(var(--coin-stack-x), var(--coin-stack-y));
}

.bill-stacked-coin.is-shaped {
  border-radius: 0;
  filter: drop-shadow(4px 4px 0 rgba(24, 25, 31, 0.8));
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.2);
}

.bill-stacked-coin::before {
  position: absolute;
  inset: 7px;
  content: "";
  border: 2px dashed rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  pointer-events: none;
}

.bill-stacked-coin.is-shaped::before {
  border-radius: 0;
  clip-path: var(--coin-clip);
}

.bill-stacked-coin.has-landing-shape::before {
  inset: 12px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 2px rgba(24, 25, 31, 0.32);
  clip-path: var(--coin-landing-clip);
}

.bill-stacked-coin.is-bimetal {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.78), transparent 24%),
    radial-gradient(
      circle,
      var(--coin-core, #e8eef0) 0 38%,
      var(--coin-core-dark, #89989d) 42%,
      var(--coin-ring, var(--coin-a, #d8b448)) 44% 72%,
      var(--coin-ring-dark, var(--coin-b, #927540)) 100%
    );
}

.bill-stacked-coin-hole {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 20%;
  aspect-ratio: 1;
  border: 2px solid rgba(24, 25, 31, 0.78);
  border-radius: 50%;
  background: #f7f3e9;
  box-shadow: inset 1px 1px 0 rgba(24, 25, 31, 0.2);
  transform: translate(-50%, -50%);
}

.bill-stacked-coin.has-hole strong {
  position: absolute;
  top: 8%;
}

.bill-stacked-coin.has-hole small {
  position: absolute;
  bottom: 10%;
}

.bill-stacked-coin strong,
.bill-stacked-coin small {
  position: relative;
  z-index: 1;
}

.bill-stacked-coin strong {
  color: #10121a;
  font-size: 1.03rem;
  font-weight: 950;
  line-height: 0.9;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.48);
}

.bill-stacked-coin strong.is-wide {
  font-size: 0.78rem;
}

.bill-stacked-coin small {
  max-width: 78%;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.42rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.bill-stacked-coin small.is-long {
  max-width: 84%;
  font-size: 0.36rem;
}

.bill-stacked-coin small.is-extra-long {
  max-width: 88%;
  font-size: 0.31rem;
}

.bill-coin-count-badge {
  right: 2px;
  top: 2px;
  min-width: 44px;
  padding: 5px 7px;
  background: #26c7d3;
  font-size: 0.78rem;
}

.bill-remainder,
.empty-bill-stack {
  color: var(--muted);
}

.bill-remainder {
  margin: 0;
  line-height: 1.45;
}

.empty-bill-stack {
  padding: 10px 0;
  line-height: 1.45;
}

/* Standalone Travel Cash Counter */
.bill-calculator {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 0;
  padding: 22px clamp(16px, 3vw, 28px) 20px;
  overflow: visible;
  border: 2px solid rgba(24, 25, 31, 0.88);
  border-radius: 8px;
  background:
    linear-gradient(115deg, rgba(255, 227, 110, 0.34), rgba(223, 247, 236, 0.76) 47%, rgba(220, 244, 250, 0.72)),
    #fffdf8;
  box-shadow: 7px 7px 0 rgba(24, 25, 31, 0.82);
}

.bill-calculator::before {
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, #f33c31 0 33%, #ffe36e 33% 66%, #26c7d3 66%);
  content: "";
}

.bill-calculator > * {
  position: relative;
  z-index: 1;
}

.bill-calculator-heading {
  display: flex;
  grid-column: 1;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.bill-calculator-heading > div:first-child {
  display: grid;
  gap: 4px;
}

.bill-calculator-heading h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1;
}

.bill-calculator-heading p {
  max-width: none;
  font-size: 0.9rem;
  line-height: 1.3;
}

.rate-passport {
  position: relative;
  display: grid;
  flex: 0 0 300px;
  gap: 5px;
  min-height: 126px;
  padding: 12px 52px 11px 15px;
  overflow: hidden;
  transform: rotate(-1deg);
  border: 3px double rgba(7, 105, 111, 0.92);
  border-radius: 6px;
  background:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(7, 105, 111, 0.055) 15px 16px),
    rgba(244, 252, 244, 0.62);
  box-shadow:
    inset 0 0 0 3px rgba(7, 105, 111, 0.1),
    3px 4px 0 rgba(7, 105, 111, 0.24);
  color: #07696f;
  transform-origin: center;
}

.rate-passport::after {
  position: absolute;
  right: 9px;
  bottom: 12px;
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(7, 105, 111, 0.14),
    inset 0 0 0 3px rgba(7, 105, 111, 0.12);
  content: "CBC";
  font-size: 0.52rem;
  font-weight: 950;
  letter-spacing: 0;
}

.rate-passport.is-stamped {
  animation: passport-stamp-in 300ms cubic-bezier(0.18, 0.78, 0.24, 1);
}

.passport-refresh {
  position: absolute;
  right: 7px;
  top: 6px;
  z-index: 2;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  font-size: 1.35rem;
  font-weight: 950;
  line-height: 1;
  transition:
    background 150ms ease,
    transform 180ms ease;
}

.passport-refresh:hover {
  background: rgba(7, 105, 111, 0.12);
  transform: rotate(25deg);
}

.passport-kicker {
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.passport-route {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1rem;
  line-height: 1;
}

.passport-route span {
  font-weight: 950;
}

.passport-rate {
  max-width: 100%;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
  white-space: nowrap;
}

.passport-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.rate-passport small {
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.1;
}

@keyframes passport-stamp-in {
  0% {
    opacity: 0.45;
    transform: rotate(-1deg) scale(1.08);
  }

  62% {
    opacity: 1;
    transform: rotate(-1.6deg) scale(0.985);
  }

  100% {
    opacity: 1;
    transform: rotate(-1deg) scale(1);
  }
}

.counter-destination {
  display: grid;
  flex: 0 0 auto;
  gap: 1px;
  min-width: 128px;
  padding: 8px 12px;
  transform: rotate(1deg);
  border: 2px solid #05060a;
  border-radius: 6px;
  background: #ffe36e;
  box-shadow: 4px 4px 0 #05060a;
  line-height: 1;
}

.counter-destination span {
  color: rgba(24, 25, 31, 0.62);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.counter-destination strong {
  font-size: 0.95rem;
}

.counter-destination strong span {
  color: inherit;
  font-size: inherit;
}

.counter-console {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(230px, 0.72fr);
  gap: 16px;
  align-items: end;
}

.bill-calculator .amount-control {
  gap: 7px;
  align-self: stretch;
  padding: 10px;
  overflow: visible;
  border-color: rgba(24, 25, 31, 0.84);
  background: rgba(255, 253, 248, 0.9);
  box-shadow: 4px 4px 0 rgba(24, 25, 31, 0.82);
}

.bill-calculator .amount-control::before {
  display: none;
}

.bill-calculator .amount-control > span {
  padding: 4px 7px;
  border-width: 2px;
  border-radius: 5px;
  box-shadow: 2px 2px 0 #05060a;
  font-size: 0.65rem;
  transform: rotate(-1deg);
}

.bill-calculator .amount-input-shell {
  box-shadow: 3px 3px 0 rgba(24, 25, 31, 0.86);
}

.bill-calculator .amount-control input {
  min-height: 48px;
  font-size: 1.35rem;
}

.bill-calculator .bill-currency-controls {
  grid-column: auto;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr);
  gap: 10px;
  align-items: end;
  padding: 0;
  border: 0;
  background: transparent;
}

.bill-calculator .bill-currency-card {
  gap: 5px;
}

.bill-calculator .bill-currency-card > span {
  font-size: 0.68rem;
}

.bill-calculator .currency-readout {
  min-height: 58px;
  background: rgba(255, 255, 255, 0.76);
}

.bill-calculator .currency-trigger {
  min-height: 58px;
  border-color: rgba(24, 25, 31, 0.22);
  background: rgba(255, 255, 255, 0.82);
}

.bill-calculator .currency-picker.is-open .currency-trigger {
  border-color: rgba(24, 25, 31, 0.58);
  box-shadow: 0 0 0 4px rgba(255, 227, 110, 0.34);
}

.bill-calculator .currency-menu {
  right: auto;
  width: min(340px, calc(100vw - 48px));
}

.bill-calculator .counter-currency-control:last-child .currency-menu {
  right: 0;
  left: auto;
}

.bill-calculator .bill-swap-button {
  min-width: 104px;
  min-height: 58px;
}

.bill-calculator .bill-result {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 0 20px;
  max-height: 0;
  margin: 0;
  padding: 0 16px;
  overflow: hidden;
  border-width: 0;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(24, 25, 31, 0.025) 31px 32px),
    linear-gradient(135deg, rgba(255, 253, 248, 0.98), rgba(229, 248, 244, 0.92));
  transform: translateY(-6px);
  transition:
    max-height 420ms cubic-bezier(0.2, 0.72, 0.25, 1),
    margin 240ms ease,
    padding 240ms ease,
    border-width 240ms ease,
    opacity 200ms ease,
    transform 240ms ease;
}

.bill-calculator.is-active .bill-result {
  max-height: 6000px;
  margin-top: 4px;
  padding: 18px 16px 16px;
  border-width: 2px;
  border-color: rgba(24, 25, 31, 0.72);
  opacity: 1;
  transform: translateY(0);
}

.bill-result-main {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-content: start;
  gap: 6px;
  padding: 2px 18px 4px 0;
  border-right: 2px dashed rgba(24, 25, 31, 0.18);
}

.bill-result-main strong {
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  line-height: 1.06;
  text-wrap: balance;
}

.cash-tray-label {
  grid-column: 2;
  width: fit-content;
  margin-bottom: 10px;
  padding: 5px 9px;
  transform: rotate(-1deg);
  border: 2px solid #05060a;
  border-radius: 5px;
  background: #26c7d3;
  box-shadow: 3px 3px 0 #05060a;
  color: #05060a;
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.bill-calculator .bill-stack,
.bill-calculator .bill-remainder {
  grid-column: 2;
}

.bill-calculator .bill-remainder {
  margin-top: 10px;
}

.bill-calculator.is-updating .bill-result-main strong {
  animation: cash-count-in 240ms cubic-bezier(0.2, 0.72, 0.25, 1);
}

.bill-calculator.is-updating .cash-stack-group {
  animation: cash-tray-deal 280ms cubic-bezier(0.2, 0.72, 0.25, 1);
}

@keyframes cash-count-in {
  from {
    opacity: 0.45;
    transform: translateY(5px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cash-tray-deal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cash-teaser {
  --cash-note-1-a: #c8ddb4;
  --cash-note-1-b: #7aa36b;
  --cash-note-1-c: #f2ead4;
  --cash-note-2-a: #efc477;
  --cash-note-2-b: #cf7b2f;
  --cash-note-2-c: #fff0c9;
  --cash-note-3-a: #a7d3d9;
  --cash-note-3-b: #4c9ab1;
  --cash-note-3-c: #eef7ef;
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr) auto;
  gap: 16px;
  min-height: 92px;
  padding: 10px 2px;
  align-items: center;
  border-block: 2px dashed rgba(24, 25, 31, 0.22);
  background:
    linear-gradient(90deg, rgba(255, 227, 110, 0.1), transparent 36%, rgba(38, 199, 211, 0.08));
}

.cash-teaser-stack {
  position: relative;
  width: 146px;
  height: 68px;
  justify-self: center;
  perspective: 500px;
}

.cash-teaser-note {
  position: absolute;
  inset: 8px 8px 4px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 5px;
  box-shadow: 3px 3px 0 rgba(24, 25, 31, 0.88);
  transform-origin: 50% 90%;
  transition: transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.cash-teaser-note::before,
.cash-teaser-note::after {
  position: absolute;
  content: "";
}

.cash-teaser-note::before {
  inset: 6px;
  border: 1px solid rgba(24, 25, 31, 0.42);
  border-radius: 3px;
}

.cash-teaser-note::after {
  left: 50%;
  top: 50%;
  width: 29px;
  height: 29px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(24, 25, 31, 0.48);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.25);
}

.cash-teaser-note-back {
  background: linear-gradient(135deg, var(--cash-note-1-c), var(--cash-note-1-a) 52%, var(--cash-note-1-b));
  transform: translate(-6px, 1px) rotate(-7deg);
}

.cash-teaser-note-middle {
  background: linear-gradient(135deg, var(--cash-note-2-c), var(--cash-note-2-a) 52%, var(--cash-note-2-b));
  transform: translate(7px, 0) rotate(6deg);
}

.cash-teaser-note-front {
  display: flex;
  padding: 10px 12px;
  align-items: flex-end;
  justify-content: space-between;
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(255, 255, 255, 0.13) 17px 18px),
    linear-gradient(135deg, var(--cash-note-3-c), var(--cash-note-3-a) 52%, var(--cash-note-3-b));
  transform: rotate(-1deg);
}

.cash-teaser-note-front strong {
  position: relative;
  z-index: 1;
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1;
}

.cash-teaser-note-front i {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(24, 25, 31, 0.58);
  border-radius: 50%;
}

.cash-teaser:hover .cash-teaser-note-back {
  transform: translate(-12px, -3px) rotate(-10deg);
}

.cash-teaser:hover .cash-teaser-note-middle {
  transform: translate(13px, -5px) rotate(9deg);
}

.cash-teaser:hover .cash-teaser-note-front {
  transform: translateY(-5px) rotate(-1deg);
}

.cash-teaser-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cash-teaser-copy h2 {
  margin: 0;
  font-size: clamp(1.12rem, 2vw, 1.48rem);
  line-height: 1.05;
}

.cash-teaser-button {
  display: flex;
  max-width: 330px;
  min-height: 50px;
  padding: 9px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #ffe36e;
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: left;
  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.cash-teaser-button:hover {
  background: #ffcf3f;
  box-shadow: 2px 2px 0 var(--ink);
  transform: translate(2px, 2px);
}

.cash-teaser-button:focus-visible {
  outline: 3px solid rgba(38, 199, 211, 0.52);
  outline-offset: 3px;
}

.cash-teaser-arrow {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 21px;
  transition: transform 160ms ease;
}

.cash-teaser-arrow::before,
.cash-teaser-arrow::after {
  position: absolute;
  content: "";
}

.cash-teaser-arrow::before {
  left: 8px;
  top: 1px;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: currentColor;
}

.cash-teaser-arrow::after {
  left: 4px;
  bottom: 2px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}

.cash-teaser-button:hover .cash-teaser-arrow {
  transform: translateY(3px);
}

.quick-pairs {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(24, 25, 31, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
}

.quick-pairs-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: end;
}

.quick-pairs-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: right;
}

.quick-pair-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.quick-pairs button {
  min-height: 68px;
  padding: 10px 12px;
  border-width: 2px;
  background: #fffdf7;
  box-shadow: 3px 3px 0 rgba(24, 25, 31, 0.88);
}

.quick-pair-button {
  display: grid;
  gap: 5px;
  align-content: center;
}

.quick-pair-button:nth-child(2n) {
  background: #e8f7ff;
}

.quick-pair-button:nth-child(3n) {
  background: #fff2bf;
}

.quick-pair-route {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.quick-pair-route strong {
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 28px;
  padding: 0 8px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: #ffffff;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1;
}

.quick-pair-route span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.quick-pair-button small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}

.notes-section {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  padding: clamp(16px, 3vw, 28px);
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(24, 25, 31, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 25, 31, 0.022) 1px, transparent 1px),
    radial-gradient(circle at 12% 4%, rgba(255, 227, 110, 0.32), transparent 13rem),
    radial-gradient(circle at 88% 18%, rgba(38, 199, 211, 0.18), transparent 15rem),
    linear-gradient(135deg, rgba(255, 251, 235, 0.94), rgba(236, 250, 243, 0.88) 50%, rgba(232, 247, 255, 0.9));
  background-size:
    28px 28px,
    28px 28px,
    auto,
    auto,
    auto;
}

.notes-section::before {
  position: absolute;
  right: -42px;
  top: 88px;
  width: 126px;
  height: 126px;
  border: 18px solid rgba(255, 209, 46, 0.22);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.notes-section > * {
  position: relative;
  z-index: 1;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 22px;
}

.section-heading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.section-heading h2,
.mini-panel h2 {
  margin: 4px 0 0;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.section-heading p,
.mini-panel p,
#currencyList {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.section-heading p {
  max-width: 280px;
  text-align: right;
}

.notes-swap-button {
  min-height: 42px;
  padding: 0 14px;
  white-space: nowrap;
}

.money-mode-button {
  min-height: 42px;
  padding: 0 14px;
  border: 2px solid #05060a;
  border-radius: 8px;
  background: #f33c31;
  color: #fffef7;
  box-shadow: 4px 4px 0 #05060a;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  text-shadow:
    1px 0 0 #05060a,
    -1px 0 0 #05060a,
    0 1px 0 #05060a,
    0 -1px 0 #05060a;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.money-mode-button:hover {
  background: #ff4a3f;
  box-shadow: 6px 6px 0 #05060a;
  transform: translateY(-2px) rotate(-1deg);
}

.money-mode-button[aria-pressed="true"] {
  background: #ffe36e;
  color: var(--ink);
  text-shadow: none;
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
}

.notes-grid.is-coin-grid {
  position: relative;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  align-items: end;
  gap: 32px 14px;
  margin-top: 2px;
  padding: 28px 6px 24px;
  border-block: 1px solid rgba(24, 25, 31, 0.12);
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 35px,
      rgba(24, 25, 31, 0.025) 35px 36px
    ),
    linear-gradient(180deg, rgba(217, 245, 239, 0.34), rgba(255, 239, 178, 0.2));
  box-shadow:
    inset 0 10px 22px rgba(70, 165, 157, 0.045),
    inset 0 -10px 20px rgba(255, 209, 46, 0.045);
}

.banknote-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.banknote-wrap {
  position: relative;
  min-width: 0;
  perspective: 900px;
}

.coin-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(166px, auto) auto auto;
  align-items: end;
  min-width: 0;
  justify-items: center;
  gap: 0;
  min-height: 246px;
  padding: 8px 2px 12px;
  overflow: visible;
}

.coin-face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: min(var(--coin-size, 142px), 72vw);
  aspect-ratio: 1;
  overflow: hidden;
  border: 4px solid rgba(24, 25, 31, 0.8);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.8), transparent 22%),
    radial-gradient(circle at 66% 74%, rgba(24, 25, 31, 0.18), transparent 34%),
    linear-gradient(135deg, var(--coin-c), var(--coin-a) 42%, var(--coin-b));
  box-shadow:
    inset 0 0 0 7px rgba(255, 255, 255, 0.22),
    inset -10px -12px 0 rgba(24, 25, 31, 0.12),
    8px 9px 0 rgba(24, 25, 31, 0.86);
  transform: translateY(var(--coin-offset, 0)) rotate(var(--coin-tilt, 0deg));
  transition: transform 160ms ease;
}

.coin-face.is-major {
  width: min(var(--coin-size, 154px), 74vw);
}

.coin-card:hover .coin-face {
  transform: translateY(calc(var(--coin-offset, 0px) - 4px)) rotate(var(--coin-tilt, 0deg));
}

.coin-face.is-bimetal {
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.78), transparent 22%),
    radial-gradient(
      circle,
      var(--coin-core, #e8eef0) 0 38%,
      var(--coin-core-dark, #89989d) 42%,
      var(--coin-ring, var(--coin-a, #d8b448)) 44% 72%,
      var(--coin-ring-dark, var(--coin-b, #927540)) 100%
    );
}

.coin-inner-ring {
  position: absolute;
  inset: 13px;
  border: 3px dashed rgba(255, 255, 255, 0.62);
  border-radius: 50%;
}

.coin-spark {
  position: absolute;
  right: 24px;
  top: 25px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.58);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
}

.coin-value,
.coin-unit {
  position: relative;
  z-index: 2;
}

.coin-value {
  color: #10121a;
  font-size: clamp(1.55rem, 4.5vw, 2.35rem);
  font-weight: 950;
  line-height: 0.95;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.5);
}

.coin-value.is-wide {
  font-size: clamp(1.28rem, 3.6vw, 1.85rem);
}

.coin-unit {
  max-width: 82%;
  padding: 4px 8px;
  border: 1px solid rgba(24, 25, 31, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.coin-unit.is-long {
  max-width: 88%;
  padding-inline: 6px;
  font-size: 0.56rem;
}

.coin-unit.is-extra-long {
  max-width: 90%;
  padding-inline: 5px;
  font-size: 0.5rem;
}

.coin-sticky {
  display: grid;
  align-content: center;
  gap: 4px;
  z-index: 3;
  justify-self: end;
  width: min(132px, 88%);
  min-height: 58px;
  margin-top: -12px;
  padding: 8px 9px;
  border: 1px solid rgba(24, 25, 31, 0.12);
  border-radius: 5px;
  background: var(--sticky);
  box-shadow: 3px 4px 0 rgba(24, 25, 31, 0.2);
  transform: rotate(var(--ticket-tilt, -1deg));
}

.coin-sticky span {
  color: rgba(24, 25, 31, 0.62);
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1.08;
  text-transform: uppercase;
}

.coin-sticky strong {
  min-width: 0;
  overflow: visible;
  white-space: normal;
  font-size: 0.96rem;
  line-height: 1.05;
  text-wrap: balance;
}

.coin-sticky strong.is-long {
  font-size: 0.88rem;
}

.coin-sticky strong.is-extra-long {
  font-size: 0.76rem;
}

.coin-caption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 30px;
  margin-top: 11px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.2;
  text-align: center;
}

.coin-caption strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.coin-caption span::before {
  margin-right: 5px;
  content: "·";
}

.banknote {
  position: relative;
  display: grid;
  min-height: 190px;
  aspect-ratio: var(--note-aspect-ratio, 1.92);
  overflow: hidden;
  border: 2px solid rgba(24, 25, 31, 0.7);
  border-radius: 8px;
  color: #10121a;
  background:
    linear-gradient(115deg, var(--note-a), var(--note-b) 55%, var(--note-c)),
    #f8efd8;
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, 0.35),
    7px 7px 0 rgba(24, 25, 31, 0.9);
  transform: perspective(900px) translateY(0) rotateX(0) rotateY(0);
  transform-origin: center;
  transform-style: preserve-3d;
  transition:
    transform 150ms cubic-bezier(0.2, 0.72, 0.25, 1),
    box-shadow 180ms ease,
    filter 180ms ease;
}

.banknote::before,
.banknote::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.banknote::before {
  inset: 11px;
  border: 2px dashed rgba(255, 255, 255, 0.58);
  border-radius: 6px;
}

.banknote::after {
  width: 42%;
  aspect-ratio: 1;
  right: -11%;
  top: -26%;
  border: 18px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.note-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.46;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.4) 0 3px,
      transparent 3px 18px
    ),
    radial-gradient(circle at 22% 35%, rgba(255, 255, 255, 0.5) 0 6px, transparent 7px),
    radial-gradient(circle at 62% 64%, rgba(24, 25, 31, 0.15) 0 3px, transparent 4px);
  mix-blend-mode: screen;
}

.note-pattern::after {
  position: absolute;
  inset: -18%;
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255, 255, 255, 0.9) 0,
    rgba(255, 255, 255, 0.42) 10%,
    transparent 31%
  );
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.note-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 38%);
  grid-template-rows: auto 1fr;
  gap: 8px 16px;
  height: 100%;
  padding: 16px 17px 18px;
}

.note-topline {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.note-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.note-flag-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 29px;
  height: 20px;
  overflow: hidden;
  border-radius: 3px;
}

.banknote .note-identity .flag-icon {
  position: absolute;
  left: 0;
  top: 0;
  flex: 0 0 auto;
  width: 38px;
  height: 26px;
  transform: scale(0.76);
  transform-origin: left top;
}

.note-identity > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.note-identity strong {
  font-size: 0.8rem;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
}

.note-identity small {
  overflow: hidden;
  color: rgba(24, 25, 31, 0.72);
  font-size: 0.61rem;
  font-weight: 800;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-corner-value {
  flex: 0 1 auto;
  overflow: hidden;
  color: rgba(16, 18, 26, 0.68);
  font-size: 1.25rem;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-corner-value.is-wide {
  font-size: 0.98rem;
}

.note-denomination {
  align-self: center;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.note-value {
  overflow: hidden;
  font-size: 4.2rem;
  font-weight: 950;
  line-height: 0.86;
  letter-spacing: 0;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.5);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-value.is-wide {
  font-size: 3.1rem;
}

.note-unit {
  width: fit-content;
  max-width: 100%;
  padding: 3px 6px;
  border-left: 3px solid rgba(24, 25, 31, 0.72);
  background: transparent;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.note-motif {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  width: min(138px, 92%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 0 44%, rgba(24, 25, 31, 0.25) 44% 56%, transparent 56%),
    repeating-conic-gradient(
      from 20deg,
      rgba(255, 255, 255, 0.5) 0 14deg,
      rgba(24, 25, 31, 0.12) 14deg 28deg
    );
  border: 2px solid rgba(255, 255, 255, 0.55);
}

.note-artwork {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-items: center;
  width: min(178px, 100%);
  min-height: 132px;
  overflow: visible;
  padding: 9px 8px 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(16, 18, 26, 0.7);
  mix-blend-mode: multiply;
  transition: transform 170ms cubic-bezier(0.2, 0.72, 0.25, 1);
}

.note-artwork::before {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: inherit;
  background:
    repeating-radial-gradient(
      ellipse at center,
      transparent 0 7px,
      rgba(24, 25, 31, 0.08) 8px 9px,
      transparent 10px 15px
    );
  content: "";
  opacity: 0.72;
  pointer-events: none;
}

.note-artwork.is-round {
  width: min(154px, 98%);
  min-height: 138px;
  border-radius: 50%;
}

.note-artwork.is-square {
  border-radius: 0;
}

.note-artwork.is-square::before {
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(24, 25, 31, 0.065) 9px 10px),
    repeating-linear-gradient(-45deg, transparent 0 12px, rgba(255, 255, 255, 0.13) 13px 14px);
}

.note-artwork.is-arch {
  border-radius: 58% 58% 8% 8%;
}

.note-artwork.is-arch::before {
  background:
    repeating-radial-gradient(
      ellipse at 50% 72%,
      transparent 0 9px,
      rgba(24, 25, 31, 0.075) 10px 11px,
      transparent 12px 18px
    );
}

.note-artwork svg {
  position: relative;
  z-index: 1;
  grid-row: 2;
  width: 100%;
  height: 90px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.34));
}

.note-artwork svg .artwork-detail {
  opacity: 0.74;
  stroke-width: 1.15;
}

.note-artwork span {
  position: relative;
  z-index: 1;
  grid-row: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 1.05em;
  overflow: visible;
  color: rgba(16, 18, 26, 0.7);
  font-size: 0.53rem;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  text-overflow: clip;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
  text-wrap: balance;
  text-transform: uppercase;
  white-space: normal;
}

.banknote[data-motif="wave"] .note-motif {
  border-radius: 42% 58% 38% 62%;
  background:
    repeating-radial-gradient(
      circle at 20% 55%,
      rgba(255, 255, 255, 0.55) 0 5px,
      rgba(24, 25, 31, 0.11) 5px 12px
    );
}

.banknote[data-motif="stripe"] .note-motif {
  border-radius: 8px;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.58) 0 8px,
      rgba(24, 25, 31, 0.13) 8px 16px
    );
}

.banknote[data-motif="sun"] .note-motif {
  background:
    repeating-conic-gradient(
      rgba(255, 255, 255, 0.65) 0 10deg,
      rgba(24, 25, 31, 0.13) 10deg 20deg
    );
}

.banknote[data-motif="arch"] .note-motif {
  border-radius: 50% 50% 8px 8px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.62) 0 34%, transparent 35%),
    repeating-linear-gradient(90deg, rgba(24, 25, 31, 0.16) 0 6px, transparent 6px 14px);
}

.conversion-sticky {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 4px;
  width: min(156px, 43%);
  min-height: 78px;
  padding: 10px 11px;
  transform: rotate(-2.5deg);
  border: 1px solid rgba(24, 25, 31, 0.12);
  border-radius: 5px;
  background: var(--sticky);
  box-shadow: 4px 5px 0 rgba(24, 25, 31, 0.22);
  transition:
    transform 170ms cubic-bezier(0.2, 0.72, 0.25, 1),
    box-shadow 170ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .banknote-card .banknote {
    will-change: transform;
  }

  .banknote-card.is-note-hovered .banknote {
    filter: saturate(1.07) contrast(1.02);
    box-shadow:
      inset 0 0 0 5px rgba(255, 255, 255, 0.4),
      12px 14px 0 rgba(24, 25, 31, 0.82);
    transform:
      perspective(900px)
      translateY(-5px)
      rotateX(var(--note-rotate-x, 0deg))
      rotateY(var(--note-rotate-y, 0deg));
  }

  .banknote-card.is-note-hovered .note-pattern::after {
    opacity: 1;
  }

  .banknote-card.is-note-hovered .note-artwork {
    transform:
      translate3d(
        var(--artwork-shift-x, 0),
        var(--artwork-shift-y, 0),
        0
      )
      scale(1.025);
  }

  .banknote-card.is-note-hovered .conversion-sticky {
    box-shadow: 6px 8px 0 rgba(24, 25, 31, 0.2);
    transform:
      translate3d(
        var(--ticket-shift-x, 0),
        var(--ticket-shift-y, 0),
        0
      )
      rotate(-1.25deg)
      scale(1.015);
  }
}

@keyframes note-tap-lift {
  0%,
  100% {
    transform: perspective(900px) translateY(0) rotateX(0) rotateY(0) scale(1);
  }

  32% {
    transform: perspective(900px) translateY(-10px) rotateX(2deg) rotateY(-5deg) scale(1.025);
  }

  62% {
    transform: perspective(900px) translateY(-5px) rotateX(-1deg) rotateY(4deg) scale(1.015);
  }
}

@keyframes note-tap-shine {
  0%,
  100% {
    opacity: 0;
  }

  35% {
    opacity: 0.95;
  }

  68% {
    opacity: 0.25;
  }
}

@keyframes note-ticket-pop {
  0%,
  100% {
    transform: rotate(-2.5deg) scale(1);
  }

  42% {
    transform: translateY(-5px) rotate(0deg) scale(1.045);
  }
}

@keyframes coin-tap-pop {
  0%,
  100% {
    transform:
      translateY(var(--coin-offset, 0px))
      rotate(var(--coin-tilt, 0deg))
      scale(1);
  }

  38% {
    transform:
      translateY(calc(var(--coin-offset, 0px) - 13px))
      rotate(calc(var(--coin-tilt, 0deg) - 9deg))
      scale(1.08);
  }

  68% {
    transform:
      translateY(calc(var(--coin-offset, 0px) - 4px))
      rotate(calc(var(--coin-tilt, 0deg) + 5deg))
      scale(1.025);
  }
}

@keyframes coin-tap-glint {
  0%,
  100% {
    opacity: 0.58;
    transform: rotate(0deg) scale(1);
  }

  40% {
    opacity: 1;
    transform: rotate(135deg) scale(1.65);
  }
}

@keyframes coin-ticket-pop {
  0%,
  100% {
    transform: rotate(var(--ticket-tilt, -1deg)) scale(1);
  }

  46% {
    transform: translateY(-4px) rotate(1deg) scale(1.035);
  }
}

@media (hover: none), (pointer: coarse) {
  .coin-card:hover .coin-face {
    transform: translateY(var(--coin-offset, 0px)) rotate(var(--coin-tilt, 0deg));
  }

  .banknote-card.is-note-tapped .banknote {
    animation: note-tap-lift 720ms cubic-bezier(0.2, 0.78, 0.25, 1);
    filter: saturate(1.08) contrast(1.02);
    box-shadow:
      inset 0 0 0 5px rgba(255, 255, 255, 0.4),
      12px 14px 0 rgba(24, 25, 31, 0.82);
  }

  .banknote-card.is-note-tapped .note-pattern::after {
    animation: note-tap-shine 720ms ease;
  }

  .banknote-card.is-note-tapped .conversion-sticky {
    animation: note-ticket-pop 720ms cubic-bezier(0.2, 0.78, 0.25, 1);
  }

  .coin-card.is-coin-tapped .coin-face {
    animation: coin-tap-pop 700ms cubic-bezier(0.2, 0.78, 0.25, 1);
    filter: saturate(1.08) contrast(1.03);
  }

  .coin-card.is-coin-tapped .coin-spark {
    animation: coin-tap-glint 700ms ease;
  }

  .coin-card.is-coin-tapped .coin-sticky {
    animation: coin-ticket-pop 700ms cubic-bezier(0.2, 0.78, 0.25, 1);
  }
}

.conversion-sticky span {
  color: rgba(24, 25, 31, 0.62);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.conversion-sticky strong {
  align-self: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.3rem;
  line-height: 1.05;
}

.conversion-sticky strong.is-long {
  font-size: 1.02rem;
}

.conversion-sticky strong.is-extra-long {
  font-size: 0.86rem;
}

.note-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.note-caption strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.note-caption-value {
  flex: 0 0 auto;
  color: #087d83;
  font-weight: 900;
  text-align: right;
}

.side-panel {
  display: grid;
  height: 100%;
  gap: 18px;
  align-content: start;
}

.side-panel > section {
  padding: 18px;
  border-radius: var(--radius);
}

.side-panel > .concept-panel {
  background:
    radial-gradient(circle at 14% 15%, rgba(255, 227, 110, 0.4), transparent 6rem),
    linear-gradient(135deg, rgba(255, 251, 232, 0.94), rgba(232, 247, 255, 0.76));
}

.side-panel > .travel-tips {
  background:
    linear-gradient(135deg, rgba(232, 246, 223, 0.7), rgba(255, 243, 207, 0.78)),
    #fffaf0;
}

.mini-panel {
  display: grid;
  gap: 10px;
}

.concept-panel {
  gap: 14px;
}

.concept-mark {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.concept-mark span {
  padding: 5px 7px;
  border: 2px solid var(--brand-ink);
  background: #fff;
  box-shadow: 2px 2px 0 var(--brand-ink);
  font-size: 0.59rem;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.concept-mark span:nth-child(1) {
  background: var(--brand-yellow);
  transform: rotate(-3deg);
}

.concept-mark span:nth-child(2) {
  background: var(--brand-teal);
  transform: rotate(2deg);
}

.concept-mark span:nth-child(3) {
  background: var(--brand-red);
  color: #fff;
  transform: rotate(-1deg);
}

.concept-copy {
  display: grid;
  gap: 8px;
}

.concept-copy h2 {
  max-width: 13ch;
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.02;
}

.concept-copy p,
.concept-copy small {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.concept-copy p {
  font-size: 0.89rem;
}

.concept-copy small {
  font-size: 0.7rem;
  font-weight: 750;
}

.travel-tip-list {
  display: grid;
  gap: 12px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.travel-tip-list li {
  display: grid;
  gap: 3px;
  padding-top: 12px;
  border-top: 1px dashed rgba(24, 25, 31, 0.18);
}

.travel-tip-list strong {
  font-size: 0.86rem;
}

.travel-tip-list span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.ad-slot {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  place-items: center;
  min-height: 250px;
  padding: 18px;
  overflow: hidden;
  border-width: 2px;
  border-style: dashed;
  border-color: rgba(24, 25, 31, 0.24);
  background:
    repeating-linear-gradient(135deg, rgba(24, 25, 31, 0.018) 0 8px, transparent 8px 18px),
    rgba(255, 255, 255, 0.72);
  text-align: center;
}

.ad-slot[hidden] {
  display: none !important;
}

.ad-slot span {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ad-slot strong {
  position: relative;
  z-index: 1;
  color: rgba(24, 25, 31, 0.62);
  font-size: 1.12rem;
}

.ad-slot-wide {
  min-height: 112px;
  margin-top: 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.ad-slot-wide strong {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.ad-slot-gallery {
  display: none;
  grid-column: 1 / -1;
  align-self: stretch;
  min-height: 220px;
  margin: 14px 0;
  border-radius: 6px;
}

.ad-slot-rail {
  position: sticky;
  top: 24px;
  min-height: 600px;
  padding: 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.ad-slot-footer {
  min-height: 120px;
  margin-top: 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.is-loading .banknote {
  filter: saturate(0.65);
}

@media (max-width: 980px) {
  .intro,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .controls,
  .rate-strip {
    grid-template-columns: 1fr 1fr;
  }

  .bill-currency-controls {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .swap-button,
  .refresh-button {
    width: 100%;
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .section-heading-actions {
    justify-content: flex-start;
  }

  .section-heading p {
    text-align: left;
  }

  .quick-pairs-heading {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }

  .quick-pairs-heading p {
    text-align: left;
  }

  .ad-slot-wide {
    min-height: 96px;
  }

  .ad-slot-gallery {
    display: grid;
  }

  .ad-slot-rail {
    display: none;
  }
}

@media (max-width: 620px) {
  .page-shell {
    padding: 12px;
  }

  .workspace {
    min-height: auto;
  }

  .brand-line {
    width: min(100%, 315px);
    min-height: 207px;
  }

  .intro-copy h1,
  .intro-copy p {
    max-width: calc(100vw - 64px);
  }

  .intro-copy p {
    max-width: 300px;
  }

  .controls,
  .rate-strip {
    grid-template-columns: 1fr;
  }

  .rate-card-visual {
    min-width: 0;
  }

  .bill-currency-controls {
    grid-template-columns: 1fr;
  }

  #swapButton .swap-icon,
  #billSwapButton .swap-icon {
    transform: rotate(90deg);
  }

  #swapButton:hover .swap-icon,
  #billSwapButton:hover .swap-icon {
    transform: rotate(90deg) translateX(2px);
  }

  .bill-stack {
    grid-template-columns: 1fr;
  }

  .bill-empty-prompt {
    grid-template-columns: 1fr;
  }

  .bill-empty-visual {
    width: min(100%, 220px);
  }

  .bill-stack-item {
    grid-template-columns: 1fr;
  }

  .notes-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .notes-grid.is-coin-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px 0;
  }

  .coin-card {
    grid-template-columns: minmax(108px, 42%) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: stretch;
    min-height: 0;
    padding: 22px 4px 20px;
    column-gap: 18px;
    row-gap: 8px;
  }

  .coin-card:not(:last-child)::after {
    position: absolute;
    right: 4px;
    bottom: 0;
    left: 4px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(24, 25, 31, 0.18) 12% 88%, transparent);
    content: "";
  }

  .coin-face,
  .coin-face.is-major {
    grid-column: 1;
    grid-row: 1;
    width: min(var(--coin-size-mobile, 130px), 100%);
    justify-self: center;
    box-shadow:
      inset 0 0 0 6px rgba(255, 255, 255, 0.22),
      inset -8px -10px 0 rgba(24, 25, 31, 0.12),
      6px 7px 0 rgba(24, 25, 31, 0.86);
  }

  .coin-inner-ring {
    inset: 11px;
  }

  .coin-spark {
    top: 19px;
    right: 19px;
    width: 21px;
    height: 21px;
  }

  .coin-value {
    font-size: clamp(1.45rem, 8vw, 2rem);
  }

  .coin-value.is-wide {
    font-size: clamp(1.2rem, 6.5vw, 1.65rem);
  }

  .coin-sticky {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    width: min(100%, 205px);
    min-height: 64px;
    margin-top: 0;
    transform: rotate(var(--ticket-tilt, -1deg));
  }

  .coin-caption {
    grid-column: 1;
    grid-row: 2;
    align-items: center;
    align-self: start;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    min-height: 0;
    margin-top: 4px;
  }

  .coin-caption span::before {
    content: none;
  }

  .banknote {
    width: min(100%, 420px);
    min-height: 190px;
    box-shadow:
      inset 0 0 0 4px rgba(255, 255, 255, 0.35),
      4px 4px 0 rgba(24, 25, 31, 0.9);
  }

  .banknote-wrap {
    margin-bottom: 26px;
  }

  .note-content {
    grid-template-columns: minmax(0, 1fr) minmax(88px, 38%);
    gap: 7px 10px;
    padding: 12px 13px 14px;
  }

  .note-value {
    font-size: 3.15rem;
  }

  .note-value.is-wide {
    font-size: 2.35rem;
  }

  .note-identity {
    gap: 6px;
    padding: 4px 6px 4px 5px;
  }

  .note-flag-wrap {
    width: 25px;
    height: 17px;
  }

  .banknote .note-identity .flag-icon {
    transform: scale(0.66);
  }

  .note-identity small {
    max-width: 112px;
  }

  .note-motif {
    width: min(110px, 90%);
  }

  .note-artwork {
    align-self: start;
    width: min(126px, 100%);
    min-height: 96px;
    padding: 7px 8px 9px;
    transform: translateY(-4px);
  }

  .note-artwork.is-round {
    width: min(106px, 96%);
    min-height: 106px;
  }

  .note-artwork svg {
    height: 56px;
    stroke-width: 2.25;
  }

  .note-artwork svg .artwork-detail {
    stroke-width: 1.2;
  }

  .note-artwork span {
    font-size: 0.48rem;
  }

  .conversion-sticky {
    right: 10px;
    bottom: -22px;
    left: auto;
    grid-template-columns: 1fr;
    gap: 4px;
    width: min(120px, 43%);
    min-height: 64px;
    padding: 8px;
    transform: rotate(-2.5deg);
  }

  .conversion-sticky span {
    line-height: 1;
  }

  .conversion-sticky strong {
    justify-self: stretch;
    text-align: left;
  }

  .conversion-sticky strong {
    font-size: 1rem;
  }

  .conversion-sticky strong.is-long {
    font-size: 0.88rem;
  }

  .conversion-sticky strong.is-extra-long {
    font-size: 0.76rem;
  }

  .note-caption {
    flex-wrap: wrap;
    gap: 4px 10px;
  }
}

@media (max-width: 840px) {
  .rate-passport {
    flex-basis: 264px;
  }

  .counter-console {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bill-calculator .bill-result,
  .bill-calculator.is-active .bill-result {
    grid-template-columns: 1fr;
  }

  .bill-result-main {
    grid-column: 1;
    grid-row: auto;
    margin-bottom: 14px;
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 2px dashed rgba(24, 25, 31, 0.18);
  }

  .cash-tray-label,
  .bill-calculator .bill-stack,
  .bill-calculator .bill-remainder {
    grid-column: 1;
  }
}

@media (max-width: 620px) {
  .bill-calculator {
    gap: 12px;
    margin-top: 18px;
    padding: 20px 14px 16px;
    box-shadow: 5px 5px 0 rgba(24, 25, 31, 0.82);
  }

  .bill-calculator-heading {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 12px;
  }

  .bill-calculator-heading h2 {
    font-size: 1.42rem;
  }

  .bill-calculator-heading p {
    font-size: 0.78rem;
  }

  .counter-destination {
    min-width: 104px;
    padding: 7px 8px;
  }

  .rate-passport {
    width: 100%;
    min-height: 104px;
    padding-block: 10px;
    transform: rotate(-0.5deg);
  }

  .bill-calculator .bill-currency-controls {
    grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
    gap: 7px;
  }

  .bill-calculator .bill-swap-button {
    width: 46px;
    min-width: 46px;
    min-height: 54px;
    padding: 0;
  }

  .bill-calculator .bill-swap-button .swap-label {
    display: none;
  }

  #billSwapButton .swap-icon,
  #billSwapButton:hover .swap-icon {
    transform: none;
  }

  .bill-calculator .currency-readout {
    justify-content: center;
    min-height: 54px;
    gap: 6px;
    padding: 7px 6px;
  }

  .bill-calculator .currency-trigger {
    justify-content: center;
    min-height: 54px;
    gap: 6px;
    padding: 7px 24px 7px 6px;
  }

  .bill-calculator .currency-trigger .currency-option-text span,
  .bill-calculator .currency-trigger .currency-option-text small {
    display: none;
  }

  .bill-calculator .amount-code {
    min-width: 62px;
  }

  .bill-calculator .amount-control input {
    min-height: 46px;
    padding-inline: 11px;
  }

  .bill-calculator.is-active .bill-result {
    padding: 14px 12px;
  }

  .cash-teaser {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 5px 12px;
    min-height: 102px;
    padding: 9px 0;
  }

  .cash-teaser-stack {
    grid-row: 1 / span 2;
    width: 92px;
    height: 58px;
  }

  .cash-teaser-note {
    inset: 8px 5px 4px;
  }

  .cash-teaser-note-front {
    padding: 7px;
  }

  .cash-teaser-note-front strong {
    font-size: 0.68rem;
  }

  .cash-teaser-note-front i {
    width: 13px;
    height: 13px;
    border-width: 1px;
  }

  .cash-teaser-copy h2 {
    font-size: 1rem;
  }

  .cash-teaser-button {
    grid-column: 2;
    min-height: 40px;
    padding: 7px 10px;
    gap: 8px;
    font-size: 0.72rem;
  }

  .cash-teaser-arrow {
    transform: scale(0.82);
  }

  .ad-slot-gallery {
    min-height: 210px;
    margin: 12px 0 16px;
  }

  .ad-slot-footer {
    min-height: 180px;
  }

  .quick-pairs {
    overflow: hidden;
    padding: 12px;
  }

  .quick-pair-list {
    grid-auto-columns: minmax(205px, 82%);
    grid-template-columns: none;
    grid-auto-flow: column;
    overflow-x: auto;
    padding: 2px 3px 7px;
    scroll-snap-type: x proximity;
  }

  .quick-pair-button {
    scroll-snap-align: start;
  }
}

@media (max-width: 440px) {
  .counter-destination {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coin-face,
  .banknote,
  .note-artwork,
  .conversion-sticky,
  .note-pattern::after,
  .cash-teaser-note,
  .cash-teaser-button,
  .cash-teaser-arrow {
    transition: none;
  }

  .coin-card:hover .coin-face {
    transform: translateY(var(--coin-offset, 0)) rotate(var(--coin-tilt, 0deg));
  }

  .banknote-card.is-note-tapped .banknote,
  .banknote-card.is-note-tapped .note-pattern::after,
  .banknote-card.is-note-tapped .conversion-sticky,
  .coin-card.is-coin-tapped .coin-face,
  .coin-card.is-coin-tapped .coin-spark,
  .coin-card.is-coin-tapped .coin-sticky {
    animation: none;
  }

  .bill-calculator.is-updating .bill-result-main strong,
  .bill-calculator.is-updating .cash-stack-group,
  .rate-passport.is-stamped {
    animation: none;
  }
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 14px 28px;
  width: min(calc(100% - 48px), 1392px);
  margin: 28px auto 0;
  padding: 22px 4px 30px;
  align-items: center;
  border-top: 2px solid rgba(24, 25, 31, 0.72);
}

.site-footer > div {
  display: grid;
  gap: 2px;
}

.site-footer > div strong {
  font-size: 1rem;
  font-weight: 950;
}

.site-footer > div span,
.site-footer small {
  color: var(--muted);
  line-height: 1.4;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 18px;
}

.site-footer a {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.site-footer a:hover {
  color: #087d83;
}

.site-footer small {
  grid-column: 1 / -1;
  font-size: 0.72rem;
}

.legal-shell {
  width: min(calc(100% - 32px), 940px);
  margin: 0 auto;
  padding: 24px 0 48px;
}

.policy-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 8px 0 22px;
}

.policy-brand {
  display: inline-flex;
  align-items: baseline;
  min-height: 44px;
  gap: 6px;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 950;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.policy-brand span {
  padding: 3px 5px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: #ffe36e;
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 0.62rem;
}

.policy-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.policy-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
  text-underline-offset: 4px;
}

.policy-nav a:hover {
  color: #07696f;
}

.policy-nav .policy-tool-link {
  border: 1px solid rgba(23, 35, 33, 0.76);
  border-radius: 6px;
  background: #f6d269;
  color: #172321;
  text-decoration: none;
  box-shadow: 2px 2px 0 rgba(23, 35, 33, 0.82);
}

.policy-nav .policy-tool-link:hover {
  background: #ffe18a;
  color: #172321;
  transform: translateY(-1px);
}

.policy-nav .policy-tool-link:active {
  box-shadow: 1px 1px 0 rgba(23, 35, 33, 0.82);
  transform: translateY(1px);
}

.legal-page {
  padding: clamp(22px, 5vw, 54px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(rgba(24, 25, 31, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 25, 31, 0.022) 1px, transparent 1px),
    rgba(255, 253, 248, 0.94);
  background-size: 30px 30px;
  box-shadow: var(--shadow);
}

.legal-page-header {
  display: grid;
  gap: 8px;
  padding-bottom: 24px;
  border-bottom: 2px solid rgba(24, 25, 31, 0.76);
}

.legal-page h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.7rem);
  line-height: 0.98;
}

.legal-page-header > p {
  max-width: 65ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.legal-updated {
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.draft-note {
  margin: 22px 0 0;
  padding: 13px 15px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #fff1ad;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.45;
}

.policy-contents {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 12px 20px;
  align-items: start;
  margin-top: 22px;
  padding: 16px 18px;
  border-left: 5px solid #26c7d3;
  background: rgba(229, 247, 244, 0.72);
}

.policy-contents > strong {
  padding-top: 9px;
  font-size: 0.84rem;
  text-transform: uppercase;
}

.policy-contents > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.policy-contents a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 4px;
  color: #07696f;
  font-size: 0.84rem;
  font-weight: 800;
  text-underline-offset: 3px;
}

.policy-contents a:hover {
  background: rgba(255, 255, 255, 0.72);
}

.legal-content {
  display: grid;
  gap: 26px;
  padding-top: 30px;
}

.legal-content section {
  display: grid;
  gap: 10px;
}

.legal-content h2 {
  margin: 0;
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  line-height: 1.1;
}

.legal-content p,
.legal-content li,
.legal-content address {
  margin: 0;
  color: #3f4550;
  font-size: 0.94rem;
  line-height: 1.65;
}

.legal-content p,
.legal-content ul,
.legal-content address {
  max-width: 72ch;
}

.legal-content ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
}

.legal-content a {
  color: #07696f;
  font-weight: 800;
  text-underline-offset: 3px;
}

.legal-content address {
  font-style: normal;
}

.policy-table-wrap {
  overflow-x: auto;
}

.policy-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.policy-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.62);
}

.policy-table th,
.policy-table td {
  padding: 11px 12px;
  border: 1px solid rgba(24, 25, 31, 0.16);
  color: #3f4550;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
}

.policy-table th {
  background: rgba(38, 199, 211, 0.11);
  color: var(--ink);
  font-weight: 950;
}

.contact-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.contact-option {
  display: grid;
  gap: 5px;
  min-height: 132px;
  padding: 18px;
  border-left: 5px solid #26c7d3;
  background: rgba(255, 255, 255, 0.66);
  color: var(--ink);
  text-decoration: none;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.contact-option:nth-child(2n) {
  border-left-color: #ff7d6e;
}

.contact-option strong {
  font-size: 0.9rem;
}

.contact-option > span:last-child {
  color: #52605d;
  font-size: 0.86rem;
  line-height: 1.5;
}

.contact-option .contact-address {
  color: #07696f;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.contact-option:hover {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 24px rgba(23, 35, 33, 0.1);
  transform: translateY(-2px);
}

.site-footer a[aria-current="page"] {
  color: #07696f;
  text-decoration-thickness: 3px;
}

@media (max-width: 620px) {
  .site-footer {
    grid-template-columns: 1fr;
    width: calc(100% - 24px);
    padding-bottom: 24px;
  }

  .site-footer nav {
    justify-content: flex-start;
  }

  .legal-shell {
    width: min(calc(100% - 24px), 940px);
    padding-top: 12px;
  }

  .policy-header {
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .policy-brand img {
    width: min(100%, 202px);
  }

  .policy-nav {
    margin-left: auto;
  }

  .policy-nav a {
    padding-inline: 9px;
    font-size: 0.76rem;
  }

  .legal-page {
    padding: 22px 16px;
  }

  .policy-contents {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .policy-contents > strong {
    padding: 0 8px;
  }

  .policy-contents > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }

  .policy-contents a {
    padding-inline: 8px;
  }

  .contact-options {
    grid-template-columns: 1fr;
  }

  .contact-option {
    min-height: 0;
  }

  .policy-table {
    min-width: 0;
    border-collapse: separate;
    background: transparent;
  }

  .policy-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .policy-table tbody,
  .policy-table tr,
  .policy-table td {
    display: block;
    width: 100%;
  }

  .policy-table tr {
    margin-bottom: 12px;
    border: 1px solid rgba(24, 25, 31, 0.16);
    border-left: 5px solid #26c7d3;
    background: rgba(255, 255, 255, 0.72);
  }

  .policy-table tr:nth-child(2n) {
    border-left-color: #ff7d6e;
  }

  .policy-table td {
    display: grid;
    grid-template-columns: minmax(82px, 0.72fr) minmax(0, 1.45fr);
    gap: 12px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid rgba(24, 25, 31, 0.12);
  }

  .policy-table td:last-child {
    border-bottom: 0;
  }

  .policy-table td::before {
    color: #7f302c;
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
  }
}

@media (max-width: 430px) {
  .policy-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .policy-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-left: 0;
  }

  .policy-nav a,
  .policy-nav .policy-tool-link {
    width: 100%;
    justify-content: center;
  }
}

/* Shared brand layer: a compact identity system that keeps the converter first. */
:root {
  --brand-red: #f33c31;
  --brand-teal: #26c7d3;
  --brand-yellow: #ffd12e;
  --brand-ink: #05060a;
}

.main-site-header {
  display: flex;
  width: min(100%, 1440px);
  min-height: 68px;
  margin: 0 auto 12px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 3px solid var(--brand-ink);
}

.main-site-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--brand-ink);
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.main-site-brand img {
  width: 38px;
  height: 38px;
}

.main-site-header nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.main-site-header nav a {
  color: var(--brand-ink);
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  text-underline-offset: 4px;
}

.main-site-header nav a:hover,
.main-site-header nav a:focus-visible {
  text-decoration: underline;
}

.main-site-header nav a[href="guides.html"],
.main-site-header nav a[aria-current="page"] {
  padding: 7px 10px;
  border: 2px solid var(--brand-ink);
  background: var(--brand-yellow);
  box-shadow: 3px 3px 0 var(--brand-ink);
}

.intro {
  grid-template-columns: minmax(280px, 0.75fr) minmax(300px, 1.25fr);
  align-items: center;
}

.brand-line {
  width: min(100%, 380px);
  min-height: 250px;
}

.intro-kicker {
  display: block;
  margin-bottom: 11px;
  color: var(--brand-red);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intro-copy h1 {
  font-size: 4.6rem;
}

.workspace {
  border: 2px solid var(--brand-ink);
  box-shadow: 8px 9px 0 var(--brand-ink);
  backdrop-filter: none;
}

.destination-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 26px;
  align-items: center;
  padding: 24px;
  border: 3px solid var(--brand-ink);
  background: linear-gradient(145deg, #fff 0%, #e6f7ff 100%);
  box-shadow: 6px 7px 0 var(--brand-ink);
}

.destination-spotlight-copy {
  display: grid;
  gap: 8px;
}

.destination-spotlight-copy h2,
.destination-spotlight-copy p {
  max-width: 620px;
  margin: 0;
}

.destination-spotlight-copy h2 {
  font-size: 2.4rem;
  line-height: 1.02;
}

.destination-spotlight-copy p {
  color: var(--muted);
  line-height: 1.5;
}

.destination-spotlight-card {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 14px;
  border: 2px solid var(--brand-ink);
  background: #fff;
  color: var(--brand-ink);
  text-decoration: none;
  box-shadow: 4px 5px 0 var(--brand-ink);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.destination-spotlight-card:hover,
.destination-spotlight-card:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 7px 0 var(--brand-ink);
}

.destination-spotlight-card > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.destination-spotlight-card strong {
  font-size: 1rem;
  font-weight: 950;
}

.destination-spotlight-card small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.destination-spotlight-card em {
  color: var(--brand-red);
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 950;
}

.destination-spotlight-logo {
  width: 100px;
  max-height: 82px;
  object-fit: contain;
  object-position: center;
}

.destination-spotlight-directory {
  display: grid;
  width: 92px;
  height: 76px;
  place-content: center;
  justify-items: center;
  border: 3px solid var(--brand-ink);
  background:
    linear-gradient(135deg, transparent 48%, rgba(5, 6, 10, 0.12) 49% 51%, transparent 52%),
    var(--brand-yellow);
  box-shadow: 3px 4px 0 var(--brand-ink);
  transform: rotate(-3deg);
}

.destination-spotlight-directory b {
  font-size: 2rem;
  line-height: 0.9;
}

.destination-spotlight-directory i {
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.guides-shell {
  max-width: 1240px;
}

.guides-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.58fr);
  gap: 32px;
  align-items: center;
  margin: 14px 0 26px;
  padding: 34px;
  overflow: hidden;
  border: 3px solid var(--brand-ink);
  background:
    linear-gradient(rgba(5, 6, 10, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 6, 10, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, #fff1b6, #e4f8fa 56%, #ffd8cd);
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: 8px 9px 0 var(--brand-ink);
}

.guides-hero-copy {
  display: grid;
  justify-items: start;
}

.guides-hero h1 {
  max-width: 650px;
  margin: 0;
  font-size: 4rem;
  line-height: 0.96;
}

.guides-hero-copy > p {
  max-width: 610px;
  margin: 17px 0 21px;
  color: #3f4550;
  font-size: 1.06rem;
  line-height: 1.55;
}

.guides-tool-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 10px 14px;
  border: 2px solid var(--brand-ink);
  background: #fff;
  box-shadow: 4px 4px 0 var(--brand-ink);
  color: var(--brand-ink);
  font-size: 0.84rem;
  font-weight: 950;
  text-decoration: none;
}

.guides-tool-link:hover,
.guides-tool-link:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--brand-ink);
}

.guides-hero-passport {
  display: grid;
  width: min(100%, 260px);
  min-height: 245px;
  justify-self: center;
  align-content: center;
  gap: 10px;
  padding: 22px;
  border: 3px solid var(--brand-ink);
  background: var(--brand-red);
  box-shadow: 8px 9px 0 var(--brand-ink);
  color: #fff;
  transform: rotate(3deg);
}

.passport-stamp-label {
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.guides-hero-passport strong {
  font-size: 2.1rem;
  line-height: 0.9;
  text-transform: uppercase;
  -webkit-text-stroke: 1px var(--brand-ink);
  text-shadow: 3px 3px 0 var(--brand-ink);
}

.guides-hero-passport i {
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.3;
}

.guide-directory {
  display: grid;
  gap: 22px;
  padding: 30px 0 10px;
}

.guide-directory-heading {
  display: flex;
  gap: 28px;
  align-items: end;
  justify-content: space-between;
}

.guide-directory-heading h2,
.guide-directory-heading p {
  margin: 0;
}

.guide-directory-heading h2 {
  font-size: 2rem;
  line-height: 1.04;
}

.guide-directory-heading p {
  max-width: 420px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.country-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.country-guide-card {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  gap: 14px;
  min-height: 138px;
  align-items: center;
  padding: 15px;
  border: 2px solid var(--brand-ink);
  background: #fff;
  color: var(--brand-ink);
}

a.country-guide-card {
  box-shadow: 4px 5px 0 var(--brand-ink);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

a.country-guide-card:hover,
a.country-guide-card:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 7px 0 var(--brand-ink);
}

.country-guide-japan {
  grid-column: 1 / -1;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  border-width: 3px;
  background: linear-gradient(135deg, #fff4c6, #f4fbff);
}

.country-guide-japan img {
  width: 166px;
  max-height: 96px;
  object-fit: contain;
}

.country-guide-copy {
  display: grid;
  gap: 5px;
}

.country-guide-copy strong {
  font-size: 1.2rem;
  font-weight: 950;
}

.country-guide-copy small {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.country-guide-symbol {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 3px solid var(--brand-ink);
  background: var(--brand-teal);
  box-shadow: 3px 3px 0 var(--brand-ink);
  font-size: 1.35rem;
  font-weight: 950;
  transform: rotate(-3deg);
}

.country-guide-card-next:nth-child(3n) .country-guide-symbol {
  background: var(--brand-yellow);
  transform: rotate(3deg);
}

.country-guide-card-next:nth-child(4n) .country-guide-symbol {
  background: var(--brand-red);
  color: #fff;
  transform: rotate(-2deg);
}

.guide-availability {
  grid-column: 2;
  color: #555b68;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.country-guide-japan .guide-availability {
  grid-column: auto;
  color: var(--brand-red);
}

.guide-availability b {
  margin-left: 4px;
  font-size: 1rem;
}

.destination-spotlight-art {
  display: grid;
  width: 68px;
  height: 68px;
  place-content: center;
  justify-items: center;
  border: 3px solid var(--brand-ink);
  background: var(--brand-red);
  color: #fff;
  box-shadow: 3px 4px 0 var(--brand-ink);
  transform: rotate(-4deg);
}

.destination-spotlight-art b {
  font-size: 1.8rem;
  line-height: 0.9;
}

.destination-spotlight-art i {
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.08em;
}

@media (max-width: 700px) {
  .main-site-header {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 12px;
  }

  .main-site-header nav {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .main-site-header nav a {
    font-size: 0.7rem;
  }

  .intro {
    grid-template-columns: 1fr;
  }

  .brand-line {
    width: min(100%, 300px);
    min-height: 198px;
    margin: 0 auto;
  }

  .intro-copy h1 {
    font-size: 2.6rem;
  }

  .destination-spotlight {
    grid-template-columns: 1fr;
  }

  .destination-spotlight {
    padding: 18px;
  }

  .destination-spotlight-copy h2 {
    font-size: 1.75rem;
  }

  .destination-spotlight-card {
    grid-template-columns: 88px minmax(0, 1fr) auto;
  }

  .destination-spotlight-logo {
    width: 82px;
  }

  .guides-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 18px;
  }

  .guides-hero h1 {
    font-size: 2.55rem;
  }

  .guides-hero-passport {
    min-height: 180px;
    margin-top: 4px;
    padding: 18px;
    justify-self: start;
  }

  .guide-directory-heading {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }

  .country-guide-grid {
    grid-template-columns: 1fr;
  }

  .country-guide-japan {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .country-guide-japan img {
    width: 84px;
    max-height: 76px;
  }

  .country-guide-japan .guide-availability {
    grid-column: 2;
  }
}

.country-guide-directory-groups {
  display: grid;
  gap: 48px;
}

.country-guide-group {
  display: grid;
  gap: 20px;
  padding-top: 28px;
  border-top: 3px solid var(--brand-ink);
}

.country-guide-group:first-child {
  padding-top: 0;
  border-top: 0;
}

.country-guide-group-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.country-guide-group-heading h3,
.country-guide-group-heading p {
  margin: 0;
}

.country-guide-group-heading h3 {
  margin-top: 5px;
  font-size: 1.9rem;
  line-height: 1.04;
}

.country-guide-group-heading p {
  max-width: 470px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.country-guide-card {
  border-radius: 6px;
  background:
    linear-gradient(135deg, #fff 0 68%, var(--directory-soft, #e4f8fa) 150%);
}

.country-guide-symbol,
.country-guide-card-next:nth-child(3n) .country-guide-symbol,
.country-guide-card-next:nth-child(4n) .country-guide-symbol {
  display: grid;
  background: var(--directory-soft, var(--brand-teal));
  color: var(--brand-ink);
  grid-template-rows: 1fr auto;
  transform: rotate(-3deg);
}

.country-guide-symbol b {
  align-self: end;
  font-size: 1.35rem;
  line-height: 1;
}

.country-guide-symbol small {
  margin-bottom: 8px;
  color: var(--directory-accent, #216d76);
  font-size: 0.52rem;
  font-weight: 950;
  line-height: 1;
}

.country-guide-status {
  width: fit-content;
  padding: 3px 6px;
  border: 1px solid var(--brand-ink);
  background: var(--directory-soft, #e4f8fa);
  color: var(--brand-ink);
  font-size: 0.54rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.country-guide-grid.is-euro-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.country-guide-grid.is-euro-grid .country-guide-card {
  min-height: 124px;
  grid-template-columns: 78px minmax(0, 1fr);
}

.country-guide-grid.is-euro-grid .country-guide-symbol {
  width: 62px;
  height: 62px;
}

.euro-directory-feature {
  display: grid;
  min-height: 220px;
  padding: 18px 26px 18px 18px;
  overflow: hidden;
  border: 3px solid var(--brand-ink);
  border-radius: 7px;
  align-items: center;
  gap: 26px;
  grid-template-columns: 190px minmax(0, 1fr);
  background:
    linear-gradient(135deg, #fff7cf, #dff7f4 56%, #dfeaff);
  box-shadow: 7px 8px 0 var(--brand-ink);
  color: var(--brand-ink);
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.euro-directory-feature:hover,
.euro-directory-feature:focus-visible {
  box-shadow: 9px 10px 0 var(--brand-ink);
  transform: translate(-2px, -2px);
}

.euro-directory-feature img {
  width: 184px;
  height: 184px;
  border: 3px solid var(--brand-ink);
  border-radius: 6px;
  object-fit: cover;
  transform: rotate(-2deg);
}

.euro-directory-feature > span {
  display: grid;
  justify-items: start;
}

.euro-directory-feature small {
  color: var(--brand-red);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.euro-directory-feature strong {
  margin-top: 5px;
  font-size: 2rem;
  line-height: 1.02;
}

.euro-directory-feature p {
  max-width: 670px;
  margin: 10px 0 15px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.euro-directory-feature > span > b {
  font-size: 0.75rem;
  text-transform: uppercase;
}

.euro-directory-feature i {
  margin-left: 5px;
  font-size: 1rem;
  font-style: normal;
}

@media (max-width: 980px) {
  .country-guide-grid.is-euro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .country-guide-directory-groups {
    gap: 38px;
  }

  .country-guide-group-heading {
    align-items: start;
    flex-direction: column;
    gap: 9px;
  }

  .country-guide-grid.is-euro-grid {
    grid-template-columns: 1fr;
  }

  .euro-directory-feature {
    min-height: 0;
    padding: 16px;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 14px;
  }

  .euro-directory-feature img {
    width: 90px;
    height: 90px;
  }

  .euro-directory-feature strong {
    font-size: 1.25rem;
  }

  .euro-directory-feature p {
    display: none;
  }
}

/* Brand lockup: the same wordmark works as the homepage signature and site-wide anchor. */
.brand-line {
  width: min(100%, 440px);
  min-height: 256px;
}

.brand-line .brand-logo-svg {
  display: none;
}

.brand-line::before {
  display: none;
}

.hero-travel-illustration {
  position: relative;
  width: min(100%, 400px);
  height: 242px;
  margin: 0 auto;
}

.travel-route {
  position: absolute;
  top: 42px;
  right: 6px;
  width: 128px;
  height: 144px;
  border-top: 4px dashed var(--brand-ink);
  border-right: 4px dashed var(--brand-ink);
  border-radius: 0 46px 0 0;
  opacity: 0.78;
  transform: rotate(11deg);
}

.travel-route::after {
  position: absolute;
  right: -11px;
  bottom: -12px;
  width: 20px;
  height: 20px;
  border-right: 5px solid var(--brand-ink);
  border-bottom: 5px solid var(--brand-ink);
  content: "";
  transform: rotate(35deg);
}

.travel-note {
  position: absolute;
  display: block;
  border: 3px solid var(--brand-ink);
  box-shadow: 5px 6px 0 var(--brand-ink);
}

.travel-note::before,
.travel-note::after {
  position: absolute;
  content: "";
}

.travel-note::before {
  inset: 10px;
  border: 2px solid rgba(5, 6, 10, 0.38);
}

.travel-note::after {
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  border: 3px solid rgba(5, 6, 10, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transform: translate(-50%, -50%);
}

.travel-note-back {
  top: 57px;
  left: 20px;
  width: 194px;
  height: 122px;
  background: linear-gradient(135deg, #fff7c8, #e0bd5e);
  transform: rotate(-12deg);
}

.travel-note-middle {
  top: 22px;
  left: 132px;
  width: 196px;
  height: 124px;
  background: linear-gradient(135deg, #dff8f6, #40bfc9);
  transform: rotate(7deg);
}

.travel-note-front {
  top: 84px;
  left: 82px;
  display: flex;
  width: 220px;
  height: 138px;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #f8ead5, #c8dda7 54%, #73a86d);
  transform: rotate(-2deg);
}

.travel-note-front b,
.travel-note-front i {
  position: relative;
  z-index: 2;
}

.travel-note-front b {
  font-size: 3.1rem;
  font-weight: 950;
  line-height: 1;
}

.travel-note-front i {
  width: 34px;
  height: 34px;
  border: 3px solid var(--brand-ink);
  border-radius: 50%;
  background: var(--brand-yellow);
}

.travel-passport {
  position: absolute;
  top: 24px;
  left: 17px;
  display: grid;
  width: 76px;
  height: 93px;
  place-content: center;
  gap: 2px;
  border: 3px solid var(--brand-ink);
  background: var(--brand-red);
  box-shadow: 4px 5px 0 var(--brand-ink);
  color: #fff;
  transform: rotate(-8deg);
}

.travel-passport b,
.travel-passport i {
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.travel-passport i {
  padding-top: 4px;
  border-top: 2px solid rgba(255, 255, 255, 0.72);
  font-size: 0.58rem;
  text-align: center;
}

.travel-coin {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 3px solid var(--brand-ink);
  border-radius: 50%;
  box-shadow: 3px 4px 0 var(--brand-ink);
  color: var(--brand-ink);
  font-size: 1rem;
  font-weight: 950;
}

.travel-coin-one {
  right: 36px;
  bottom: 3px;
  width: 58px;
  height: 58px;
  background: #d7e0e2;
  transform: rotate(8deg);
}

.travel-coin-two {
  right: 2px;
  bottom: 41px;
  width: 42px;
  height: 42px;
  background: #e5bc53;
  font-size: 0.78rem;
  transform: rotate(-7deg);
}

.main-site-brand {
  gap: 0;
}

.main-site-brand img {
  width: 268px;
  height: auto;
}

.policy-brand {
  align-items: center;
}

.policy-brand img {
  display: block;
  width: 252px;
  height: auto;
}

.site-footer > div:first-child::before {
  display: block;
  width: 210px;
  height: 36px;
  background: url("assets/cashbycountry-logo-modern.png") left center / contain no-repeat;
  content: "";
}

.site-footer > div:first-child strong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .brand-line {
    width: min(100%, 350px);
    min-height: 212px;
  }

  .hero-travel-illustration {
    height: 205px;
    transform: scale(0.86);
    transform-origin: left top;
  }

  .main-site-brand img {
    width: 220px;
  }

  .policy-brand img {
    width: 202px;
  }
}