/* ═══════════════════════════════════════════════════════════════════════
   FLUNTRO — per-app pages (/exif-viewer/, /photos-search/, /cleanup-photos/)

   These pages compose rather than duplicate: legal.css supplies the tokens
   and the page chrome, styles.css supplies the shared components (focus rail,
   device frames, feature grid, FAQ, store badge). Only what is genuinely new
   to this template lives here.
   ═══════════════════════════════════════════════════════════════════════ */

.apppage .legal-bar-in{gap:16px}
.crumb{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted)}
.crumb a{text-decoration:none;transition:color var(--t) var(--ease)}
.crumb a:hover{color:var(--paper)}
.crumb span[aria-hidden]{opacity:.4}
.crumb [aria-current]{color:var(--paper)}

.app-hero{position:relative;padding:clamp(44px,7vw,88px) 0 clamp(28px,4vw,44px);overflow:clip}
.app-hero .app-glow{position:absolute;z-index:-1;pointer-events:none;left:50%;top:-10%;
  transform:translateX(-50%);width:min(1200px,120vw);height:44vw;max-height:560px;
  border-radius:50%;filter:blur(110px);opacity:.17;background:var(--accent)}
.app-hero h1{margin:0 0 .38em;font-size:clamp(2.1rem,4.6vw,3.5rem);font-weight:700;
  letter-spacing:-.045em;line-height:1.04;max-width:18ch}
.app-hero .lede{max-width:56ch;margin:0 0 30px;color:var(--muted);
  font-size:clamp(1.02rem,1.4vw,1.14rem);line-height:1.6}
.app-hero .buy-row{margin-bottom:16px}
.app-hero .meta{margin:0 0 10px}

.app-detail,.app-faq,.app-close,.siblings{padding-block:clamp(34px,5vw,64px)}
.app-detail h2,.app-faq h2,.siblings h2{margin:0 0 22px;font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:700;letter-spacing:-.04em}
.app-detail .feats{margin:0}
.app-faq{border-top:1px solid var(--line)}
.app-faq .faq-list{display:grid;gap:6px;max-width:820px}
.app-close{border-top:1px solid var(--line)}
.app-close .buy-row{justify-content:flex-start}

.siblings{border-top:1px solid var(--line)}
.sibling-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sibling{--accent:var(--exif);display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:8px 16px;padding:20px 22px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--ink-2);text-decoration:none;
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.sibling:hover{border-color:color-mix(in oklab,var(--accent) 45%,var(--line));transform:translateY(-2px)}
.sibling .idx{margin:0;grid-row:1/3;align-self:start}
.sib-name{font-size:1.02rem;font-weight:650;letter-spacing:-.028em;color:var(--paper)}
.sib-sub{grid-column:2;font-size:.84rem;color:var(--muted)}
.sib-price{grid-row:1/3;font-family:var(--mono);font-size:.95rem;color:var(--signal)}
@media (max-width:700px){.sibling-row{grid-template-columns:1fr}}

/* the rail needs the page gutter, not the home page's grid offset */
.apppage .rail-track{padding-left:calc(max((100vw - var(--maxw)) / 2, 0px) + clamp(20px,4vw,40px))}