/* Erzähl mal – website. One loud place (the raspberry hero with a real
   example from the app), everything else quiet. System fonts only: no
   requests to font services. */
:root{
  --raspberry:#D6295F;
  --raspberry-deep:#A81B48;
  --plum:#2B1A47;
  --paper:#FFFFFF;
  --mist:#F6F3F7;
  --ink:#1D1626;
  --soft:#4A4354;
  --muted:#6B6475;
  --line:#E7E2EA;
  --round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--text);-webkit-text-size-adjust:100%}
a{color:var(--raspberry-deep)}
a:hover{color:var(--raspberry)}
a:focus-visible,button:focus-visible{outline:3px solid var(--plum);outline-offset:3px;border-radius:6px}

.wrap{max-width:720px;margin:0 auto;padding:24px 16px 64px}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:36px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:700 19px/1 var(--round);color:var(--ink);text-decoration:none}
.brand img{width:34px;height:34px;display:block}
nav a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:500;margin-left:18px}
nav a:first-child{margin-left:0}
nav a:hover{color:var(--ink)}

h1{font:700 34px/1.15 var(--round);margin:0 0 12px;letter-spacing:-0.01em}
h2{font:700 21px/1.3 var(--round);margin:36px 0 8px}
h3{font-size:17px;margin:20px 0 4px}
p,li{color:var(--soft)}
ul{padding-left:22px}
.lead{font-size:19px}
.muted{color:var(--muted);font-size:15px}
.card{background:var(--mist);border-radius:18px;padding:18px 22px;margin:18px 0}

footer{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
footer a{color:var(--muted)}

/* ---------- Start page ---------- */
.hero{background:var(--raspberry);color:#fff;padding:24px 16px 72px}
.hero .inner{max-width:960px;margin:0 auto}
.hero header.top{margin-bottom:48px}
.hero .brand{color:#fff}
.hero nav a{color:rgba(255,255,255,.85)}
.hero nav a:hover{color:#fff}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.hero h1{font-size:64px;line-height:1;margin:0 0 20px;color:#fff;letter-spacing:-0.02em}
.hero .lead{color:#fff;font-size:20px;max-width:26em;margin:0 0 28px}
.soon{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--plum);font-weight:600;font-size:15px;padding:12px 18px;border-radius:999px}
.soon img{width:22px;height:22px}

/* the example conversation */
.chat{display:flex;flex-direction:column;gap:12px}
.bubble{max-width:88%;padding:14px 18px;border-radius:22px;font-size:17px;line-height:1.45}
.bubble.q{align-self:flex-start;background:var(--plum);color:#fff;border-bottom-left-radius:6px;font-family:var(--round);font-weight:600}
.bubble.a{align-self:flex-end;background:#fff;color:var(--ink);border-bottom-right-radius:6px}
.bubble.a .via{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:4px}
.mistake{text-decoration:underline wavy var(--raspberry);text-decoration-thickness:2px;text-underline-offset:4px}
.hint{align-self:flex-end;max-width:88%;background:#FFE4EC;color:var(--ink);border-radius:18px;padding:14px 18px;font-size:15px;line-height:1.5}
.hint strong{display:block;font:700 17px/1.3 var(--round);color:var(--raspberry-deep);margin-bottom:2px}

.points{max-width:960px;margin:0 auto;padding:56px 16px 8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.points h2{font-size:19px;margin:0 0 6px}
.points p{margin:0;font-size:16px}
.home-footer{max-width:960px;margin:0 auto;padding:0 16px 40px}

@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero h1{font-size:46px}
  .points{grid-template-columns:1fr;gap:24px}
  h1{font-size:28px}
}
@media (prefers-reduced-motion:no-preference){
  .mistake{animation:mark .6s ease-out .9s both}
  @keyframes mark{from{text-decoration-color:transparent}to{text-decoration-color:var(--raspberry)}}
}