/* Yagi — the app's face on the family skeleton (family.css stays verbatim).
   Colours come from the approved iPhone default store listing (2026-11-05): a deep night-violet
   poster wall, the Yagi orange (#E36201, AA-safe ink #B55001) and an orange cloud wash for the player.
   Yagi is dark-only (operator ruling 2026-10-27), so the page pins data-theme="dark". */
:root {
  --g1:#120c33; --g2:#4a2b94; --acc:#E36201; --sfg:#ffffff;
  --aura1:#5b33b8; --aura2:#E36201; --aura3:#2b3fb0;
  --sheen:linear-gradient(90deg,#ff9a3d,#E36201 22%,#f6c27a 46%,#9b7bff 70%,#ff9a3d);
  --ink-btn:#E36201; --ink-btn-fg:#ffffff;
  --pop:#ffffff; --pop-fg:#16122b;
}
:root[data-theme="dark"] { --bg:#09081a; --surface:#15122b; --line:#2a2548; --muted:#aaa6c4 }

/* the poster wall behind the hero: the locked panels, tilted, dimmed and faded out */
.wall { position:absolute; inset:-30% -40% 0; z-index:-2; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, rgb(0 0 0 / .9), rgb(0 0 0 / .55) 55%, transparent 92%);
          mask-image:linear-gradient(to bottom, rgb(0 0 0 / .9), rgb(0 0 0 / .55) 55%, transparent 92%) }
.wall-grid { display:grid; grid-template-columns:repeat(10, 150px); gap:18px; transform:rotate(-24deg) translate(-6%, -4%); transform-origin:center; width:max-content; opacity:.2; filter:blur(1.5px) saturate(1.15) }
.wall-grid img { width:150px; height:auto; border-radius:16px; display:block }
.wall-grid img:nth-child(2n) { margin-top:70px }
.hero .aura { opacity:.5 }

/* a soon-to-be App Store button: looks like the real one, does nothing, says so */
.btn.soon { cursor:default; opacity:.92 }
.btn.soon:hover { transform:none; box-shadow:none }
.btn.soon .soon-tag { font:700 11px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; padding:5px 8px; border-radius:999px; background:rgb(255 255 255 / .2); margin-left:4px }
.topbar .btn.sm.soon { background:var(--surface); color:var(--fg); border:1px solid var(--line) }

/* panels that span two screens in the store (1+2, 7+8) sit edge to edge */
.shots.pair { gap:0; perspective:none }
.shots.pair img, .app:nth-child(even) .shots.pair img { transform:none; border-radius:0; box-shadow:0 30px 60px -20px rgb(0 0 0 / .55) }
.shots.pair img:first-child { border-radius:clamp(14px,1.6vw,24px) 0 0 clamp(14px,1.6vw,24px) }
.shots.pair img:last-child { border-radius:0 clamp(14px,1.6vw,24px) clamp(14px,1.6vw,24px) 0 }
.stage:hover .shots.pair img, .shots.pair img:hover { transform:none !important }

/* per-stage washes, as in the listing: violet wall for the library, orange clouds for the player */
#player .stage { --g1:#2a0d05; --g2:#c2560f; --acc:#ffd29a }
#search .stage { --g1:#1b0f2e; --g2:#7a3d8f }

/* the honesty stage: pop-out cards, as in panel 10 */
/* second on the page (even), so the copy sits right: give it the wider column on desktop */
@media (min-width: 961px) { .app.honest:nth-child(even) .stage { grid-template-columns:minmax(0,5fr) minmax(0,7fr) } }
.pops { position:relative; display:grid; gap:14px; margin-top:28px; max-width:520px }
.pop { background:var(--pop); color:var(--pop-fg); border-radius:20px; padding:16px 20px; box-shadow:0 24px 50px -18px rgb(0 0 0 / .6); display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
.pop b { font:800 26px/1 var(--display); letter-spacing:-.03em }
.pop span { color:#57536e; font-size:15px }
.pop:nth-child(1) { transform:rotate(-2.5deg) translateX(-4px) }
.pop:nth-child(2) { transform:rotate(1.8deg) translateX(18px) }
.pop:nth-child(3) { transform:rotate(-1deg) translateX(6px) }
.honest .shots.one img { max-width:min(100%,320px) }

/* white device silhouettes, as on panel 1 */
.devices.silhouettes li { border-color:rgb(255 255 255 / .55); color:#fff }
.devices.silhouettes svg { stroke:#fff }

.pro { display:inline-block; font:700 11px/1 var(--body); letter-spacing:.06em; padding:4px 7px; border-radius:999px; background:var(--acc); color:#fff; margin-left:6px; vertical-align:2px }
#player .pro { background:#E36201 }
.illus { margin:22px 0 0; font-size:13px; opacity:.7; max-width:46ch }
.card .ico { background:color-mix(in srgb, var(--acc) 16%, var(--surface)); color:#ff8a3a }
.chip.dot::before { background:var(--acc) }
.disclaim { font-size:13px; line-height:1.6; margin:0 }

@media (max-width: 960px) {
  .honest .stage { grid-template-columns:minmax(0,1fr) }
  .shots.pair { grid-auto-columns:minmax(0,1fr); overflow:visible; margin-inline:0; padding:0; scroll-snap-type:none; max-width:560px; margin:0 auto }
  .shots.pair img { scroll-snap-align:none }
}
@media (max-width: 600px) {
  .wall-grid { grid-template-columns:repeat(10, 96px); gap:12px }
  .wall-grid img { width:96px; border-radius:10px }
  .pop b { font-size:22px }
  .pop:nth-child(2) { transform:rotate(1.8deg) translateX(8px) }
}

/* closing stage, centred, as on the sibling sites */
.cta { margin-top:clamp(56px,8vw,112px); padding-inline:clamp(8px,2vw,24px) }
.cta .stage { grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center; padding-block:clamp(48px,7vw,96px) }
.cta .line { margin-inline:auto }
.cta .water { right:auto; left:50%; translate:-50% 0 }
#trust .cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) }
footer .disclaim { max-width:70ch }
.legal-page h3 { font:600 17px/1.3 var(--body); margin:24px 0 8px }
.legal-page strong { color:var(--fg) }
@media (max-width: 600px) {
  .pop:nth-child(n) { transform:none }
  .pop:nth-child(1) { transform:rotate(-1.5deg) }
  .pop:nth-child(3) { transform:rotate(1deg) }
}