/* The public pages around the app: the landing page and the Help guide. */
:root {
  --bg: #f6f1e6;
  --surface: #fffdf8;
  --text: #1f1d2b;
  --muted: #5c5a68;
  --border: #2b2540;
  --soft-border: #e3dccb;
  --accent: #1f4e79;
  --accent-text: #ffffff;
  --accent-soft: #dce8f4;
  --plate: #f8eed6;
  --shadow: #2b2540;
  --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali",
    "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Gujarati", "Noto Sans Kannada", "Noto Sans Malayalam",
    "Noto Sans Gurmukhi", "Nirmala UI", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15131c;
    --surface: #1e1b27;
    --text: #ece8f2;
    --muted: #aaa5b8;
    --border: #d9d2c0;
    --soft-border: #353041;
    --accent: #8dbbe8;
    --accent-text: #0b1520;
    --accent-soft: #223348;
    --plate: #e9ddc0;
    --shadow: #000000;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 18px/1.65 var(--ui-font);
  padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
}
.wrap { max-width: 68rem; margin: 0 auto; padding-inline: max(1.1rem, env(safe-area-inset-left, 0px)); }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 0.75rem; }
h3 { font-size: 1.25rem; margin: 0 0 0.4rem; }
p { margin: 0 0 1rem; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 40rem; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* Header */
header.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; }
.brand { display: flex; align-items: center; gap: 0.55rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--text); text-decoration: none; }
.brand img { width: 2.1rem; height: 2.1rem; }
nav { display: flex; align-items: center; gap: 1.1rem; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--text); }
@media (max-width: 44rem) { nav .opt { display: none; } }

/* Buttons: a chunky, inked look to match the drawings */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.6rem;
  background: var(--accent); color: var(--accent-text); border: 3px solid var(--border); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--shadow); font-weight: 700; font-size: 1.08rem; text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.btn.small { min-height: 42px; padding: 0 1.1rem; font-size: 0.95rem; }
.btn.ghost { background: var(--surface); color: var(--text); }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

/* Illustration plates: always cream paper, so the ink drawings read the same in both themes */
.plate { background: var(--plate); border: 3px solid var(--border); border-radius: 1.1rem; box-shadow: 4px 4px 0 var(--shadow); }
.plate svg { display: block; width: 100%; height: auto; }
.art { display: block; width: 100%; height: auto; }

/* Sections */
section { padding-block: 3.5rem; }
section + section { border-top: 2px dashed var(--soft-border); }
.hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem; align-items: center; padding-block: 2rem 3.5rem; }
.hero .plate { padding: 0.5rem; }
.hero .plate.figure { max-width: 20rem; justify-self: center; width: 100%; }
.badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; padding: 0; list-style: none; }
.badges li { background: var(--surface); border: 2px solid var(--soft-border); border-radius: 999px; padding: 0.15rem 0.8rem; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 52rem) { .hero { grid-template-columns: 1fr; gap: 1.8rem; padding-block: 1rem 2.5rem; } }

