/* InfAssist marketing site — colours match the app's own palette. */

@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap; src: url(/infassist/fonts/fredoka-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap; src: url(/infassist/fonts/fredoka-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url(/infassist/fonts/fredoka-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url(/infassist/fonts/fredoka-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url(/infassist/fonts/fredoka-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url(/infassist/fonts/fredoka-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(/infassist/fonts/inter-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(/infassist/fonts/inter-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(/infassist/fonts/inter-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(/infassist/fonts/inter-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(/infassist/fonts/inter-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(/infassist/fonts/inter-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(/infassist/fonts/inter-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(/infassist/fonts/inter-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }

:root {
  --bg: #fff6f1;
  --surface: #ffffff;
  --ink: #26132b;
  --ink-soft: #6f5a77;
  --line: #f0d9cc;
  --accent: #ff2e79;
  --grad: linear-gradient(120deg, #ff2e79 0%, #ff7a3d 100%);
  --soft: #ffe3ee;
  --purple: #8b5cf6;
  --green: #17b26a;
  --max: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1220;
    --surface: #251a2a;
    --ink: #f6ecf8;
    --ink-soft: #c1aec7;
    --line: #3c2b42;
    --soft: #402336;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: "Fredoka", "Inter", sans-serif; font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 6vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--ink-soft); }
.skip { position: absolute; inset-inline-start: -999px; }
.skip:focus { inset-inline-start: 12px; top: 12px; background: var(--surface); padding: 8px 12px; border-radius: 8px; z-index: 10; }

/* header */
header.site { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
header.site .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.15rem; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
nav.main { margin-inline-start: auto; display: flex; align-items: center; gap: 18px; font-size: .95rem; }
nav.main a { text-decoration: none; color: var(--ink-soft); }
nav.main a:hover { color: var(--ink); }
/* Language menu: a no-JS <details>/<summary> dropdown listing all languages
   (see lang_switcher() in build.py). Positioned so its popover never causes
   the page to scroll horizontally, in either text direction. */
.lang { position: relative; font-size: .85rem; }
.lang summary { list-style: none; cursor: pointer; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); white-space: nowrap; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: "\25BE"; margin-inline-start: 6px; font-size: .75em; color: var(--ink-soft); }
.lang[open] summary { border-color: var(--accent); }
/* A single vertical column, not a grid: language names vary a lot in length
   ("English" vs "Bahasa Indonesia"), and a multi-column grid let long names
   overflow their cell and run into the next language — unreadable. */
.lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); display: flex; flex-direction: column; gap: 1px; z-index: 6; min-width: 180px; max-width: min(240px, 80vw); max-height: min(420px, 70vh); overflow-y: auto; }
.lang li a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: .92rem; white-space: nowrap; }
.lang li a:hover { background: var(--soft); }
.lang li[aria-current] a { font-weight: 700; color: var(--accent); }
@media (max-width: 640px) { nav.main .hide-sm { display: none; } }

/* buttons + badges */
.btn { display: inline-block; padding: 12px 22px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 6px 18px rgba(255, 46, 121, .25); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.badge { display: inline-block; font-size: .85rem; color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--ink-soft); }
.badge:hover { color: var(--ink); border-color: var(--ink); }
.store { display: inline-flex; flex-direction: column; padding: 9px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); line-height: 1.2; min-width: 168px; }
.store small { color: var(--ink-soft); font-size: .72rem; }
.store strong { font-size: 1rem; }
.store.off { opacity: .75; }

/* hero */
.hero { padding: 56px 0 40px; }
.hero .wrap { display: grid; gap: 40px; align-items: center; }
.hero p.lead { font-size: 1.2rem; color: var(--ink-soft); margin-top: 18px; max-width: 34em; }
.hero .stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero .note { font-size: .9rem; margin-top: 14px; }
.hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1.15fr .85fr; } .hero { padding: 84px 0 64px; } }

.phone { border: 9px solid #26132b; border-radius: 40px; overflow: hidden; background: #26132b; width: min(300px, 78vw); box-shadow: 0 30px 60px rgba(38, 19, 43, .22); }
.phone img { width: 100%; }
.hero .phone { margin: 0 auto; }
@media (prefers-color-scheme: dark) { .phone { border-color: #3c2b42; background: #3c2b42; } }

/* sections */
section { padding: 64px 0; }
section.alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { max-width: 40em; margin-bottom: 36px; }
.section-head p { margin-top: 12px; color: var(--ink-soft); }
.grid { display: grid; gap: 20px; }
@media (min-width: 720px) { .grid.c3 { grid-template-columns: repeat(3, 1fr); } .grid.c2 { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
section.alt .card { background: var(--bg); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: .98rem; }
.tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--purple); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; margin-inline-start: 8px; vertical-align: 2px; }

/* how it works */
.flow { display: grid; gap: 20px; }
@media (min-width: 720px) { .flow { grid-template-columns: repeat(3, 1fr); } }
.flow div { border-top: 3px solid var(--accent); padding-top: 14px; }
.flow h3 { margin-bottom: 6px; }
.flow p { color: var(--ink-soft); }

/* screenshot strip */
.strip { display: flex; gap: 22px; overflow-x: auto; padding: 8px 20px 24px; scroll-snap-type: x mandatory; }
.strip figure { margin: 0; flex: 0 0 auto; scroll-snap-align: center; width: 230px; }
.strip .phone { width: 230px; border-width: 7px; border-radius: 32px; }
.strip figcaption { margin-top: 12px; font-size: .92rem; color: var(--ink-soft); text-align: center; }

/* privacy list */
ul.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
ul.ticks li { position: relative; padding-inline-start: 30px; }
ul.ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .5em; width: 14px; height: 8px; border-inline-start: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(-45deg); }
:dir(rtl) ul.ticks li::before { transform: rotate(45deg) scaleX(-1); }

/* table */
.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .96rem; }
th, td { border: 1px solid var(--line); padding: 10px 14px; text-align: start; vertical-align: top; }
th { background: var(--surface); }
td.y { color: var(--green); font-weight: 600; }

/* faq */
details { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; background: var(--surface); }
details + details { margin-top: 10px; }
summary { cursor: pointer; font-weight: 600; }
details p { margin-top: 10px; color: var(--ink-soft); }

/* text pages (privacy, support) */
.doc { max-width: 760px; padding: 48px 20px 80px; margin: 0 auto; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 14px; }
.doc h2 { font-size: 1.35rem; margin: 2em 0 .5em; }
.doc p, .doc li { color: var(--ink); }
.doc ul { padding-inline-start: 1.2em; }
.doc li { margin: .35em 0; }
.doc code { background: var(--line); padding: 1px 6px; border-radius: 5px; font-size: .9em; }
.doc .tbl { margin: 14px 0; }
.doc table { min-width: 560px; font-size: .9rem; }

footer.site { border-top: 1px solid var(--line); padding: 32px 0 44px; font-size: .92rem; color: var(--ink-soft); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
footer.site nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--ink); }
footer.site .end { margin-inline-start: auto; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }