/* fayapay.com, drawn with the app's own tokens and text styles
   (lib/app/theme/app_tokens.dart, app_text.dart). Sizes are the app's
   design sizes at 412dp, times --s. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/Onest.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/assets/fonts/MartianMono.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}

:root {
  --s: 1;
  --accent: #2E7D32;
  --accent-deep: #1E5A24;
  --on-accent: #FFFFFF;
  --highlight: #A5D6A7;
  --background: #FFFFFF;
  --soft: #F3F7F2;
  --surface: #FFFFFF;
  --surface-muted: #DDEEDC;
  --ink: #10251A;
  --ink-muted: #4E6354;
  --outline: #A9C2A7;
  --divider: #DCE6D9;
  --chat: #E9EFE8;
  --credit: #1E6B32;
  --debit: #B3261E;
}
:root[data-theme="dark"] {
  --accent: #4CAF50;
  --on-accent: #06140B;
  --highlight: #5E9B62;
  --background: #0C1510;
  --soft: #122019;
  --surface: #1A2A20;
  --surface-muted: #1F3325;
  --ink: #E6F0E7;
  --ink-muted: #9DB3A2;
  --outline: #365042;
  --divider: #22332A;
  --chat: #101B14;
  --credit: #6FCF8A;
  --debit: #F08A7E;
}
@media (min-width: 900px) { :root { --s: 1.1; } }

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: "Onest", system-ui, sans-serif;
  font-size: calc(16px * var(--s));
  line-height: 1.45;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--highlight); outline-offset: 3px; border-radius: 8px; }

.flame {
  display: inline-block; flex: none;
  width: calc(32px * var(--s)); height: calc(32px * var(--s));
  background: currentColor;
  -webkit-mask: url("/assets/flame.svg") center / contain no-repeat;
  mask: url("/assets/flame.svg") center / contain no-repeat;
}

/* Buttons: FilledButton (StadiumBorder, 52 tall, AppText.label) */
.button {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(52px * var(--s)); padding: 0 calc(24px * var(--s));
  border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font: 600 calc(15px * var(--s))/1.2 "Onest", sans-serif;
  text-decoration: none;
}
.button.on-brand { background: #fff; color: var(--accent-deep); }

/* Welcome: brand green in both brightnesses */
.welcome { background: #2E7D32; color: #fff; }
.welcome-inner {
  max-width: 64rem; margin: 0 auto;
  display: flex; justify-content: center; align-items: center; gap: 6rem;
}
.welcome-page {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; max-width: calc(412px * var(--s));
  min-height: min(100svh, 58rem);
  padding: calc(16px * var(--s)) calc(24px * var(--s)) calc(24px * var(--s));
}
.wordmark {
  display: flex; align-items: center; gap: calc(10px * var(--s));
  font: 600 calc(32px * var(--s))/1.3 "Onest", sans-serif;
  text-decoration: none;
}
.welcome-middle { padding-block: calc(24px * var(--s)); }
.struck { margin: 0; }
.struck span {
  position: relative; display: inline-block;
  font: 700 calc(48px * var(--s))/1.3 "Martian Mono", monospace; font-stretch: 100%;
  color: rgba(255, 255, 255, .6);
}
.struck span::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: 50%;
  height: 4px; margin-top: -2px; border-radius: 2px;
  background: #A5D6A7;
  transform: rotate(-6deg);
}
.welcome-copy { margin-top: calc(16px * var(--s)); }
h1 {
  margin: 0;
  font: 900 calc(56px * var(--s))/1 "Archivo", sans-serif; font-stretch: 100%;
  letter-spacing: -.5px;
}
.welcome-copy p { margin: calc(16px * var(--s)) 0 0; font-size: calc(17px * var(--s)); color: #DDEEDC; }
.pills { list-style: none; margin: calc(28px * var(--s)) 0 0; padding: 0; display: grid; gap: calc(10px * var(--s)); }
.pills li {
  display: flex; justify-content: space-between; align-items: center;
  height: calc(56px * var(--s)); padding: 0 calc(18px * var(--s));
  background: #1E5A24; border-radius: calc(18px * var(--s));
  font: 600 calc(17px * var(--s))/1.2 "Onest", sans-serif;
}
.pills em {
  font: normal 500 calc(15px * var(--s))/1.3 "Martian Mono", monospace; font-stretch: 87.5%;
  color: #A5D6A7;
}
.file { margin: calc(10px * var(--s)) 0 0; text-align: center; font-size: calc(14px * var(--s)); opacity: .8; }


@media (prefers-reduced-motion: no-preference) {
  .struck span::after { transform-origin: left center; animation: strike .72s cubic-bezier(.215, .61, .355, 1) both; }
  .welcome-copy { animation: land .6s .6s cubic-bezier(.215, .61, .355, 1) both; }
  .pills li { animation: rise .6s cubic-bezier(.215, .61, .355, 1) both; }
  .pills li:nth-child(1) { animation-delay: 1.2s; }
  .pills li:nth-child(2) { animation-delay: 1.44s; }
  .pills li:nth-child(3) { animation-delay: 1.68s; }
  @keyframes strike { from { transform: rotate(-6deg) scaleX(0); } }
  @keyframes land { from { opacity: .2; transform: translateY(8px); } }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } }
}

