/* 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 {
  max-width: 720px;
  margin: 0 auto;
  padding: 22px 20px 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.mark {
  font-family: Righteous, Poppins, sans-serif;
  font-size: 24px;
  color: var(--plum);
  text-decoration: none;
  display: inline-block;
}
.band p { margin: 0; color: var(--grey); font-size: 13px; text-align: right; }
main {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 20px 60px;
}
h1 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--plum);
  margin: 0 0 6px;
  font-weight: 600;
}
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;
}
.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;
}
.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; }

/* The front page. Wider than the support pages and built from the app's own screens, each inside
   the device it runs on. Righteous stays on the name; the headlines are Poppins, set tight. */
.home { overflow-x: hidden; }
.top {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--page) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
.top div { max-width: 1080px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; }
.top nav a { color: var(--grey); text-decoration: none; font-size: 14px; font-weight: 500; margin-left: 26px; }
.top nav a:hover { color: var(--plum); }
.home section { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.home h1, .home h2 { font-weight: 600; letter-spacing: -0.025em; color: var(--plum); }
.home h1 { font-size: clamp(38px, 6.2vw, 72px); line-height: 1.06; margin: 0 auto 22px; max-width: 13em; }
.home h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; margin: 0 0 14px; }
.home section p { color: var(--grey); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; margin: 0; }
.soon {
  display: inline-block;
  margin-top: 30px !important;
  padding: 9px 18px;
  border-radius: 20px;
  background: var(--lavender-soft);
  color: var(--plum) !important;
  font-size: 14px !important;
  font-weight: 600;
}

/* A device: a dark body with the screen set into it. Every measure is a share of the width - the
   corners as an x% / y% pair worked out from the frame's own shape - so one rule draws it at any size. */
.dev { position: relative; display: flow-root; background: #121018; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 40px 80px -20px rgba(62, 42, 110, 0.35); }
/* The bezel is the picture's margin, not the body's padding: a margin in % is a share of the body's
   own width, where padding would be a share of whatever the body happens to sit in. */
.dev img { display: block; height: auto; }
.dev.phone { border-radius: 17% / 8.1%; }
.dev.phone img { width: 93.6%; margin: 3.2% auto; border-radius: 15% / 6.9%; }
.dev.pad { border-radius: 7% / 4.95%; }
.dev.pad img { width: 94%; margin: 3% auto; border-radius: 3.7% / 2.6%; }
.dev.watch { border-radius: 27% / 23.2%; }
.dev.watch img { width: 86%; margin: 7% auto; border-radius: 22% / 18.5%; }
.dev.watch::after { content: ""; position: absolute; right: -3.5%; top: 26%; width: 4.5%; height: 15%; border-radius: 0 40% 40% 0; background: #2A2733; }

.hero { text-align: center; padding-top: clamp(40px, 7vw, 96px) !important; }
.hero .lede { max-width: 32em; margin: 0 auto; }
/* All three at once: the kid's iPad behind, the parent's phone and the watch in front of it. */
.trio {
  position: relative;
  max-width: 860px;
  margin: clamp(48px, 7vw, 88px) auto 0;
  padding-bottom: 6%;
  background: radial-gradient(58% 52% at 50% 52%, var(--lavender-soft), transparent 72%);
}
.trio .pad { width: 50%; margin: 0 auto; }
.trio .phone { position: absolute; width: 24%; left: 7%; bottom: 0; }
.trio .watch { position: absolute; width: 17%; right: 9%; bottom: 5%; }

.feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; padding-top: clamp(70px, 10vw, 140px) !important; }
.feature .dev { width: min(290px, 78%); justify-self: center; }
.feature.flip .dev { order: 2; }
.feature p { max-width: 26em; }

.devices { padding-top: clamp(90px, 12vw, 170px) !important; text-align: center; }
.devices ul { list-style: none; padding: 0; margin: 46px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.devices li { margin: 0; }
.devices svg { height: 54px; width: auto; stroke: var(--primary); fill: none; stroke-width: 1.6; }
.devices strong { display: block; margin-top: 16px; color: var(--plum); font-size: 19px; font-weight: 600; }
.devices span { color: var(--grey); font-size: 15px; }
.devices .req { margin-top: 44px; font-size: 14px !important; }

.close { text-align: center; padding-top: clamp(90px, 12vw, 160px) !important; }
.close img { width: 150px; height: auto; }
.close h2 { font-family: Righteous, Poppins, sans-serif; font-weight: 400; letter-spacing: 0; font-size: clamp(34px, 5vw, 54px); margin: 14px 0 6px; }
.home footer { max-width: 1080px; margin: 90px auto 0; padding: 18px 24px 50px; }

/* Each block comes up as it is reached. Only with scripting, and never for a reader who asked for
   less motion: without either, everything is simply there. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 760px) {
  .top nav a { margin-left: 18px; }
  .trio { margin-left: -8px; margin-right: -8px; }
  .trio .pad { width: 58%; }
  .trio .phone { width: 28%; left: 2%; }
  .trio .watch { width: 20%; right: 3%; }
  .feature { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .feature .dev, .feature.flip .dev { order: 2; width: min(250px, 70%); }
  .feature p { margin: 0 auto !important; }
  .devices ul { grid-template-columns: 1fr; gap: 34px; }
}