/* The purple Apps page (pages/purple/apps.php) and app details pages
   (includes/purple/app-page.php); docs/purple-rollout.md, step 6. Markup helpers:
   includes/purple/apps-kit.php. Started as a copy of the mockup's live/apps-kit.css. */
/* App pages are static files whose own styles (and their margin reset) are taken out, so the
   browser's default 8px page margin has to go: it showed as a pale frame round the plum hero. */
body.pv-body { margin: 0; }

/* ---- the plum hero with the tablet ---- */
.ap-hero { background: var(--pv-plum); color: #fff; padding: 40px 0 110px; position: relative; overflow: hidden; }
/* the words take only the width they need (up to 600px) and the tablet sits right beside them, so
   it is close to short text and moves right when the text runs wider (Blake, 2026-10-02) */
.ap-hero .pv-wrap { display: grid; grid-template-columns: fit-content(600px) minmax(480px, 1fr); gap: 44px; align-items: center; position: relative; }
.ap-hero .ey { font: 700 11.5px 'DM Sans', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pv-lav); margin: 0 0 14px; }
/* only the hero titles are Bold; every heading under them is Semibold 600, as on the rest of the
   site (Blake, 2026-10-06) */
.ap-hero h1 { font: 700 56px/1.02 'Fredoka', sans-serif !important; color: #fff !important; letter-spacing: -.5px; margin: 0; text-wrap: balance; }
.ap-hero h1 span { color: var(--pv-orange); }
.ap-hero p.lede { font: 500 20px/1.5 'DM Sans', sans-serif; color: var(--pv-lav); margin: 22px 0 32px; max-width: 540px; }
.ap-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 16px 28px; font: 700 17px 'DM Sans', sans-serif; text-decoration: none; white-space: nowrap; background: var(--pv-orange); color: var(--pv-plum); transition: background .15s; }
.ap-btn:hover { background: var(--pv-orange-d); }
/* A second store beside the App Store button (Amazon, for the apps that are there): the same
   size and shape, outlined (Blake, 2026-10-06) */
