/* Spell with Abi website: a hand-drawn, crayon look on warm paper (Dewi, 13 Nov 2026).
   Colours and fonts are the app's own. The fonts are stored on this site, not fetched from
   Google, so nothing about visitors goes anywhere. Light colours only, as in the app. */

@font-face { font-family: "Baloo 2"; src: url("/fonts/Baloo2-Variable.ttf") format("truetype"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Andika"; src: url("/fonts/Andika-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Andika"; src: url("/fonts/Andika-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --paper: #FFF9EC; --card: #FFFFFF; --ink: #22304A; --soft: #6B7389; --sand: #E6DCC3;
  --yellow: #FFD23F; --yellow-edge: #D9AE1E; --green: #3ECF8E; --hill: #CDE8B0; --hill-dark: #A9D982;
  --blue: #2B6CB0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; color: var(--ink);
  font: 18px/1.6 "Andika", -apple-system, "Segoe UI", system-ui, sans-serif;
  /* Paper: the app's cream with a faint grain. */
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(34, 48, 74, 0.035) 1px, transparent 1.2px),
    radial-gradient(rgba(217, 174, 30, 0.05) 1px, transparent 1.4px);
  background-size: 7px 7px, 13px 13px;
  background-position: 0 0, 3px 5px;
}
h1, h2, h3, .logo, nav, .pill, .button { font-family: "Baloo 2", "Andika", system-ui, sans-serif; }
a { color: var(--blue); }

/* Header: the hand-lettered name with its crayon underline and sparks, and the menu. */
.top { max-width: 1120px; margin: 0 auto; padding: 22px 20px 6px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo { position: relative; display: inline-block; font-size: 34px; font-weight: 800; color: var(--ink); text-decoration: none; line-height: 1.1; padding: 4px 34px 12px 0; }
.logo .swoosh { position: absolute; left: 2px; right: 34px; bottom: 0; width: calc(100% - 36px); height: 14px; }
.logo .sparks { position: absolute; right: 0; top: -10px; width: 34px; }
nav { display: flex; align-items: center; gap: 8px 26px; flex-wrap: wrap; font-size: 19px; font-weight: 600; }
nav a { color: var(--ink); text-decoration: none; padding: 6px 2px; }
nav a.here { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 4px; text-underline-offset: 7px; }

/* Crayon pills: a yellow shape with rough, waxy edges (the SVG filter #crayon on each page). */
.pill, .button {
  position: relative; display: inline-block; isolation: isolate; color: var(--ink); font-weight: 700;
  text-decoration: none; padding: 10px 26px; font-size: 20px; border-radius: 999px;
}
.pill::before, .button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px;
  background: var(--yellow); filter: url(#crayon);
  box-shadow: inset 0 -5px 0 rgba(217, 174, 30, 0.55);
}
.button { font-size: 24px; padding: 15px 36px; }
.button .arrow { margin-left: 12px; }
.pill:hover::before, .button:hover::before { background: #FFDA5C; }
.button.plain::before { background: transparent; box-shadow: inset 0 0 0 3px var(--ink); }
.button.plain:hover::before { background: rgba(255, 255, 255, 0.7); }

/* Hero */
.hero { max-width: 1120px; margin: 0 auto; padding: 34px 20px 0; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 24px; }
.hero h1 { font-size: clamp(44px, 6.4vw, 78px); line-height: 1.02; margin: 0 0 18px; font-weight: 700; letter-spacing: -0.5px; }
.hero .subline { font-size: clamp(20px, 2.3vw, 28px); color: #4A5670; margin: 0 0 30px; max-width: 520px; line-height: 1.45; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.scene { position: relative; min-height: 470px; }
.scene .abi { position: absolute; left: 12%; bottom: 0; width: 68%; max-width: 380px; }
.scene .sun { position: absolute; right: 2%; top: 0; width: 34%; max-width: 190px; }
.scene .wave-sparks { position: absolute; left: 4%; bottom: 52%; width: 15%; max-width: 80px; transform: rotate(-12deg); }

/* The crayon hill along the bottom of the hero. */
.hill { display: block; width: 100%; height: 120px; margin-top: -40px; margin-bottom: -2px; }

/* Sections below the hero sit on the hill's green, then paper again. */
.band { background: var(--hill); padding: 10px 0 70px; }
.band-end { display: block; width: 100%; height: 60px; background: var(--hill); }
section { max-width: 1120px; margin: 0 auto; padding: 50px 20px 10px; }
section h2 { font-size: clamp(32px, 4vw, 46px); margin: 0 0 18px; font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tile { background: var(--card); border-radius: 24px; padding: 20px 22px 22px; box-shadow: 0 5px 0 var(--sand); }
.tile h3 { font-size: 23px; margin: 6px 0 4px; line-height: 1.2; }
.tile p { margin: 0; color: #3A4660; font-size: 17px; }
.tile .num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font: 800 19px "Baloo 2", system-ui; color: var(--ink); background: var(--yellow); }
.tile .num.g { background: var(--green); } .tile .num.p { background: #CDBDF0; } .tile .num.t { background: #A9DDE6; }

/* Plain pages (help, privacy, test): one card of text under the same header. */
main.page { max-width: 760px; margin: 0 auto; padding: 18px 20px 60px; }
main.page h1 { font-size: clamp(34px, 5vw, 48px); line-height: 1.1; margin: 18px 0 6px; }
.sub { color: var(--soft); margin: 2px 0 0; font-size: 16px; }
.card { background: var(--card); border-radius: 24px; box-shadow: 0 5px 0 var(--sand); padding: 8px 24px 24px; margin-top: 18px; }
.card h2 { font-size: 25px; margin: 26px 0 6px; }
.lead { background: #FFF3C4; border-radius: 18px; padding: 14px 18px; font-weight: 700; margin-top: 18px; }
ul, ol { padding-left: 24px; }

footer { max-width: 1120px; margin: 0 auto; color: var(--soft); font-size: 15px; padding: 26px 20px 40px; text-align: center; }
footer a { color: var(--soft); }

/* Phones */
@media (max-width: 760px) {
  .top { padding-top: 16px; }
  .logo { font-size: 30px; }
  nav { width: 100%; justify-content: space-between; gap: 6px 14px; font-size: 17px; }
  nav a.home { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 14px; gap: 0; }
  .scene { min-height: 290px; order: -1; }
  .scene .abi { left: 26%; width: 48%; }
  .scene .sun { width: 26%; right: 6%; }
  .scene .wave-sparks { left: 16%; }
  .button { font-size: 21px; padding: 13px 28px; }
  .hill { height: 80px; margin-top: -10px; }
}