/* Client-facing revamp story (public site). Built on the admin app's tokens in app.css. */
body.st { background: #f6f1ea; color: #1a1a1a; min-height: 100vh; }
.st-head { display: flex; justify-content: center; padding: 22px 16px 6px; }
.st-head img { height: 40px; width: auto; }
.st-main { max-width: 560px; margin: 0 auto; padding: 8px 16px 40px; display: grid; gap: 14px; }
.st-main[aria-busy="true"] > *:not(.st-hero) { opacity: 0; }
.st-main > * { transition: opacity 0.4s ease; }

.st-hero { text-align: center; padding: 10px 6px 4px; }
.st-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: #fde9d3; color: #8a4b0f; }
.st-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-chip.ready { background: #e2f4e8; color: #17773e; }
.st-chip:empty { display: none; }
.st-hero h1 { margin: 14px 0 6px; font-size: clamp(30px, 8vw, 40px); font-weight: 500; letter-spacing: -1.2px; line-height: 1.1; }
.st-lead { margin: 0; color: #5f5a52; font-size: 15.5px; line-height: 1.5; }

.st-compare .compare, .st-compare .single { border-radius: 22px; box-shadow: 0 18px 40px -18px rgba(60, 30, 20, 0.35); }
.st-compare .hint { color: #8a857c; }

.st-book { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border-radius: 20px; text-align: left; color: #fff;
  background: linear-gradient(135deg, #2a2224, #4a2c35); box-shadow: 0 14px 30px -14px rgba(74, 44, 53, 0.7); }
.st-book-ic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: rgba(218, 131, 149, 0.22); color: #f3b3c1; }
.st-book-ic svg { width: 22px; height: 22px; }
.st-book b { display: block; font-size: 16.5px; font-weight: 600; }
.st-book small { display: block; font-size: 12.5px; opacity: 0.75; margin-top: 2px; }

.st-strip { display: grid; gap: 12px; padding: 14px; border-radius: 20px; background: #fff; }
.st-row h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #8a857c; }
.st-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.st-thumbs button { flex: none; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: #eee; }
.st-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.st-card { display: grid; gap: 12px; padding: 16px 18px; border-radius: 20px; background: #fff; }
.st-card div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.st-card small { color: #8a857c; font-size: 13.5px; }
.st-card b { font-weight: 600; text-align: right; }

.st-thanks { margin: 10px 0 0; text-align: center; font-size: 14px; color: #5f5a52; }
.st-thanks b { color: #b4536a; font-weight: 600; }
.st-private { margin: 0; text-align: center; font-size: 12px; color: #a09a90; }

/* not found / revoked */
.st-gone { max-width: 420px; margin: 12vh auto 0; padding: 0 20px; text-align: center; }
.st-gone h1 { font-size: 26px; font-weight: 500; letter-spacing: -0.6px; margin: 18px 0 8px; }
.st-gone p { color: #5f5a52; margin: 0; line-height: 1.5; }