.ap-btn.alt { padding: 14px 26px; border: 2px solid rgba(255,255,255,.55); background: transparent; color: #fff; }
.ap-btn.alt:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.ap-hero .fine { font-size: 13px; color: var(--pv-lav); margin-top: 16px; }
.ap-hero .curve { position: absolute; left: 0; right: 0; bottom: -2px; height: 70px; background: var(--pv-cream); border-radius: 100% 100% 0 0 / 100% 100% 0 0; }
.ap-stage { position: relative; height: 420px; }
.ap-stage .glow { position: absolute; left: -70px; top: -40px; width: 640px; height: 510px; background: radial-gradient(closest-side, rgba(99,75,245,.6), rgba(99,75,245,0)); pointer-events: none; }
/* the tablet: the picture sits in the frame PNG's screen hole (as hub.css .tablet) */
.ap-tablet { position: absolute; left: 0; top: 30px; width: 470px; transform: rotate(-4deg); filter: drop-shadow(0 30px 50px rgba(0,0,0,.4)); }
.ap-tablet .frame { position: relative; z-index: 2; width: 100%; height: auto; display: block; }
.ap-tablet video, .ap-tablet .shot { position: absolute; z-index: 1; left: 5.24%; top: 5.98%; width: 89.48%; height: 87.97%; object-fit: cover; border-radius: 2.5%; background: #000; }
/* an app that is played upright: the same frame turned on its side, the screen hole turned with it */
.ap-tablet.portrait { width: 318px; aspect-ratio: 1455 / 1910; left: 36px; top: 4px; transform: rotate(4deg); }
.ap-tablet.portrait .frame { position: absolute; left: 50%; top: 50%; width: 131.27%; transform: translate(-50%, -50%) rotate(90deg); }
.ap-tablet.portrait video, .ap-tablet.portrait .shot { left: 6.05%; top: 5.24%; width: 87.97%; height: 89.48%; }

/* ---- app details hero ---- */
/* the breadcrumb is its own row above the hero's two columns, at the height and size of every other
   page's (purple-hub.css .crumbs: 13px, capital case, 28px under the header bar), in the hero's
   light colours */
.ap-hero.detail { padding-top: 0; }
.ap-hero .pv-wrap.ap-crumbrow { display: block; }
.ap-crumbs { font-size: 13px; font-weight: 400; letter-spacing: .2px; color: var(--pv-lav); padding: 28px 0 12px; }
.ap-crumbs a { color: #fff; text-decoration: none; }
.ap-crumbs span { margin: 0 6px; opacity: .6; }
.ap-id { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.ap-id img { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 14px 34px rgba(0,0,0,.35); flex: none; }
.ap-hero.detail h1 { font-size: 46px !important; line-height: 1.05 !important; margin-bottom: 10px; }
.ap-hero.detail h1.long { font-size: 34px !important; }
.ap-hero.detail p.lede { margin-top: 0; font-size: 18px; }
.ap-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ap-meta .badge { background: rgba(255,255,255,.14); color: #fff; border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: 12px; white-space: nowrap; }
.ap-meta .rating { font-size: 13px; font-weight: 700; color: #fff; }
.ap-meta .stars { color: var(--pv-orange); letter-spacing: -1px; }

/* ---- sections ---- */
.ap-sec { padding: 44px 0 8px; }
.ap-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; gap: 12px 20px; flex-wrap: wrap; }
.ap-head h2 { font: 600 34px/1.1 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; letter-spacing: -.3px; margin: 0; }
.ap-head span { color: var(--pv-muted); font-size: 14px; }
.ap-head a { color: var(--pv-violet); font-weight: 700; font-size: 14px; text-decoration: none; }
.ap-cat { font: 600 22px/1.2 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 34px 0 14px; }
.ap-cat:first-of-type { margin-top: 0; }
.ap-cat small { font: 600 13px 'DM Sans', sans-serif; color: var(--pv-muted); margin-left: 8px; }

/* app cards: the whole card is the link to that app's page */
.ap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ap-card { background: #fff; border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 6px 20px rgba(52,30,96,.07); text-decoration: none; color: inherit; min-width: 0; transition: transform .15s, box-shadow .15s; }
.ap-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(52,30,96,.12); }
.ap-card:focus-visible { outline: 3px solid var(--pv-violet); outline-offset: 3px; }
.ap-card img { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 8px 20px rgba(52,30,96,.18); }
.ap-card h3 { font: 600 21px/1.18 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ap-card p { font-size: 14px; color: var(--pv-muted); line-height: 1.5; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ap-card .badge { align-self: flex-start; background: #ece8ff; color: var(--pv-violet-d); border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: 12px; white-space: nowrap; }

/* what the app teaches: one white card per group of skills */
.ap-learn { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 18px; }   /* --n: up to four across */
.ap-skill { background: #fff; border-radius: 24px; padding: 22px 22px 20px; box-shadow: 0 6px 20px rgba(52,30,96,.07); }
.ap-skill h3 { font: 600 19px/1.15 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 0 0 8px; }
.ap-skill ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ap-skill li { font-size: 13.5px; color: var(--pv-muted); line-height: 1.45; padding-left: 14px; position: relative; }
.ap-skill li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--pv-orange); }
.ap-learn.one { grid-template-columns: 1fr; }
.ap-learn.one .ap-skill ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }

/* the plum band: why people choose it / about the app, with the app's screenshots */
.ap-why { background: var(--pv-plum); color: #fff; padding: 60px 0; margin-top: 52px; }
.ap-why .pv-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.ap-why.solo .pv-wrap { grid-template-columns: 1fr; max-width: 860px; }
.ap-why .ey { font: 700 11.5px 'DM Sans', sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pv-lav); margin: 0 0 12px; }
.ap-why h2 { font: 600 38px/1.1 'Fredoka', sans-serif !important; color: #fff !important; margin: 0 0 12px; }
.ap-why p { color: var(--pv-lav); line-height: 1.6; margin: 0 0 14px; font-size: 16px; }
.ap-why ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.ap-why li { display: flex; gap: 12px; color: var(--pv-lav); line-height: 1.5; font-size: 16px; }
.ap-why li::before { content: '\2713'; color: var(--pv-orange); font-weight: 800; }
.ap-shots { display: flex; justify-content: center; gap: 16px; }
.ap-shots img { width: 30%; max-width: 190px; height: auto; border-radius: 18px; box-shadow: 0 20px 44px rgba(0,0,0,.35); }
.ap-shots img:nth-child(1) { transform: rotate(-3deg); } .ap-shots img:nth-child(3) { transform: rotate(3deg); }
.ap-shots img:nth-child(2) { transform: translateY(-10px); }

/* kid-safe promise (apps page) */
.ap-promise { padding: 60px 0 44px; text-align: center; }
.ap-promise h2 { font: 600 42px/1.1 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 0; }
.ap-promise p { font-size: 18px; color: var(--pv-muted); margin: 12px auto 0; max-width: 620px; line-height: 1.5; }
.ap-promise .badges { display: flex; justify-content: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.ap-promise .badges span { background: #fff; border-radius: 999px; padding: 12px 20px; font-weight: 700; color: var(--pv-plum); box-shadow: 0 6px 18px rgba(52,30,96,.08); }
.ap-end { height: 44px; }
.ap-note { text-align: center; color: var(--pv-muted); padding: 40px 0; }

@media (max-width: 960px) {
  .ap-hero { padding-top: 28px; } .ap-hero.detail { padding-top: 0; }
  .ap-hero .pv-wrap, .ap-why .pv-wrap { grid-template-columns: 1fr; }
  .ap-hero h1 { font-size: 42px !important; }
  .ap-hero.detail h1 { font-size: 34px !important; } .ap-hero.detail h1.long { font-size: 28px !important; }
  /* the tablet drops under the words, upright and centred */
  .ap-stage { height: auto; margin-top: 8px; }
  .ap-stage .glow { display: none; }
  .ap-tablet { position: relative; left: auto; top: auto; width: min(100%, 460px); margin: 0 auto; transform: none; }
  .ap-tablet.portrait { left: auto; top: auto; width: min(70%, 300px); transform: none; }
  .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ap-learn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ap-hero h1 { font-size: 36px !important; }
  .ap-hero p.lede { font-size: 17px; margin: 16px 0 24px; }
  .ap-btn { padding: 14px 22px; font-size: 16px; white-space: normal; text-align: center; }
  .ap-id img { width: 72px; height: 72px; border-radius: 18px; }
  .ap-grid, .ap-learn, .ap-learn.one .ap-skill ul { grid-template-columns: 1fr; }
  .ap-head h2 { font-size: 28px !important; } .ap-why h2 { font-size: 30px !important; } .ap-promise h2 { font-size: 32px !important; }
}