/* Small public-page refinements; colors continue to follow the active theme. */
.front-page {
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 2%,var(--bg)),var(--bg) 50%);
}
/* Images reach the rounded edges without the white tile border. */
.front-page .mascot {position:relative}
.front-page .mascot:has(> img) {border:0;padding:0;background:transparent}
.front-page .mascot > img {
  position:absolute;inset:0;width:100%;height:100%;
  display:block;object-fit:cover;border-radius:inherit;
}
.front-page .card {
  border-color:color-mix(in srgb,var(--line) 88%,var(--primary));
  box-shadow:0 2px 6px #00000003,0 10px 28px -18px color-mix(in srgb,var(--ink) 25%,transparent);
}
.front-page .card-head {gap:12px}
.front-page .card-icon {
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 8%,transparent);
}
.front-page .card-desc {line-height:1.7}
.front-page .tag {
  padding:4px 9px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--primary) 8%,transparent);
  font-size:11px;line-height:1.2;
}
.front-page :is(.card-cta,.pill,.ann-btn) {
  position:relative;isolation:isolate;overflow:hidden;
}
.front-page .card-cta {
  width:calc(100% - 24px);align-self:center;
  min-height:40px;padding:9px 36px;border-radius:10px;
  font-size:13px;letter-spacing:.01em;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.front-page .card-cta .ar {
  right:10px;width:12px;height:12px;padding:3px;z-index:1;
}
@media(hover:hover) {
  .front-page .card:hover {
    border-color:color-mix(in srgb,var(--primary) 30%,var(--line));
    box-shadow:0 3px 8px #00000004,0 18px 34px -20px color-mix(in srgb,var(--primary) 35%,transparent);
  }
  .front-page .card-cta:hover {transform:translateY(-1px)}
}
.front-page :is(.card-cta,.pill,.ann-btn):is(:active,.is-clicked) {
  transform:translateY(1px) scale(.965);filter:brightness(.94);
  box-shadow:inset 0 2px 4px #00000012,0 1px 3px #00000006,0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent);
}
.front-page .ann-close.is-clicked {transform:scale(.92);background:var(--accent-soft)}
.front-page .card-cta:is(:active,.is-clicked) .ar {transform:translateY(-50%) translateX(1px)}
.click-ripple {
  position:absolute;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#ffffff70 0%,#ffffff38 45%,transparent 72%);
  transform:translate(-50%,-50%) scale(0);opacity:.7;
  animation:frontRipple .55s cubic-bezier(.22,1,.36,1) forwards;
}
.front-page .pill .click-ripple {background:color-mix(in srgb,var(--primary) 16%,transparent)}
@keyframes frontRipple {
  to {transform:translate(-50%,-50%) scale(1);opacity:0}
}
.front-feedback {
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:1100;
  width:max-content;max-width:calc(100vw - 32px);padding:11px 18px;
  border:1px solid color-mix(in srgb,var(--primary) 20%,var(--line));border-radius:12px;
  background:var(--card);color:var(--ink);box-shadow:0 8px 28px #00000014;
  font-size:13px;font-weight:500;line-height:1.5;text-align:center;overflow-wrap:anywhere;
  pointer-events:none;visibility:hidden;opacity:0;transform:translate(-50%,8px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
.front-feedback.show {visibility:visible;opacity:1;transform:translate(-50%,0)}
@media(max-width:480px) {
  .front-page .card-head {gap:9px}
  .front-page .tag {font-size:10.5px;padding:3px 7px}
  .front-page .card > :nth-last-child(2) {margin-bottom:10px}
  .front-page .card-cta {
    width:100%;min-height:38px;padding:8px 34px;
    border-radius:9px;font-size:13px;
    box-shadow:inset 0 1px 0 #ffffff35,0 3px 8px -4px color-mix(in srgb,var(--primary) 35%,transparent);
  }
  .front-page .card-cta .ar {right:10px;width:12px;height:12px;padding:3px}
  .front-feedback {bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce) {
  .front-page :is(.card-cta,.pill,.ann-btn):is(:active,.is-clicked) {transform:none}
  .front-feedback,.front-feedback.show {transform:translateX(-50%);transition:none}
  .click-ripple {display:none}
}