/* UzaPay email-link pages: shared palette and layout with the email templates. */
:root {
  color-scheme: light;
  --canvas: #f8f8f4;
  --surface: #f3f5ef;
  --card: #ffffff;
  --header: #0c1510;
  --ink: #0e1511;
  --muted: #536158;
  --outline: #667269;
  --hairline: #dbe1da;
  --primary: #c8ff5f;
  --accent: #355c49;
  --critical: #b42318;
  --warning: #87600d;
  --info: #355c49;
  --interface: 'DM Sans', 'Segoe UI', Roboto, -apple-system,
    BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --heading: 'Space Grotesk', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas,
    'Liberation Mono', monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background: var(--canvas);
  color: var(--ink);
  font: 400 15px/1.6 var(--interface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main {
  width: 100%;
  min-width: 0;
  max-width: 600px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.brand-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 30px 40px;
  background: var(--header);
  color: #f7f9f4;
}
.brand-logo { display: block; width: 160px; max-width: 100%; height: auto; }
.brand-header .sub { color: #f7f9f4; font-size: 13px; }
.content { padding: 40px; }
.eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
h1 {
  margin: 0 0 14px;
  font-family: var(--heading);
  font-size: 30px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
p { margin: 0 0 16px; color: var(--muted); }
p.lead { color: var(--ink); font-size: 17px; line-height: 27px; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--header); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tick {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 0 24px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--header);
}
.tick svg { display: block; width: 26px; height: 26px; }
ol.steps { margin: 22px 0; padding: 0; list-style: none; counter-reset: step; }
ol.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 14px 34px;
  color: var(--ink);
  font-size: 15px;
  line-height: 24px;
}
ol.steps li:last-child { padding-bottom: 0; }
ol.steps li::before {
  content: counter(step) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
}
.notice {
  margin: 32px 0 0;
  padding: 18px 20px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 4px 10px 10px 4px;
}
.notice p { margin: 0; color: var(--ink); font-size: 14px; line-height: 22px; }
.notice .notice-title {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.notice.warning { border-left-color: var(--warning); }
.notice.warning .notice-title { color: var(--warning); }
.notice.critical { border-left-color: var(--critical); }
.notice.critical .notice-title { color: var(--critical); }
.notice.info { border-left-color: var(--info); }
.notice.info .notice-title { color: var(--info); }
footer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  line-height: 19px;
  color: var(--outline);
}
footer strong { color: var(--muted); font-weight: 700; }
footer p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--muted);
  word-break: break-all;
}
@media (max-width: 600px) {
  body { padding: 24px 16px; }
  .brand-header { padding: 28px 22px; }
  .content { padding: 28px 22px; }
  h1 { font-size: 26px; line-height: 34px; }
}