/* «Мої платіжки» — site styles. Colors and font match the app (SPEC.md 2.11). */
@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url(fonts/Manrope-500.ttf) format("truetype")}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(fonts/Manrope-700.ttf) format("truetype")}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(fonts/Manrope-800.ttf) format("truetype")}

:root{
  --orange:#EF5A24;
  --orange-deep:#D94A17;
  --yellow:#FFD54A;
  --ink:#18181B;
  --muted:#5F5F66;
  --line:#E4E2DC;
  --paper:#F4F3EF;
  --card:#FFFFFF;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:500 17px/1.55 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}
a{color:inherit}

/* ---------- Home ---------- */
.home{min-height:100vh;min-height:100svh;background:var(--orange);color:#fff;display:flex;flex-direction:column}
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px 16px 32px}
.mark{width:148px;height:148px;display:block;margin-bottom:22px}
.hero h1{font-weight:800;font-size:clamp(36px,7vw,52px);line-height:1.05;letter-spacing:-.02em}
.hero .lead{max-width:30em;margin-top:18px;font-size:clamp(17px,2.4vw,20px);line-height:1.5;color:rgba(255,255,255,.94)}
.hero .facts{max-width:30em;margin-top:10px;font-size:15px;color:rgba(255,255,255,.8)}
.store{display:inline-block;margin-top:34px;border-radius:10px;transition:transform .15s ease}
.store img{display:block;height:56px;width:auto}
.store:hover{transform:translateY(-1px)}
.store:focus-visible{outline:3px solid #fff;outline-offset:4px}
.foot{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;padding:20px 16px 28px;font-size:14px;font-weight:700;color:rgba(255,255,255,.85)}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot span{font-weight:500;color:rgba(255,255,255,.65)}

/* Logo draws itself like the app's launch animation (src/ui/launchAnimation.tsx) */
.mark .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .7s cubic-bezier(.5,0,.3,1) forwards}
.mark .win{opacity:0;animation:on .2s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes on{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .mark .draw{animation:none;stroke-dashoffset:0}
  .mark .win{animation:none;opacity:1}
}

/* ---------- Documents (privacy, support) ---------- */
.hd{background:var(--card);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:12px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;text-decoration:none;letter-spacing:-.01em}
.brand img{width:34px;height:34px;border-radius:9px;display:block}
.lang{margin-left:auto;display:flex;gap:4px;font-size:13px;font-weight:700}
.lang a{text-decoration:none;padding:6px 9px;border-radius:8px;color:var(--muted)}
.lang a[aria-current]{background:var(--paper);color:var(--ink)}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
.doc{padding:28px 0 56px}
.back{display:inline-block;font-size:14px;font-weight:700;color:var(--muted);text-decoration:none;margin-bottom:18px}
.back:hover{color:var(--ink)}
.doc h1{font-weight:800;font-size:clamp(30px,5vw,40px);line-height:1.1;letter-spacing:-.02em}
.updated{margin-top:8px;font-size:14px;color:var(--muted)}
.intro{margin-top:20px;font-size:18px}
.doc h2{font-weight:800;font-size:22px;line-height:1.25;margin:40px 0 12px;letter-spacing:-.01em}
.doc h3{font-weight:800;font-size:18px;margin:26px 0 8px}
.doc p{margin:10px 0}
.doc ul{margin:10px 0 10px 1.2em}
.doc li{margin:7px 0}
.doc a{color:var(--orange-deep);text-underline-offset:2px}
.doc strong{font-weight:800}
.note{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:18px 0}
.contact{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin:16px 0}
.contact a.mail{font-weight:800;font-size:20px;text-decoration:none}
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px;background:var(--card);border-radius:12px;overflow:hidden}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
th{font-weight:800;background:#FAF9F6}
tr:last-child td{border-bottom:0}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:10px 0}
summary{cursor:pointer;font-weight:800;padding:14px 18px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--muted);font-weight:700}
details[open] summary::after{content:"–"}
details>div{padding:0 18px 14px}
.docfoot{border-top:1px solid var(--line);padding:20px 0 32px;font-size:14px;color:var(--muted)}
.docfoot .wrap{display:flex;flex-wrap:wrap;gap:6px 20px}
.docfoot a{text-decoration:none;font-weight:700}
.docfoot a:hover{color:var(--ink)}