
:root{--maroon:var(--color-nayo-burgundy);--teal:var(--color-nayo-green);--yellow:var(--color-nayo-yellow);--blue:var(--color-nayo-blue);--paper:var(--color-nayo-white);--ink:var(--color-nayo-black)}*{box-sizing:border-box}body{margin:0;background:var(--paper);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}.screen{width:min(100%,390px);min-height:100dvh;margin:auto;background:var(--color-nayo-white);display:flex;flex-direction:column;box-shadow:0 0 30px #0000000b}.hero{background:var(--maroon);color:var(--color-nayo-white);padding:22px 22px 28px}.nav{display:flex;justify-content:space-between;align-items:center;font-size:13px}.nav button{background:none;border:0;color:var(--color-nayo-white);font:inherit;cursor:pointer}.nav .brand{font-size:11px;letter-spacing:1.4px;opacity:.8}.logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:40px;font-size:42px;font-weight:600;letter-spacing:-2px}.logo svg{width:32px;height:32px;fill:var(--color-nayo-white)}.logo .turn{width:36px;height:36px}.sub{text-align:center;font-size:11px;letter-spacing:2px;color:#e7d5d8;margin-top:8px}.main{padding:28px 20px 22px;flex:1;display:flex;flex-direction:column}.prompt{text-align:center;color:#797171;font-size:14px}.amount{display:flex;justify-content:center;align-items:baseline;gap:9px;color:var(--maroon);margin:13px 0 17px;font-weight:650;font-variant-numeric:tabular-nums}.amount .currency{font-size:25px;color:#827b7b}.amount .value{font-size:clamp(40px,11vw,52px);letter-spacing:-2px;overflow-wrap:anywhere}.pill{align-self:center;background:#f5f2f0;border-radius:50px;padding:9px 14px;color:#7c7371;font-size:11px;margin-bottom:26px}.primary{margin-top:17px;border:0;border-radius:12px;background:var(--maroon);color:var(--color-nayo-white);height:54px;font-size:16px;font-weight:650;cursor:pointer;width:100%}.primary:disabled{opacity:.45;cursor:not-allowed}.secure{display:flex;justify-content:center;align-items:center;gap:7px;color:#9b9592;font-size:11px;margin-top:17px}.footer{display:grid;grid-template-columns:repeat(3,1fr);margin-top:auto}.foot{height:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:var(--color-nayo-white);font-size:14px;font-weight:700;letter-spacing:.4px}.foot svg{width:22px;height:22px}.carry{background:var(--teal)}.tap{background:var(--yellow);color:var(--color-nayo-black)}.go{background:var(--blue)}.ready{display:none;text-align:center;background:#f5f2f0;border-radius:14px;padding:26px 16px;margin:8px 0 0}.ready .check{font-size:36px;color:var(--teal)}.ready h2{font-size:20px;margin:10px 0}.ready p{font-size:13px;color:#746b6b;line-height:1.5}.secondary{background:var(--color-nayo-white);border:1px solid #ddd3d0;border-radius:10px;padding:12px 22px;font-weight:600;color:var(--maroon);cursor:pointer}.screen.is-ready .entry{display:none}.screen.is-ready .ready{display:block}@media(min-width:500px){body{padding:28px}.screen{min-height:min(820px,calc(100dvh - 56px));border-radius:22px;overflow:hidden}.foot{height:10px}}@media(max-height:700px){.logo{margin-top:22px}.hero{padding-bottom:20px}.main{padding-top:20px}.pill{margin-bottom:18px}}

.result-main{justify-content:center;align-items:center;text-align:center;gap:0;padding:34px 24px 30px}.status-icon{width:94px;height:94px;border-radius:50%;display:grid;place-items:center;margin:0 auto 25px}.status-icon svg{width:48px;height:48px}.success-icon{background:#e7f3ef;color:#006a57}.failure-icon{background:#fae9e8;color:#b43b3b}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:750;color:#827b7b;margin:0 0 10px}.result-title{font-size:29px;letter-spacing:-.8px;line-height:1.2;margin:0;color:var(--ink)}.result-description{font-size:14px;color:#7b7372;line-height:1.6;max-width:290px;margin:12px auto 27px}.result-amount{width:100%;background:#f6f4f2;border-radius:15px;padding:23px 15px 21px;margin-bottom:18px}.result-amount .small{font-size:12px;color:#817977}.result-amount .large{font-size:44px;font-weight:700;color:var(--maroon);letter-spacing:-1.8px;margin:7px 0}.result-amount .detail{font-size:12px;color:#817977}.meta{width:100%;padding:4px 2px 20px}.meta-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;padding:10px 0;border-bottom:1px solid #eee9e7}.meta-row span:first-child{color:#8b8280}.meta-row span:last-child{font-weight:600;text-align:right}.result-actions{width:100%;margin-top:12px}.result-actions .primary{margin-top:0}.result-actions .secondary{width:100%;margin-top:10px;height:50px}.result-main .secure{margin-top:22px}.status-pill{display:inline-block;border-radius:30px;padding:6px 12px;font-size:11px;font-weight:700}.status-pill.success{background:#e5f3ed;color:#006b55}.status-pill.failure{background:#fceae8;color:#a43838}@media(max-height:740px){.result-main{padding-top:22px;padding-bottom:18px}.status-icon{width:72px;height:72px;margin-bottom:16px}.status-icon svg{width:38px;height:38px}.result-description{margin-bottom:18px}.result-amount{padding:15px;margin-bottom:12px}.result-amount .large{font-size:38px}.meta-row{padding:7px 0}.result-main .secure{margin-top:13px}}

[hidden]{display:none!important}.nav a{color:var(--color-nayo-white);text-decoration:none}.primary,.secondary{display:block;text-align:center;text-decoration:none;line-height:54px}.error{color:#a43838;font-size:14px}.amount input{width:100%;border:0;background:transparent;text-align:center;color:var(--maroon);font:inherit;font-size:48px;min-width:0}.nfc-icon{background:#f5f2f0;color:var(--maroon)}.meta-row span:last-child{overflow-wrap:anywhere;min-width:0}.connection{color:#a43838;text-align:center;font-size:13px}

/* Keep the desktop canvas light; burgundy fills safe areas on phones. */
html,body{background:var(--paper)}
@media(max-width:499px){html,body{background:var(--color-nayo-burgundy)}}
@media(max-width:499px){.screen{width:100%}}
.hero{padding-top:calc(22px + env(safe-area-inset-top))}
.footer{padding-bottom:env(safe-area-inset-bottom);background:var(--color-nayo-burgundy)}
@media(display-mode:standalone) and (max-width:499px){body{padding:0}.screen{min-height:100dvh;border-radius:0}}

.currency-entry{display:flex;flex-direction:column}.currency-entry .prompt{display:block}.currency-entry .pill{margin-bottom:12px}.currency-errors:empty{display:none}.currency-errors p{margin:0 0 12px}.currency-entry input:focus-visible{outline:2px solid var(--maroon);outline-offset:4px;border-radius:4px}

@media (min-width: 500px) {
  body {
    background-image: url("../images/nayo_streets.ce8568408fc8.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}