.grid { display: grid; gap: 1.4rem; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.card { background: var(--surface); border: 3px solid var(--border); border-radius: 1.1rem; box-shadow: 4px 4px 0 var(--shadow); padding: 1rem; display: flex; flex-direction: column; }
.card .plate { box-shadow: none; border-width: 2px; margin-bottom: 0.9rem; }
.card p { color: var(--muted); }
.card p:last-child { margin-bottom: 0; }
.step-no { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--border); background: #f2b33d; color: #2b2540; font-weight: 800; margin-right: 0.4rem; font-size: 0.95rem; }

/* The cast of writers */
.cast { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 1.8rem; }
@media (max-width: 40rem) { .cast { grid-template-columns: repeat(2, 1fr); } }
.cast figure { margin: 0; text-align: center; }
.cast .plate { padding: 0.3rem; box-shadow: 3px 3px 0 var(--shadow); }
.cast figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 0.5rem; line-height: 1.4; }
.cast figcaption b { display: block; color: var(--text); font-size: 0.98rem; }
.cast .you .plate { background: #e8e0f6; }

/* Side-by-side explainer rows */
.explain { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; margin-top: 2.5rem; }
.explain:nth-of-type(even) .plate { order: 2; }
.explain .plate { padding: 0.6rem; }
@media (max-width: 52rem) { .explain { grid-template-columns: 1fr; gap: 1.2rem; } .explain:nth-of-type(even) .plate { order: 0; } }

.colours { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; padding: 0; margin: 0 0 1rem; list-style: none; font-size: 0.95rem; }
.colours li { display: flex; align-items: center; gap: 0.35rem; }
.colours i { width: 1rem; height: 1rem; border-radius: 0.25rem; border: 2px solid var(--border); }

.shot { border: 3px solid var(--border); border-radius: 1rem; box-shadow: 4px 4px 0 var(--shadow); max-width: 100%; height: auto; display: block; }

dl.faq { margin: 0; max-width: 46rem; }
dl.faq dt { font-weight: 700; margin-top: 1.4rem; font-size: 1.08rem; }
dl.faq dd { margin: 0.25rem 0 0; color: var(--muted); }

kbd { font: 0.85em var(--ui-font); padding: 0.05em 0.45em; border: 2px solid var(--soft-border); border-bottom-width: 3px; border-radius: 0.35rem; background: var(--surface); white-space: nowrap; }
.callout { background: var(--accent-soft); border: 2px solid var(--border); border-radius: 0.9rem; padding: 1rem 1.2rem; }
.callout p:last-child { margin-bottom: 0; }

/* App buttons drawn with the app's own icons */
.ico { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 2px solid var(--border); border-radius: 0.6rem; background: var(--surface); vertical-align: middle; flex: none; }
.ico svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ico svg circle { fill: currentColor; stroke: none; }
.ico.txt { font-weight: 800; font-size: 0.95rem; width: auto; min-width: 2.2rem; padding-inline: 0.4rem; }
.inline-ico { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 2px solid var(--border); border-radius: 0.45rem; background: var(--surface); vertical-align: -0.35em; }
.inline-ico svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inline-ico svg circle { fill: currentColor; stroke: none; }
.pill { display: inline-block; border: 2px solid var(--border); border-radius: 999px; padding: 0 0.6rem; background: var(--surface); font-weight: 700; font-size: 0.92em; white-space: nowrap; }

.buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0.8rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.buttons li { display: flex; gap: 0.8rem; align-items: flex-start; }
.buttons b { display: block; }
.buttons span { color: var(--muted); font-size: 0.97rem; }

/* Cartoon mock-ups of the app's screens */
.mock { background: #fffdf8; color: #1f1d2b; border: 3px solid #2b2540; border-radius: 1rem; padding: 0.9rem; font-size: 0.95rem; }
.mock .bar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.mock .seg { display: inline-flex; border: 2px solid #2b2540; border-radius: 999px; overflow: hidden; }
.mock .seg span { padding: 0.15rem 0.8rem; font-weight: 700; }
.mock .seg .on { background: #1f4e79; color: #fff; }
.mock .tap { position: relative; }
.mock .tap::after { content: ""; position: absolute; inset: -6px; border: 2px dashed #e2574c; border-radius: 999px; }
.mock .ico { background: #fffdf8; border-color: #2b2540; color: #1f1d2b; }
.mock .title { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: #8a8797; margin: 0.6rem 0 0.2rem; }
.mock .ph { color: #8a8797; }
.mock .ph::before { content: "|"; color: #1f4e79; font-weight: 700; margin-right: 0.15rem; animation: blink 1s steps(1) infinite; }
.mock .foot { display: flex; justify-content: space-between; color: #5c5a68; font-size: 0.82rem; border-top: 2px dashed #e3dccb; margin-top: 0.8rem; padding-top: 0.4rem; }
.mock ul { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.mock li { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
.mock li .ico { width: 1.8rem; height: 1.8rem; border-radius: 0.5rem; }
.mock .hl { background: #fff1c2; border-radius: 0.5rem; outline: 2px dashed #e2574c; outline-offset: 2px; }
.mock .fab { display: inline-flex; align-items: center; gap: 0.4rem; background: #1f4e79; color: #fff; border: 2px solid #2b2540; border-radius: 999px; padding: 0.2rem 0.9rem; font-weight: 700; }
.mock .fab svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mock .ph::before { animation: none; } html { scroll-behavior: auto; } }

ol.steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 2.2rem; }
ol.steps > li { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
@media (max-width: 52rem) { ol.steps > li { grid-template-columns: 1fr; gap: 1rem; } }
ol.steps h3 { display: flex; align-items: center; }

dl.words { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin: 0; }
dl.words div { background: var(--surface); border: 2px solid var(--soft-border); border-radius: 0.9rem; padding: 0.9rem 1.1rem; }
dl.words dt { font-weight: 800; }
dl.words dd { margin: 0.2rem 0 0; color: var(--muted); }

footer { padding-block: 2rem 3rem; color: var(--muted); font-size: 0.95rem; border-top: 2px dashed var(--soft-border); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
footer p { margin: 0; }