/* Apps & Games: current design language (banner hero, bold sans titles, yellow underline,
   site-style cards, yellow chip CTA with a bottom-right cut). Loaded after each page's own CSS. */
:root { --am-yellow: #EDE400; --am-turq: #22e6d4; }
html body .page-head h1, html body .hero h1, html body .how-it-works h2, html body .privacy-strip h2, html body .cta-section h2, html body .features h2 {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; }
html body .page-head h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
html body .page-head h1, html body .hero h1 { display: inline-block; background-image: linear-gradient(var(--am-yellow), var(--am-yellow));
  background-repeat: no-repeat; background-position: 0 94%; background-size: 100% 0.12em; padding-bottom: 0.1em; }
/* Heads that underline a single word (Craft, Apps & Games) must not also underline the whole title. */
html body .cr-head h1 { display: block; background-image: none; padding-bottom: 0; }
html body .page-head { border-bottom: none; padding-bottom: 8px; margin-bottom: 40px; align-items: flex-start; }
html body .page-intro { margin-top: 0; }

/* ── Hero banner (app pages) ── */
html body .hero { position: relative; overflow: hidden; align-items: flex-start; justify-content: flex-end; text-align: left;
  min-height: clamp(480px, 70vh, 700px); padding: clamp(110px, 15vh, 160px) max(24px, calc((100% - 1200px) / 2)) clamp(52px, 8vh, 88px);
  background: #0D0D0D var(--hero-img, none) center / cover no-repeat; }
html body .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.62) 48%, rgba(0,0,0,0.3) 100%); }
html body .hero > * { position: relative; z-index: 2; }
html body .hero h1 { font-size: clamp(2.6rem, 6.6vw, 5.2rem); color: #FAF9F7; margin-bottom: 20px; }
html body .hero-tagline { font-family: var(--sans); font-style: normal; font-weight: 500; font-size: clamp(1.05rem, 2vw, 1.4rem); color: #EDEAE4; margin-bottom: 18px; }
html body .hero-desc { margin: 0 0 34px; max-width: 620px; color: #DAD7D0; }
html body .app-back { color: #CDCAC2; margin-bottom: 26px; }
html body .app-icon { margin: 0 0 26px; }
html body .app-eyebrow { color: #CDCAC2; margin-bottom: 0; }
html body .hero .wv-kicker { margin-bottom: 26px; }
html body .download-row { justify-content: flex-start; }
html body .store-btn { background: transparent; border: 1px solid rgba(250,249,247,0.55); color: #FAF9F7; padding: 15px 26px; border-radius: 0; }
html body .store-btn .store-btn-sub { color: #CDCAC2; }
html body .store-btn:hover { background: #FAF9F7; color: #0C0C0B; border-color: #FAF9F7; }
html body .store-btn:hover .store-btn-sub { color: #444; }
/* Button icons stay visible in light mode: the hero is always dark, and the closing button is always black on yellow. */
html body .hero .store-btn svg { stroke: #FAF9F7; }
html body .hero .store-btn svg[fill]:not([fill="none"]) { fill: #FAF9F7; stroke: none; }
html body .hero .store-btn:hover svg { stroke: #0C0C0B; }
html body .hero .store-btn:hover svg[fill]:not([fill="none"]) { fill: #0C0C0B; stroke: none; }
html body .cta-section .store-btn svg[fill]:not([fill="none"]) { fill: var(--am-yellow); stroke: none; }
html body .hero-scroll { display: none; }

/* ── Sections ── */
html body .how-it-works { max-width: 1200px; padding: clamp(64px, 9vw, 110px) 24px; text-align: left; border-bottom: none; }
html body .how-it-works h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); max-width: 18ch; }
html body .how-it-works p { max-width: 720px; }
html body .difficulty-section { border-bottom: none; padding: 0 max(24px, calc((100% - 1200px) / 2)) clamp(48px, 7vw, 84px); }
html body .difficulty-header { padding: 0 0 22px; }
html body .difficulty-grid { gap: 28px; }
html body .difficulty-card { position: relative; background: var(--bg2); border: 1px solid var(--rule) !important; padding: 36px 32px 40px; overflow: hidden;
  transition: border-color .2s, transform .2s; }
html body .difficulty-card:hover { border-color: var(--stone) !important; transform: translateY(-3px); }
html body .difficulty-card h3 { font-family: var(--sans); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
html body .difficulty-card::after { content: ''; position: absolute; top: 0; right: 0; width: 110px; height: 56px; opacity: .55; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2064%2064%27%20fill=%27none%27%20stroke=%27%2322e6d4%27%20stroke-width=%271.6%27%3E%3Cpath%20d=%27M64%2016H40L30%2026H6.6%27/%3E%3Cpath%20d=%27M64%2036H48L38%2046H6.6%27/%3E%3Ccircle%20cx=%274%27%20cy=%2726%27%20r=%272.6%27/%3E%3Ccircle%20cx=%274%27%20cy=%2746%27%20r=%272.6%27/%3E%3C/svg%3E") right top / contain no-repeat; }
html body .privacy-strip { margin: 0 max(24px, calc((100% - 1200px) / 2)) clamp(48px, 7vw, 84px); padding: clamp(36px, 5vw, 64px); background: var(--bg2); border: 1px solid var(--rule); gap: 56px; }
html body .privacy-strip h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }

/* ── Closing CTA: the yellow chip ── */
html body .cta-section { position: relative; overflow: hidden; text-align: center; background: var(--am-yellow); color: #141414;
  margin: clamp(32px, 5vw, 72px) max(24px, calc((100% - 1500px) / 2)) clamp(40px, 6vw, 80px); padding: clamp(64px, 9vw, 112px) 24px clamp(80px, 11vw, 140px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 132px), calc(100% - 132px) 100%, 0 100%); }
html body .cta-section::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.035) 3px 4px); }
html body .cta-section > * { position: relative; z-index: 2; }
html body .cta-section h2 { color: #141414; font-size: clamp(2rem, 4.4vw, 3.2rem); }
html body .cta-section h2 em { font-style: normal; opacity: .6; }
html body .cta-section .store-btn { background: #141414; border-color: #141414; color: var(--am-yellow); }
html body .cta-section .store-btn .store-btn-sub { color: rgba(237,228,0,.75); }
html body .cta-section .store-btn svg { stroke: var(--am-yellow); }
html body .cta-section .store-btn:hover { background: #000; color: #fff; }

/* ── Apps hub ── */
html body .apps-grid { gap: 28px; background: none; border: none; }
html body .app-card { position: relative; background: var(--bg2); border: 1px solid var(--rule); padding: 32px; transition: border-color .2s, transform .2s; }
html body .app-card:hover { border-color: var(--stone); transform: translateY(-3px); }
html body .app-card-name { font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; }
html body .app-card--soon { background: transparent; border-style: dashed; }
html body .app-card--soon:hover { transform: none; border-color: var(--rule); }
[data-theme="light"] html body .app-card, html[data-theme="light"] body .app-card { background: #EDEAE5; }
@media (max-width: 900px) {
  html body .hero { min-height: 0; padding-top: calc(50px + 64px); }
  html body .difficulty-grid { gap: 18px; }
  html body .difficulty-card { padding: 28px 22px 32px; }
  /* Tablet and phone: icon beside the text, at a size that suits the screen, instead of a huge icon above it. */
  html body .difficulty-card { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; align-items: start; }
  html body .difficulty-card .diff-icon { grid-row: 1 / span 2; width: 56px; height: 56px; margin: 0; }
  html body .difficulty-card h3 { margin: 2px 0 6px; }
  html body .difficulty-card p { margin: 0; }
  html body .privacy-strip { padding: 32px 22px; gap: 36px; }
  html body .cta-section { margin-left: 24px; margin-right: 24px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 72px), calc(100% - 72px) 100%, 0 100%); }
  html body .apps-grid { gap: 18px; }
}
html body .cta-section .download-row { justify-content: center; }