:root {
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: #101112;
  color: #f6f4ef;
  --gold: #f5ce78;
  --line: #353534;
  --sub: #bab8b1;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, summary { font: inherit; cursor: pointer; }
button { color: inherit; }
:focus-visible { outline: 3px solid #ffe5a6; outline-offset: 4px; }
.shell { width: min(1152px, calc(100% - 72px)); margin: auto; padding-bottom: 32px; }
.topbar, nav, .wordmark, .section-head, .dialog-head, .dialog-total, li, .count-line {
  display: flex; align-items: center; justify-content: space-between;
}
.topbar { min-height: 72px; border-bottom: 1px solid var(--line); }
.wordmark { gap: 0; font-weight: 850; letter-spacing: -.075em; font-size: 25px; }
.wordmark span { color: var(--gold); }
.wordmark i { width: 23px; height: 22px; margin-right: 9px; transform: skewX(-20deg); background: repeating-linear-gradient(90deg,var(--gold) 0 5px,transparent 5px 8px); }
nav { gap: 28px; font-size: 13px; color: var(--sub); }
nav a:hover { color: var(--gold); }
.hero { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; padding-block: 25px 30px; }
.hero-copy { z-index: 1; }
h1,h2,h3,p { margin: 0; }
h1 { font-size: clamp(48px,5.65vw,82px); line-height: .99; letter-spacing: -.063em; font-weight: 720; }
h1 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--gold); }
.hero-copy p { max-width: 435px; margin: 20px 0 23px; font-size: 16px; line-height: 1.54; color: var(--sub); }
.gold-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; padding: 13px 19px; min-height: 44px; border: 0; border-radius: 9px; color: #251d0c; background: var(--gold); font-size: 14px; font-weight: 700; transition: background .2s, transform .2s; }
.gold-button:hover { background: #ffe09a; }
.gold-button:active { transform: scale(.98); }
.gold-button span { font-size: 20px; line-height: 1; }
.scene { position: relative; display: grid; place-items: center; aspect-ratio: 1.53; isolation: isolate; pointer-events: none; }
.scene::before { content: ''; position: absolute; inset: -6% -4%; background: radial-gradient(ellipse at 53% 54%,#8d653531,transparent 65%); }
.card-stack { position: relative; width: 70%; aspect-ratio: 1.65; perspective: 900px; }
.plastic { position: absolute; inset: 0; border-radius: 6% / 10%; }
.back-card { transform: translate(5%,-8%) rotate(12deg) rotateY(-16deg); border: 1px solid #797263; background: repeating-linear-gradient(115deg,transparent 0 3px,#ffffff08 3px 4px),linear-gradient(100deg,#252628,#4a4947 62%,#272829); box-shadow: 0 16px 30px #0006; }
.front-card { overflow: hidden; color: #443015; background: linear-gradient(113deg,#c7974b 0%,#ffe6a9 28%,#d1a354 57%,#ffdd97 85%,#c99e60); border: 1px solid #fce3ad; box-shadow: inset 1px 1px 2px #fff9,0 3px 0 #98794c,0 19px 27px #0007; transform: translate(-4%,6%) rotate(-11deg) rotateY(-13deg); }
.front-card::after { content: ''; position: absolute; inset: -70%; background: linear-gradient(115deg,transparent 42%,#fff7 50%,transparent 57%); transform: translateX(-70%); }
.front-card canvas { width: 100%; height: 100%; position: absolute; inset: 0; }
.card-brand,.card-caption,.chip,.card-symbol { position: absolute; }
.card-brand { left: 8%; top: 10%; font-size: clamp(18px,2.5vw,34px); font-weight: 800; letter-spacing: -.08em; }
.chip { left: 9%; top: 44%; width: 14%; height: 19%; border-radius: 17%; border: 1px solid #91713e; background: linear-gradient(130deg,#b78b46,#fff0b6,#ad8743); overflow: hidden; }
.chip i { display: block; margin: auto; width: 48%; height: 100%; border-inline: 1px solid #8c724b; border-radius: 30%; }
.chip::before,.chip::after { content: ''; position: absolute; width: 100%; height: 1px; background: #8c724b; left: 0; top: 30%; }
.chip::after { top: 68%; }
.card-caption { left: 9%; bottom: 12%; font-size: clamp(7px,.8vw,10px); font-weight: 650; letter-spacing: .17em; }
.card-symbol { right: 10%; bottom: 12%; width: 8%; aspect-ratio: 1; border-radius: 50%; background: #4c3a20; box-shadow: 13px 0 0 #735b38; }
#offers { border-top: 1px solid var(--line); padding-top: 26px; scroll-margin-top: 18px; }
h2 { font-size: clamp(25px,2.6vw,36px); letter-spacing: -.052em; line-height: 1.15; }
.section-head { margin-bottom: 18px; gap: 10px; }
.section-head span { color: var(--sub); font-size: 13px; }
.workspace { display: grid; grid-template-columns: minmax(0,2.4fr) minmax(245px,1fr); gap: 18px; align-items: start; }
#bank-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.bank-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 132px; padding: 15px 17px; background: #1c1d1f; border: 1px solid #343536; border-radius: 13px; text-align: left; transition: background .2s,border-color .2s,translate .2s; }
.bank-mark { display: block; width: 30px; height: 30px; border-radius: 8px; margin-bottom: 7px; object-fit: contain; }
.bank-name { font-size: 14px; color: #d1d0cb; }
.bank-pay { font-size: clamp(22px,2vw,29px); letter-spacing: -.05em; }
.check { position: absolute; right: 14px; top: 16px; border: 1px solid #535456; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; }
.check::after { content: '+'; line-height: 1; color: #bdbdbb; }
.bank-tile[aria-pressed=true] { background: #302b21; border-color: #b49a62; }
.bank-tile[aria-pressed=true] .check { background: var(--gold); border-color: var(--gold); }
.bank-tile[aria-pressed=true] .check::after { content: '✓'; color: #211e17; font-size: 13px; }
@media(hover:hover) { .bank-tile:hover { border-color: #968563; translate: 0 -2px; } }
.receipt { position: sticky; top: 16px; padding: 24px; border: 1px solid #574936; border-radius: 15px; background: linear-gradient(145deg,#332e24,#201f1c 75%); }
.receipt h3 { font-size: 16px; font-weight: 550; }
.amount { font-size: clamp(38px,3.9vw,58px); font-weight: 650; color: var(--gold); letter-spacing: -.065em; padding: 8px 0 18px; font-variant-numeric: tabular-nums; }
.meter { display: flex; gap: 4px; }
.meter i { flex: 1; height: 4px; border-radius: 3px; background: #504c42; transition: background .2s; }
.meter .filled { background: var(--gold); }
.count-line { margin: 12px 0 22px; color: var(--sub); font-size: 12px; }
.count-line b { color: #ede9de; }
.receipt .gold-button,dialog .gold-button { width: 100%; }
small,.fine,#terms p { display: block; font-size: 12px; line-height: 1.5; color: var(--sub); }
small { margin-top: 14px; }
#form-message:not(:empty) { margin-top: 10px; font-size: 13px; color: var(--gold); }
#terms { border-block: 1px solid var(--line); padding: 18px 0; margin-top: 24px; }
#terms p { margin-top: 12px; max-width: 680px; font-size: 14px; }
dialog { width: min(440px,92vw); max-height: 86vh; border: 1px solid #635744; border-radius: 18px; padding: 24px; background: #202022; color: inherit; }
dialog::backdrop { background: #08090bd9; }
dialog h2 { font-size: 28px; }
.close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: 24px; }
ul { list-style: none; padding: 0; }
li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.dialog-total strong { font-size: 24px; color: var(--gold); }
.fine { margin: 14px 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@keyframes float-cards { 50% { transform: translateY(-6px) rotate(1.3deg); } }
@keyframes glint { 0%,15% { transform: translateX(-65%); } 85%,100% { transform: translateX(65%); } }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } }
@media(prefers-reduced-motion:no-preference) {
  html { scroll-behavior: smooth; }
  .card-stack { animation: float-cards 4.5s ease-in-out 1; }
  .front-card::after { animation: glint 2.6s .5s both; }
  .hero-copy,.bank-tile,dialog[open] { animation: enter .48s var(--delay,0ms) both; }
}
@media(max-width:860px) {
  .shell { width: calc(100% - 40px); }
  #bank-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero { padding-block: 30px; }
}
@media(max-width:650px) {
  .shell { width: calc(100% - 32px); padding-bottom: 114px; }
  .topbar { min-height: 55px; }
  nav { gap: 15px; font-size: 12px; }
  .hero { grid-template-columns: 1fr; padding-block: 26px 14px; }
  h1 { font-size: clamp(45px,11vw,64px); }
  .hero-copy p { font-size: 14px; margin: 12px 0 16px; }
  .scene { width: min(84%,350px); height: 140px; aspect-ratio: auto; margin: 12px auto 0; }
  .card-stack { width: 62%; }
  .workspace { display: block; }
  #offers { padding-top: 18px; }
  .bank-tile { min-height: 119px; padding: 12px 14px; }
  .receipt { position: fixed; z-index: 4; top: auto; bottom: 0; left: 0; right: 0; border-radius: 14px 14px 0 0; padding: 10px 16px max(10px,env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 10px; box-shadow: 0 -5px 24px #0006; }
  .receipt h3 { font-size: 12px; }
  .amount { font-size: 30px; padding: 0; grid-column: 1; }
  .receipt .gold-button { grid-column: 2; grid-row: 1 / 3; gap: 12px; }
  .count-line,.meter { display: none; }
  .receipt small,.receipt #form-message { grid-column: 1 / -1; }
  .receipt small { margin-top: 3px; font-size: 10px; }
  .section-head span { font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) { *,*::after { transition: none!important; } }
@media(max-width:370px) {
  .shell { padding-bottom: calc(146px + env(safe-area-inset-bottom)); }
  .receipt .amount { font-size: 26px; white-space: nowrap; }
  .receipt .gold-button { padding-inline: 12px; }
}

/* The pointer tilts the deck; clicking turns only its front card. */
.scene { pointer-events: auto; perspective: 950px; }
.card-stack { transform-style: flat; isolation: isolate; }
.back-card { z-index: 0; }
.flip-stage { position: absolute; inset: 0; z-index: 1; perspective: 900px; pointer-events: none; }
.rotor, .flip-card {
  position: absolute;
  inset: 0;
  border-radius: 6% / 10%;
  transform: translate(-4%,6%) rotate(-11deg) rotateY(-13deg);
}
.rotor { transform-style: preserve-3d; pointer-events: none; }
.turned .rotor { transform: translate(-4%,6%) rotate(-11deg) rotateY(167deg); }
.flip-card { z-index: 2; border: 0; padding: 0; background: transparent; }
.flip-card::after {
  content: '⟳';
  position: absolute; right: 7%; top: 42%;
  width: 24px; height: 24px; line-height: 24px;
  color: #3c2d18; background: #ffe3a2cc; border: 1px solid #8c734d80;
  border-radius: 50%; font-size: 17px;
}
.front-card,.reverse-card { backface-visibility: hidden; }
.front-card { transform: none; }
.front-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at var(--light,30%) 15%,#fff9,transparent 60%);
  mix-blend-mode: soft-light;
}
.reverse-card {
  transform: rotateY(180deg); overflow: hidden; display: flex;
  flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: 5% 8%; color: #49371e; border: 1px solid #ebce8d;
  background: linear-gradient(122deg,#bf984e,#ffe5a5 44%,#c9a062);
  box-shadow: 0 2px 0 #967847,0 15px 22px #0005;
}
.magstripe { position: absolute; top: 11%; left: 0; right: 0; height: 18%; background: repeating-linear-gradient(#34312d 0 1px,#292725 1px 3px); }
.reverse-card span,.reverse-card small { font-size: clamp(9px,1vw,13px); font-weight: 600; }
.reverse-card strong { font-size: clamp(22px,3.5vw,50px); letter-spacing: -.055em; }
.reverse-card small { margin-top: 3px; color: #51412a; }

.delta {
  position: absolute; top: 17px; right: 42px; color: var(--gold);
  font-size: 12px; font-weight: 700; pointer-events: none;
}
.sparks {
  position: absolute; top: 14px; left: 50%; width: 0; height: 0;
  pointer-events: none; z-index: 1;
}
.sparks i {
  position: absolute; width: 5px; height: 9px;
  border-radius: 1px; background: #ffdf97;
}
.sparks i:nth-child(3n) { background: #b78b51; width: 4px; height: 6px; }
@keyframes scatter {
  0% { opacity: 0; transform: scale(.4); }
  12% { opacity: 1; }
  76% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.55); }
}
@keyframes delta-rise {
  0% { opacity: 0; transform: translateY(7px); }
  20%,72% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes check-pop { 45% { transform: scale(1.24) rotate(-8deg); } }
@keyframes foil-pulse { from { opacity: .85; scale: .05; } to { opacity: 0; scale: 2.5; } }
@media(prefers-reduced-motion:no-preference) {
  .card-stack {
    transform: rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
    transition: transform .22s ease-out;
  }
  .scene:hover .card-stack { animation: none; }
  .rotor { transition: transform .76s cubic-bezier(.22,.75,.23,1); }
  .delta { animation: delta-rise 1s both; }
  .bank-tile { isolation: isolate; overflow: hidden; }
  .bank-tile[aria-pressed=true]::before {
    content: ''; position: absolute; z-index: -1; inset: -30%;
    background: radial-gradient(ellipse,#d4ad6138,transparent 66%);
    transform-origin: 83% 28%; animation: foil-pulse .65s both;
  }
  .bank-tile[aria-pressed=true] .check { animation: check-pop .34s; }
  .sparks i { animation: scatter .9s cubic-bezier(.13,.7,.48,1) both; }
  dialog[open] li { animation: enter .3s both; }
  dialog[open] li:nth-child(n+2) { animation-delay: .055s; }
  dialog[open] li:nth-child(n+4) { animation-delay: .11s; }
}

.terms h2 { font-size: 24px; }
.terms details { margin-top: 16px; }
.terms summary { width: fit-content; color: var(--gold); }
.card-brand { font-size: clamp(15px,1.9vw,26px); }
#selection-dialog { background: #1b1c1d; padding: clamp(16px,4vw,28px); }
.printed-ticket {
  position: relative; margin: 20px 0; padding: 5px 18px 22px;
  color: #2a251a; background: linear-gradient(125deg,#fff1c9,#f0dfb5);
  border-radius: 3px 3px 0 0;
}
.printed-ticket::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 6px;
  background: linear-gradient(135deg,#f0dfb5 25%,transparent 25%) -5px 0 / 10px 10px,
              linear-gradient(225deg,#f0dfb5 25%,transparent 25%) -5px 0 / 10px 10px;
}
.printed-ticket li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; font-size: 14px; border-color: #ac965b44; }
.printed-ticket img { border-radius: 5px; }
.printed-ticket ul { margin: 4px 0 12px; }
.printed-ticket .dialog-total { gap: 8px; padding-top: 12px; border-top: 1px dashed #958354; }
.printed-ticket .dialog-total span { font-size: 12px; }
.printed-ticket .dialog-total strong { color: #31271a; white-space: nowrap; }
.dialog-close { display: block; margin: 5px auto 0; min-height: 40px; border: 0; background: none; color: var(--sub); font-size: 13px; }
#draft-panel[open] { display: grid; gap: 8px; margin-top: 18px; }
#draft-panel { margin-top: 12px; font-size: 13px; }
#draft-panel label { font-size: 13px; font-weight: 650; }
#tg-draft { width: 100%; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5; color: #eee; background: #131414; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
#draft-panel small { margin: 0; }
#copy-draft { border: 1px solid #6d6042; border-radius: 8px; min-height: 40px; background: transparent; color: var(--gold); }
#copy-status { font-size: 12px; color: var(--gold); }
@keyframes print-ticket {
  from { clip-path: inset(0 0 100%); transform: translateY(-6px); }
  to { clip-path: inset(0 0 -6px); transform: none; }
}
@media(prefers-reduced-motion:no-preference) {
  dialog[open] .printed-ticket { animation: print-ticket .64s cubic-bezier(.2,.7,.25,1) both; }
}
@media (max-width:420px) {
  .wordmark { font-size: 20px; }
  .topbar nav { gap: 10px; font-size: 11px; }
  .wordmark i { width: 17px; height: 17px; margin-right: 6px; }
  .receipt .gold-button { font-size: 12px; gap: 8px; }
}

.hero-copy strong { color: #f3d79b; font-weight: 650; white-space: nowrap; }
.hero-copy h1 { font-size: clamp(44px,5vw,72px); }
#offers .section-head { margin-bottom: 6px; }
.selection-hint { margin: 0 0 18px; color: var(--sub); font-size: 14px; line-height: 1.45; }
.terms .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; padding: 0; margin: 22px 0 25px; list-style: none; counter-reset: step; }
.steps li { display: block; padding: 0; border: 0; counter-increment: step; }
.steps li::before { content: counter(step,decimal-leading-zero); display: block; font: 15px Georgia,serif; color: var(--gold); margin-bottom: 8px; }
.terms .steps p { margin-top: 6px; }
.terms details { padding: 13px 0; border-top: 1px solid var(--line); margin: 0; }
.terms summary { line-height: 1.4; }
noscript a { text-decoration: underline; }
@media(max-width:650px) {
  .hero-copy h1 { font-size: clamp(38px,9vw,56px); }
  .receipt:not(.has-selection) { display: none; }
  .terms .steps { grid-template-columns: 1fr; gap: 17px; }
  .steps li { position: relative; padding-left: 32px; }
  .steps li::before { position: absolute; left: 0; top: 2px; }
}

/* Reading pages share the calculator's type, colours and navigation. */
.terms .guide-link { margin: 16px 0 23px; }
.guide-link a, .guide article a:not(.gold-button), .guide-crumb a { color: var(--gold); text-decoration: underline; text-underline-offset: .2em; }
.guide { max-width: 740px; margin: 36px auto 64px; }
.guide-crumb { display: block; font-size: 13px; margin-bottom: 22px; }
.guide article h1 { font-size: clamp(34px,5vw,58px); line-height: 1.06; }
.guide article h2 { margin: 30px 0 9px; font-size: clamp(22px,3vw,29px); }
.guide article p { line-height: 1.62; margin: 10px 0; color: #d2d1cb; }
.guide .example { padding: 15px 20px; background: #262521; border-left: 3px solid var(--gold); border-radius: 4px; }
.guide article .gold-button { margin-top: 16px; }