/* Tilewren web. Tokens: docs/design/IDENTITY.md "Color tokens" (light / dark). Text never uses opacity. */
@font-face {
  font-family: "Lexend";
  src: url("/assets/lexend.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #F8F5FD;
  --card: #FFFFFF;
  --ink: #1D1233;
  --ink2: #52466B;
  --accent: #F2B134;
  --accent-hover: #FFC24D;
  --on-accent: #1D1233;
  --tab-text: #7A4A00;
  --line: #E3DAF3;
  --chip: #EFE9FA;
  --slab: #0F5A47;
  --slab-ink: #F4F8F6;
  --slab-ink2: #CFE6DD;
  --pro-bg: #FFE7B0;
  --pro-fg: #5C3A00;
  --shadow: rgba(15, 90, 71, .28);
  --phone: #14101F;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A102E;
    --card: #241842;
    --ink: #F4EEFF;
    --ink2: #C3B6DE;
    --accent: #F5C257;
    --accent-hover: #FFD27A;
    --on-accent: #241408;
    --tab-text: #F5C257;
    --line: #392A66;
    --chip: #33265C;
    --slab: #34246A;
    --slab-ink: #F4EEFF;
    --slab-ink2: #D9CFF0;
    --pro-bg: #4A3510;
    --pro-fg: #F5C257;
    --shadow: rgba(0, 0, 0, .45);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 20px;
  line-height: 1.55;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--tab-text); }
a:hover { color: var(--ink); }
a:focus-visible { outline: 3px solid var(--tab-text); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 10; background: var(--card); color: var(--ink); padding: 12px 16px; border-radius: 12px; }
.skip:focus { left: 8px; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Header */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--ink); text-decoration: none; font-size: 24px; font-weight: 700; }
.brand:hover { color: var(--ink); }
.brand img { width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.nav { display: flex; gap: 8px; align-items: center; }
.nav a { min-height: 48px; display: flex; align-items: center; padding: 0 16px; border-radius: 24px; font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--chip); color: var(--ink); }

/* Hero */
.hero { display: flex; flex-direction: column; gap: 32px; align-items: center; padding: 24px 20px 56px; }
.hero-copy { min-width: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; width: 100%; }
.app-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 16px 32px var(--shadow), 0 0 0 1px var(--line); }
h1 { font-size: 38px; font-weight: 800; line-height: 1.08; text-wrap: balance; }
.lead { font-size: 20px; line-height: 1.5; color: var(--ink2); max-width: 640px; text-wrap: pretty; }
.badge { display: block; height: 56px; width: auto; }
.badge-link { display: block; border-radius: 10px; }
.panel { position: relative; width: 100%; max-width: 560px; background: var(--slab); border-radius: 32px; padding: 32px 16px 72px; display: flex; justify-content: center; box-shadow: 0 24px 48px var(--shadow); }
.phone { width: 260px; background: var(--phone); border-radius: 44px; padding: 10px; box-shadow: 0 24px 40px rgba(0, 0, 0, .35); }
.phone img { width: 100%; border-radius: 34px; }
.panel .pip { position: absolute; left: -8px; bottom: -24px; width: 140px; height: 140px; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .25)); }

/* Sections */
.section { display: flex; flex-direction: column; gap: 32px; padding: 0 20px 40px; }
h2 { font-size: 30px; font-weight: 700; line-height: 1.15; }
.feature { display: flex; flex-direction: column; gap: 24px; align-items: center; background: var(--card); border-radius: 32px; padding: 24px 20px; box-shadow: 0 0 0 1px var(--line), 0 12px 0 -6px var(--line); }
.feature-copy { width: 100%; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }
.feature-copy p { color: var(--ink2); text-wrap: pretty; }
.feature-visual { width: 100%; display: flex; justify-content: center; min-width: 0; }
.num { width: 56px; height: 56px; border-radius: 28px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; line-height: 1; }
.feature .phone { width: 280px; box-shadow: 0 24px 40px var(--shadow); }

