@font-face {
  font-family: Fredoka;
  src: url("./fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --page: light-dark(#edf5f2, #172321);
  --wash: light-dark(#d8eee6, #25433a);
  --ink: light-dark(#172d39, #eff9f5);
  --muted: light-dark(#405a62, #bfd1d0);
  --accent: light-dark(#106658, #9ce0cb);
  --card: light-dark(#fff, #202d30);
  --line: light-dark(#d4e3df, #3b5351);
  --button: light-dark(#145f52, #a8e3d0);
  --button-ink: light-dark(#fff, #16382e);
  --secondary: light-dark(#f0f8f5, #293d39);
  --shadow: light-dark(#234f4214, #0004);
  font-family: system-ui, sans-serif;
  color: var(--ink);
  background: var(--page);
}

* { box-sizing: border-box; }
body { margin: 0; background-color: var(--page); }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }

.page {
  --page-pad-block: clamp(12px, 3.2dvh, 36px);
  --page-pad-inline: clamp(12px, 3.2vw, 54px);
  --app-padding: clamp(12px, 1.55vw, 22px);
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(9px, 2.2dvh, 24px);
  padding: max(var(--page-pad-block), env(safe-area-inset-top, 0px))
           max(var(--page-pad-inline), env(safe-area-inset-right, 0px))
           max(var(--page-pad-block), env(safe-area-inset-bottom, 0px))
           max(var(--page-pad-inline), env(safe-area-inset-left, 0px));
  background: radial-gradient(ellipse 74% 48% at 50% 0%, var(--wash), transparent), var(--page);
}

.site-header { text-align: center; }
.brand { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.25vw, 16px); }
.brand img { width: clamp(30px, 6.5dvh, 54px); height: auto; }
h1 { font: 600 clamp(30px, min(5.5vw, 7.3dvh), 64px)/1 Fredoka, system-ui, sans-serif; letter-spacing: -.032em; }
h1 span { color: var(--accent); }
.site-header p { margin-top: 8px; color: var(--muted); font-size: clamp(12px, 1.45vw, 17px); }

.apps { grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.45vw, 23px); min-height: 0; width: 100%; max-width: 1780px; margin: 0 auto; }
.app {
  display: grid;
  grid-template-rows: auto minmax(74px, 1fr) auto auto;
  gap: clamp(9px, 1.8dvh, 17px);
  min-width: 0;
  min-height: 0;
  padding: var(--app-padding);
  border: 1px solid var(--line);
  border-radius: clamp(17px, 1.6vw, 24px);
  background: var(--card);
  box-shadow: 0 8px 25px var(--shadow);
}

.app-head { display: flex; align-items: center; gap: 11px; min-width: 0; }
.app-head img { flex: none; width: clamp(35px, 5.9dvh, 52px); height: auto; border-radius: 24%; }
.category { margin-bottom: 3px; color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
h2 { font: 600 clamp(20px, 2.45vw, 34px)/1.04 Fredoka, system-ui, sans-serif; letter-spacing: -.025em; }

.art-slot { container-type: size; min-width: 0; min-height: 0; display: grid; place-items: center; }
.art {
  container-type: size;
  width: min(100cqw, 195cqh);
  height: min(100cqh, 67cqw);
  display: grid;
  place-items: center;
  border-radius: 13px;
  overflow: hidden;
}
.art > img {
  display: block;
  width: 100cqw;
  height: 100cqh;
  object-fit: cover;
}
.ipad-gallery {
  grid-template-columns: 1fr 1fr;
  align-content: center;
  gap: clamp(4px, .75vw, 12px);
  padding: clamp(6px, 1.1vw, 18px);
  background: #dcf1e8 url("./checkin-preview-backdrop.svg") center / cover no-repeat;
}
.ipad-preview {
  display: grid;
  place-items: center;
  gap: clamp(4px, 1.3cqh, 11px);
  margin: 0;
  width: min(100%, max(60px, calc((100cqh - 35px) * 1.32)));
  min-width: 0;
  color: #23443d;
  font: 650 clamp(9px, .95vw, 14px)/1.25 system-ui, sans-serif;
  text-align: center;
}
.ipad-preview:first-child { align-self: center; transform: translateY(clamp(-13px, -3cqh, 0px)); }
.ipad-preview:last-child { align-self: center; transform: translateY(clamp(0px, 3cqh, 13px)); }
.ipad {
  display: block;
  width: 100%;
  padding: clamp(3px, .4vw, 7px);
  border: 1px solid #4d6472;
  border-radius: clamp(7px, .9vw, 16px);
  background: #1d2933;
  box-shadow: 0 8px 14px #173c4b37;
}
.ipad img { display: block; width: 100%; height: auto; border-radius: clamp(3px, .5vw, 9px); }

.promo {
  position: relative;
  isolation: isolate;
  align-content: center;
  gap: 3cqh;
  color: var(--promo-ink);
  text-align: center;
}
.promo-maths {
  --promo-ink: #15345b;
  background:
    radial-gradient(circle at 103% 105%, #7cacf7 0 27%, transparent 27.3%),
    radial-gradient(circle at -4% 6%, #ffdb89 0 17%, transparent 17.3%),
    linear-gradient(132deg, #f1f7ff, #c7ddfa);
}
.promo-maths::before {
  content: "";
  position: absolute;
  inset: 28% 48% 0 0;
  background-image: linear-gradient(to right, #6d9dd455 1px, transparent 1px), linear-gradient(#6d9dd455 1px, transparent 1px);
  background-size: 6cqh 6cqh;
  mask-image: linear-gradient(105deg, #000, transparent);
  z-index: -1;
}
.promo-word {
  --promo-ink: #392353;
  background: #ede1f9 url("./word-preview-backdrop.svg") center / cover no-repeat;
}
.promo-copy { display: grid; gap: 1.1cqh; white-space: nowrap; }
.promo-copy strong { font: 640 clamp(9px, 10.5cqh, 42px)/1 Fredoka, system-ui, sans-serif; letter-spacing: -.018em; }
.promo-copy span { font: 650 clamp(7px, 4.3cqh, 17px)/1.15 system-ui, sans-serif; }
.promo .promo-device {
  width: min(86cqw, 106cqh);
  padding: clamp(2px, 1.7cqh, 8px);
  border-radius: clamp(5px, 4.6cqh, 18px);
  border-color: #4b5a74;
  box-shadow: 0 2cqh 4cqh #24315245;
}
.promo-device img { border-radius: clamp(2px, 2.4cqh, 10px); }

@container (max-height: 92px) {
  .promo-copy span { display: none; }
}

.description { color: var(--muted); font-size: clamp(13px, 1.13vw, 16px); line-height: 1.45; }
.description strong { display: block; margin-bottom: .22em; color: var(--ink); font-weight: 700; }
.actions { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 8px; align-self: end; }
.actions a, .app-picker button {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--button);
  color: var(--button-ink);
  font: 700 clamp(12px, 1.05vw, 15px)/1.15 system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
}
.actions a:hover { text-decoration: underline; }
.actions .secondary { color: var(--ink); background: var(--secondary); border-color: var(--line); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (min-width: 1024px) {
  .page { height: 100dvh; grid-template-rows: auto minmax(0, min(575px, 15vw + 270px)); align-content: center; }
  .apps {
    grid-row: 2;
    grid-template-rows: auto minmax(74px, 1fr) auto auto;
    row-gap: clamp(9px, 1.8dvh, 17px);
  }
  .app { grid-row: 1 / span 4; grid-template-rows: subgrid; row-gap: inherit; }
  h2 { font-size: clamp(18px, 1.8vw, 33px); }
}

@media (max-width: 1023px) {
  .page { container-type: inline-size; background: var(--page); }
  .page:has(.app-picker:not([hidden])) { height: 100dvh; }
  .apps { grid-template-columns: minmax(0, 1fr); max-width: 670px; }
  .app-picker:not([hidden]) + .apps {
    --preview-height: calc((min(670px, 100cqw) - 2 * var(--app-padding) - 2px) * .67);
    grid-template-rows: auto minmax(58px, var(--preview-height)) auto auto;
    row-gap: clamp(7px, 1.8dvh, 17px);
    align-content: start;
  }
  .app-picker:not([hidden]) + .apps .app { grid-area: 1 / 1 / span 4; grid-template-rows: subgrid; row-gap: inherit; }
  .app[inert] { visibility: hidden; }
  .app-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 670px; margin: 0 auto; }
  .app-picker button { min-height: 36px; padding: 4px; color: var(--ink); border-color: var(--line); background: var(--card); cursor: pointer; }
  .app-picker button[aria-pressed="true"] { background: var(--button); color: var(--button-ink); border-color: transparent; }
  .ipad-preview { font-size: clamp(10px, 2.5vw, 14px); }
}

@media (max-height: 510px) {
  .page { --page-pad-block: 8px; gap: 7px; }
  .site-header p { margin-top: 4px; }
  .app { gap: 7px; padding-block: 9px; }
}

@media (max-height: 450px) and (max-width: 1023px) and (min-width: 550px) {
  .app-picker:not([hidden]) + .apps { grid-template-rows: minmax(0, 1fr); }
  .app-picker:not([hidden]) + .apps .app { grid-area: 1 / 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 13px; }
  .art-slot { grid-area: 1 / 1 / 4; }
  .description { align-self: center; }
}