/* Atta Kid's support pages. One stylesheet, the app's own colours and faces: Righteous for the
   name, Poppins for everything else, lavender ground, plum ink. */
:root {
  --plum: #3E2A6E;
  --ink: #2C2340;
  --grey: #6B6480;
  --primary: #5B50F3;
  --lavender: #CFC6F5;
  --lavender-soft: #EFE9FF;
  --page: #F4F1FB;
  --card: #FFFFFF;
  --sun: #FFC93C;
  /* Ink for anything sitting on --primary. By night the primary is the light one, so white on it
     is the pair that stops working. */
  --on-primary: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root {
    --plum: #E6E0FF;
    --ink: #EDE9F8;
    --grey: #A8A3C0;
    --primary: #A79BFF;
    --lavender: #4B4470;
    --lavender-soft: #2A2442;
    --page: #17132A;
    --card: #211B3A;
    --on-primary: #1A1533;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
a { color: var(--primary); }
.band {
  background: linear-gradient(180deg, var(--lavender-soft), var(--page));
  border-radius: 0 0 36px 36px;
  padding: 28px 20px 34px;
  text-align: center;
}
.mark {
  font-family: Righteous, Poppins, sans-serif;
  font-size: 26px;
  color: var(--plum);
  text-decoration: none;
  display: inline-block;
}
.band p { margin: 6px 0 0; color: var(--grey); font-size: 14px; }
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 20px 60px;
}
h1 {
  font-family: Righteous, Poppins, sans-serif;
  font-size: 30px;
  line-height: 1.25;
  color: var(--plum);
  margin: 0 0 4px;
  font-weight: 400;
}
h2 {
  font-size: 19px;
  color: var(--plum);
  margin: 34px 0 8px;
}
h3 { font-size: 16px; color: var(--plum); margin: 22px 0 4px; }
.stamp { color: var(--grey); font-size: 13px; margin: 0 0 22px; }
.card {
  background: var(--card);
  border-radius: 20px;
  padding: 18px 20px;
  margin: 18px 0;
  box-shadow: 0 2px 10px rgba(62, 42, 110, 0.07);
}
.card :first-child { margin-top: 0; }
.card :last-child { margin-bottom: 0; }
ul { padding-left: 20px; }
li { margin: 5px 0; }
.mailto {
  display: inline-block;
  background: var(--primary);
  color: var(--on-primary);
  text-decoration: none;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 26px;
  box-shadow: 0 3px 0 rgba(62, 42, 110, 0.28);
}
.tiles { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 22px; }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }
.tile {
  display: block;
  background: var(--card);
  border-radius: 20px;
  padding: 18px 20px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(62, 42, 110, 0.07);
}
.tile strong { display: block; color: var(--plum); font-size: 17px; }
.tile span { color: var(--grey); font-size: 14px; }
footer {
  border-top: 1px solid var(--lavender);
  margin-top: 46px;
  padding-top: 18px;
  color: var(--grey);
  font-size: 13px;
  text-align: center;
}
footer a { margin: 0 8px; white-space: nowrap; }

/* Held inside the app: the bar above the page already carries the name and the title, so the site's
   own banner and its row of links are one Atta Kid too many. Everything else is the same page. */
.in-app .band, .in-app footer { display: none; }
.in-app main { padding-top: 16px; }
/* And the title twice over - once on the app's bar, once at the top of the page - is the same
   duplication one line further down. The date under it stays: that one the bar does not say. */
.in-app h1 { display: none; }
.in-app .stamp { margin-bottom: 18px; }