.lessons { width: 100%; max-width: 460px; background: var(--chip); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.lessons li { display: flex; align-items: center; gap: 16px; min-height: 60px; background: var(--card); border-radius: 14px; padding: 0 16px; box-shadow: 0 0 0 1px var(--line); font-weight: 600; }
.lessons .n { width: 36px; height: 36px; border-radius: 12px; background: var(--chip); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; flex: none; }

/* Free and Pro */
.plans { gap: 24px; }
.plans > p { font-size: 22px; color: var(--ink2); max-width: 880px; text-wrap: pretty; }
.plan-row { display: flex; flex-direction: column; gap: 24px; }
.plan { flex: 1; border-radius: 32px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.plan h3 { font-size: 28px; font-weight: 700; line-height: 1.3; }
.plan ul { display: flex; flex-direction: column; gap: 16px; }
.plan li { display: flex; gap: 12px; font-weight: 500; line-height: 1.4; }
.plan.free { background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.plan.pro { background: var(--pro-bg); color: var(--pro-fg); box-shadow: 0 12px 24px var(--shadow); }
.plan.free li::before { color: var(--tab-text); }
.plan li::before { content: ""; flex: none; width: 8px; height: 15px; margin: 3px 6px 0 4px; border: solid currentColor; border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* FAQ */
.faq { gap: 16px; }
.faq-item { background: var(--card); border-radius: 24px; padding: 24px 28px; box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 8px; }
.faq-item h3 { font-size: 22px; font-weight: 700; line-height: 1.3; }
.faq-item p { color: var(--ink2); text-wrap: pretty; }

/* Text pages (privacy, support) */
.doc { display: flex; justify-content: center; padding: 24px 20px 56px; }
.doc-inner { width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: 24px; }
.doc h1 { font-size: 40px; font-weight: 800; line-height: 1.1; }
.doc .intro { font-size: 22px; color: var(--ink2); }
.summary { background: var(--slab); color: var(--slab-ink); border-radius: 32px; padding: 32px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 16px 32px var(--shadow); }
.summary li { display: flex; gap: 12px; font-size: 22px; font-weight: 600; line-height: 1.35; }
.summary li::before { content: ""; flex: none; width: 8px; height: 15px; margin: 4px 6px 0 4px; border: solid currentColor; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.doc-card { background: var(--card); border-radius: 24px; padding: 28px 32px; box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 8px; }
.doc-card h2 { font-size: 28px; line-height: 1.2; }
.doc-card p { color: var(--ink2); line-height: 1.6; text-wrap: pretty; }
.doc-card a { font-weight: 600; overflow-wrap: anywhere; }
.steps { display: flex; flex-direction: column; gap: 24px; }
.step { flex: 1; background: var(--card); border-radius: 32px; padding: 32px; box-shadow: 0 0 0 1px var(--line), 0 12px 0 -6px var(--line); display: flex; flex-direction: column; gap: 12px; }
.step h2 { font-size: 28px; line-height: 1.2; }
.step p { color: var(--ink2); }
.doc h2.sub { font-size: 32px; margin-top: 16px; }
.contact { background: var(--slab); color: var(--slab-ink); border-radius: 32px; padding: 32px; display: flex; align-items: center; gap: 24px; box-shadow: 0 16px 32px var(--shadow); }
.contact img { width: 120px; height: 120px; object-fit: contain; flex: none; }
.contact div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.contact h2 { font-size: 28px; }
.contact a { color: var(--slab-ink); font-size: 22px; font-weight: 600; overflow-wrap: anywhere; }
.contact a:hover { color: var(--slab-ink2); }
.contact p { color: var(--slab-ink2); line-height: 1.5; }

/* 404 */
.notfound { display: flex; align-items: center; justify-content: center; padding: 24px 20px 56px; }
.nf-card { display: flex; flex-direction: column; align-items: center; gap: 24px; background: var(--card); border-radius: 32px; padding: 32px 24px; box-shadow: 0 0 0 1px var(--line), 0 12px 0 -6px var(--line), 0 24px 48px var(--shadow); width: 100%; max-width: 1000px; }
.nf-card img { width: 220px; height: 220px; object-fit: contain; flex: none; }
.nf-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 520px; }
.nf-copy .code { font-size: 20px; font-weight: 700; color: var(--tab-text); }
.nf-copy h1 { font-size: 36px; line-height: 1.1; font-weight: 800; }
.nf-copy p { font-size: 22px; color: var(--ink2); }
.btn { min-height: 64px; display: inline-flex; align-items: center; padding: 0 32px; border-radius: 24px; background: var(--accent); color: var(--on-accent); font-size: 20px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 20px var(--shadow); }
.btn:hover { background: var(--accent-hover); color: var(--on-accent); }

/* Footer */
.site-footer { background: var(--slab); color: var(--slab-ink); padding: 32px 20px; margin-top: auto; }
.footer-inner { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.footer-top { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; align-items: flex-start; }
.footer-brand { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 700; }
.footer-brand img { width: 48px; height: 48px; border-radius: 12px; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { min-height: 48px; display: flex; align-items: center; font-size: 18px; font-weight: 600; color: var(--slab-ink); text-decoration: underline; overflow-wrap: anywhere; }
.footer-links a:hover { color: var(--slab-ink2); }
.footer-note { font-size: 18px; line-height: 1.5; color: var(--slab-ink2); max-width: 760px; text-wrap: pretty; }
.footer-note a { color: var(--slab-ink); }

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; width: 100%; }

@media (min-width: 700px) {
  .plan-row { flex-direction: row; }
  .steps { flex-direction: row; }
  .nf-card { flex-direction: row; gap: 64px; padding: 48px 64px; }
  .nf-card img { width: 300px; height: 300px; }
  .nf-copy h1 { font-size: 52px; }
  .doc h1 { font-size: 56px; }
  .hero { padding: 40px 40px 72px; }
  .section { padding: 0 40px 56px; }
  .site-header { padding: 20px 40px; }
  .site-footer { padding: 48px 40px; }
  .doc, .notfound { padding: 40px 40px 80px; }
  .feature { padding: 40px; }
  h1 { font-size: 52px; }
  h2 { font-size: 36px; }
  .lead { font-size: 24px; }
  .panel { padding: 40px 40px 56px; }
  .phone { width: 320px; }
  .panel .pip { width: 220px; height: 220px; left: -24px; }
  .feature .phone { width: 320px; }
}

@media (min-width: 1000px) {
  .feature { flex-direction: row; gap: 64px; padding: 48px; }
  .feature:nth-child(even) { flex-direction: row-reverse; }
  .feature-copy, .feature-visual { flex: 1; width: auto; }
  h2 { font-size: 40px; }
  .site-footer { padding: 48px 64px; }
  .footer-top { flex-direction: row; align-items: center; }
  .site-header { padding: 20px 64px; }
  .section { padding: 0 64px 64px; }
  .doc, .notfound { padding: 48px 64px 96px; }
}

@media (min-width: 1180px) {
  .hero { flex-direction: row; gap: 64px; padding: 48px 64px 96px; }
  .hero-copy { flex: 1; width: auto; }
  .app-icon { width: 128px; height: 128px; border-radius: 30px; }
  h1 { font-size: 64px; }
  .panel { flex: 0 0 560px; }
  .panel .pip { left: -40px; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, .nav a, .footer-links a { transition: background-color .15s ease, color .15s ease; }
}