/* Product-style surface for PsyGuild Apps. It deliberately does not use article
   metadata, reading measure, or the generic post/iframe presentation. */
body.single-psyguild_app {
  --pg-app-green: #145c39;
  --pg-app-green-soft: #428c39;
  --pg-app-orange: #ff8a24;
  --pg-app-ink: #17251f;
  --pg-app-cream: #fff7e8;
  background:
    radial-gradient(circle at 2% 25%, rgba(142, 223, 205, .22), transparent 27rem),
    radial-gradient(circle at 94% 20%, rgba(255, 195, 107, .24), transparent 30rem),
    linear-gradient(180deg, #f6fcff 0%, #fffaf0 45%, #fff7eb 100%);
}

.pg-app-page {
  width: min(1480px, calc(100% - 40px));
  margin: 0 auto;
  padding: 18px 0 80px;
  color: var(--pg-app-ink);
}

.pg-app-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(300px, .84fr);
  align-items: center;
  min-height: 0;
  padding: 10px clamp(28px, 4vw, 64px);
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(circle at 71% 42%, rgba(255, 176, 67, .18), transparent 12rem),
    radial-gradient(circle at 98% 48%, rgba(171, 211, 90, .24), transparent 16rem),
    linear-gradient(112deg, #fff9ea 0%, #fff4d9 52%, #f7f0c9 100%);
  box-shadow: 0 22px 64px rgba(33, 84, 58, .08);
}

.pg-app-hero::before,
.pg-app-hero::after {
  position: absolute;
  z-index: 0;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.pg-app-hero::before { right: -7rem; bottom: -9rem; background: rgba(119, 177, 74, .12); }
.pg-app-hero::after { right: 29%; top: -12rem; background: rgba(255, 190, 65, .11); }

.pg-app-hero__content { position: relative; z-index: 1; max-width: 620px; }

.pg-app-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .35rem;
  padding: .43rem .72rem;
  border: 1px solid rgba(255, 140, 36, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .64);
  color: var(--pg-app-orange);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pg-app-eyebrow i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.pg-app-hero__title {
  max-width: 10ch;
  margin: 0;
  color: var(--pg-app-green);
  font-size: clamp(2.55rem, 4.1vw, 4.4rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.07em;
}

.pg-app-hero__title strong { color: var(--pg-app-orange); font: inherit; }
.pg-app-hero__description { max-width: 31rem; margin: .55rem 0 .8rem; font-size: clamp(.92rem, 1.18vw, 1.04rem); line-height: 1.45; }
.pg-app-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.pg-app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 43px;
  padding: .62rem 1.08rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.pg-app-button:hover { transform: translateY(-2px); }
.pg-app-button--primary { background: var(--pg-app-green); color: #fff; box-shadow: 0 10px 20px rgba(20, 92, 57, .22); }
.pg-app-button--secondary { border-color: rgba(255, 138, 36, .55); color: var(--pg-app-orange); background: rgba(255, 255, 255, .36); }

.pg-app-hero__art { position: relative; z-index: 1; justify-self: center; width: min(100%, 335px); aspect-ratio: 1.35; }
.pg-app-hero__art::before { position: absolute; inset: 5% 0 0; border-radius: 48% 52% 50% 50%; background: linear-gradient(145deg, rgba(255,255,255,.48), rgba(255,196,86,.36)); content: ''; transform: rotate(-8deg); }
.pg-app-hero__art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 18px rgba(113, 75, 20, .17)); }
.pg-app-hero__fallback-icon { position: relative; z-index: 1; display: grid; width: 100%; height: 100%; place-items: center; font-size: clamp(7rem, 13vw, 12rem); filter: drop-shadow(0 18px 14px rgba(113, 75, 20, .18)); }
.pg-app-hero__spark { position: absolute; z-index: 2; color: #f5b732; font-size: 1.45rem; }
.pg-app-hero__spark--one { top: 12%; left: 7%; }.pg-app-hero__spark--two { right: 4%; bottom: 21%; font-size: .92rem; }

.pg-app-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 18px auto 24px; padding: .35rem .8rem; list-style: none; border: 1px solid rgba(255,255,255,.78); border-radius: 19px; background: rgba(255, 255, 255, .6); box-shadow: 0 12px 32px rgba(35, 76, 44, .05); backdrop-filter: blur(12px); }
.pg-app-highlights li { display: flex; align-items: center; gap: .7rem; min-width: 0; padding: .55rem clamp(.65rem, 2vw, 1.6rem); }
.pg-app-highlights li + li { border-left: 1px solid rgba(20, 92, 57, .12); }
.pg-app-highlights b, .pg-app-highlights small { display: block; }.pg-app-highlights b { font-size: .9rem; }.pg-app-highlights small { margin-top: .12rem; color: #526057; font-size: .74rem; line-height: 1.3; }
.pg-app-highlight__icon { display: grid; flex: 0 0 35px; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: #e1efca; color: var(--pg-app-green); font-weight: 900; }.pg-app-highlight__icon--orange { background: #fff0ce; color: var(--pg-app-orange); }

.pg-app-section { position: relative; padding: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.92); border-radius: 32px; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,247,229,.92)); box-shadow: 0 30px 80px rgba(33, 84, 58, .1), 0 8px 25px rgba(255, 142, 54, .08); }
.pg-app-section__label { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 34px; margin: -1px 0 4px; color: var(--pg-app-green); font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-align: center; text-transform: uppercase; }.pg-app-section__label span { color: #8cb860; }
.pg-app-frame-wrap { position: relative; overflow: hidden; border-radius: 24px; background: #fff9ed; }
/* Google Apps Script adds a permanent scrollbar in its hosting wrapper. Keep
   scrolling available, but visually integrate that wrapper with the app card. */
.pg-app-frame-wrap::after { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 24px; content: ''; pointer-events: none; background: linear-gradient(90deg, rgba(255,249,237,0), #fff9ed 62%); }
.pg-app-frame { display: block; width: 100%; height: 900px; border: 0; background: #fff9ed; }
.pg-app-empty { max-width: 700px; margin: 2rem auto 0; padding: 3rem 2rem; border-radius: 28px; background: rgba(255,255,255,.7); text-align: center; }.pg-app-empty h2 { margin-top: 0; color: var(--pg-app-green); }

@media (max-width: 768px) {
  .pg-app-page { width: calc(100% - 20px); padding-top: 16px; padding-bottom: 50px; }
  .pg-app-hero { grid-template-columns: 1fr; min-height: 0; padding: 25px 22px 17px; border-radius: 24px; }
  .pg-app-hero__title { font-size: clamp(2.8rem, 14vw, 4.1rem); }.pg-app-hero__description { margin-top: .85rem; }
  .pg-app-hero__art { width: min(76%, 270px); margin: -1.1rem auto -1.8rem; order: -1; }.pg-app-hero__content { display: contents; }.pg-app-eyebrow { order: -2; align-self: start; width: max-content; }.pg-app-hero__title, .pg-app-hero__description, .pg-app-hero__actions { position: relative; z-index: 2; }.pg-app-hero__title { margin-top: .15rem; }
  .pg-app-button { flex: 1 1 0; min-height: 44px; padding: .65rem .8rem; font-size: .84rem; white-space: nowrap; }
  .pg-app-highlights { grid-template-columns: 1fr; margin: 12px 0 16px; padding: .38rem .7rem; border-radius: 18px; }.pg-app-highlights li { padding: .42rem .25rem; }.pg-app-highlights li + li { border-top: 1px solid rgba(20, 92, 57, .1); border-left: 0; }.pg-app-highlights small { font-size: .7rem; }
  .pg-app-section { padding: 5px; border-radius: 24px; }.pg-app-section__label { min-height: 31px; font-size: .65rem; letter-spacing: .055em; }.pg-app-frame-wrap { border-radius: 20px; }.pg-app-frame { height: 1000px; }
}

@media (max-width: 390px) { .pg-app-button { font-size: .76rem; } .pg-app-hero__actions { gap: .5rem; } }