/* The Home screen beside the welcome, and the other screens: real
   screenshots in a phone frame */
.phone { margin: 0; padding: 6px; border-radius: 30px; background: #07100B; }
.phone img { display: block; width: 100%; height: auto; border-radius: 24px; }
.phone .dark-only, [data-theme="dark"] .phone .light-only { display: none; }
[data-theme="dark"] .phone .dark-only { display: block; }
.hero-phone { flex: none; width: 21rem; box-shadow: 0 30px 60px rgba(4, 24, 10, .35); }

.theme-toggle {
  position: fixed; top: 14px; right: 14px; z-index: 10;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff;
  backdrop-filter: blur(8px);
}
.theme-toggle span { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 6px -6px 0 0 currentColor; }
[data-theme="dark"] .theme-toggle span { box-shadow: inset 0 0 0 9px currentColor; }

/* Sections below the welcome */
.band { background: var(--background); padding: calc(72px * var(--s)) calc(24px * var(--s)); }
.band.soft { background: var(--soft); }
.band-inner { max-width: 68rem; margin: 0 auto; }
.band-inner.narrow { max-width: calc(560px * var(--s)); }
.band h2 { max-width: 20ch; }
.intro { margin: calc(12px * var(--s)) 0 0; max-width: 36rem; font-size: calc(17px * var(--s)); color: var(--ink-muted); }
h3 { margin: 0; font: 600 calc(17px * var(--s))/1.3 "Onest", sans-serif; }

.coverage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(16px * var(--s));
  margin-top: calc(36px * var(--s));
}
.networks, .can { list-style: none; margin: 0; padding: calc(20px * var(--s)); border-radius: calc(20px * var(--s)); background: var(--soft); display: grid; gap: calc(12px * var(--s)); }
.networks li { display: flex; align-items: center; gap: calc(12px * var(--s)); font: 600 calc(17px * var(--s))/1.3 "Onest", sans-serif; }
.chip {
  display: inline-grid; place-items: center; flex: none;
  min-width: calc(44px * var(--s)); height: calc(36px * var(--s)); padding: 0 calc(8px * var(--s));
  border-radius: calc(10px * var(--s));
  font: 800 calc(12px * var(--s)) "Archivo", sans-serif; color: #fff;
}
.chip.mtn { background: #FBCC0D; color: #10251A; }
.chip.telecel { background: #E32527; }
.chip.at { background: #223D76; }
.can { align-content: center; font-size: calc(16px * var(--s)); }
.can li { display: flex; gap: calc(10px * var(--s)); }
.can li::before { content: "✓"; color: var(--accent); font-weight: 700; }
.note { margin: calc(20px * var(--s)) 0 0; color: var(--ink-muted); font-size: calc(15px * var(--s)); }

.screens.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 52rem; }
.screens { margin-top: calc(36px * var(--s)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(24px * var(--s)); }

.promises { list-style: none; margin: calc(36px * var(--s)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(28px * var(--s)) calc(40px * var(--s)); }
.promises li { padding-left: calc(16px * var(--s)); border-left: 3px solid var(--accent); }
.promises p { margin: calc(6px * var(--s)) 0 0; color: var(--ink-muted); font-size: calc(15px * var(--s)); }
.more { margin: calc(28px * var(--s)) 0 0; font-weight: 600; color: var(--accent); }

details { border-bottom: 1px solid var(--divider); }
details:first-of-type { margin-top: calc(20px * var(--s)); }
summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: calc(16px * var(--s)) 0; cursor: pointer; list-style: none;
  font: 600 calc(17px * var(--s))/1.3 "Onest", sans-serif;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; font: 400 calc(24px * var(--s))/1 "Onest", sans-serif; color: var(--accent); }
details[open] summary::after { content: "−"; }
details p { margin: 0 0 calc(16px * var(--s)); color: var(--ink-muted); }

/* Get FayaPay */
.get h2 { margin-bottom: calc(24px * var(--s)); }
.get .file { color: var(--ink-muted); opacity: 1; }
.steps { margin: calc(28px * var(--s)) 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: calc(14px * var(--s)); }
.steps li { counter-increment: step; display: grid; grid-template-columns: calc(28px * var(--s)) 1fr; gap: calc(12px * var(--s)); font-size: calc(15px * var(--s)); }
.steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: calc(28px * var(--s)); height: calc(28px * var(--s)); border-radius: 50%;
  background: var(--surface-muted); color: var(--accent);
  font: 600 calc(13px * var(--s)) "Onest", sans-serif;
}
.checksum {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem;
  margin: calc(28px * var(--s)) 0 0; padding: .75rem .75rem .75rem 1rem;
  border-radius: 14px; background: var(--soft);
  font-size: 12px; color: var(--ink-muted);
}
.checksum[hidden] { display: none; }
.checksum code { font: 500 11px/1.4 "Martian Mono", monospace; font-stretch: 87.5%; overflow-wrap: anywhere; user-select: all; color: var(--ink); }
.checksum button {
  border: 0; border-radius: 999px; padding: .45rem .9rem; cursor: pointer;
  background: var(--surface-muted); color: var(--accent);
  font: 600 13px "Onest", sans-serif;
}

.foot {
  max-width: 64rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  padding: 1.5rem calc(24px * var(--s)) 2.5rem;
  border-top: 1px solid var(--divider);
  color: var(--ink-muted); font-size: 14px;
}
.foot p { margin: 0; }
.foot .links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }

/* Policy and 404 pages */
.wrap { max-width: 44rem; margin: 0 auto; padding-inline: calc(24px * var(--s)); }
.page-head { padding-block: 1.25rem; }
.page-head .wordmark { font-size: 24px; color: var(--ink); }
.page-head .flame { width: 24px; height: 24px; color: var(--accent); }
.policy { padding-block: 1rem 4rem; }
.policy h1 { font-size: clamp(2.25rem, 7vw, 3rem); letter-spacing: -.5px; margin-bottom: 1rem; }
.policy h2 { margin-top: 2.25rem; font-size: 24px; }
.policy h3 { margin: 1.5rem 0 .4rem; font: 600 17px/1.3 "Onest", sans-serif; }
.policy table { border-collapse: collapse; width: 100%; font-size: 15px; }
.policy th, .policy td { text-align: left; vertical-align: top; padding: .5rem .75rem .5rem 0; border-bottom: 1px solid var(--divider); }

@media (max-width: 900px) {
  .welcome-inner { flex-direction: column; gap: 0; }
  .hero-phone { width: min(21rem, 78vw); margin-bottom: 3rem; }
  .coverage, .promises { grid-template-columns: minmax(0, 1fr); }
  .screens, .screens.three {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(70vw, 17rem);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .screens figure { scroll-snap-align: center; }
}