/* ============================================================
   Creator Studio · Growing Stickerbook Together
   A note from Frosty: the opening, the deal at a glance, what I'm
   asking (give some stickers away, bring your people), what you can
   count on (attribution, the algorithm promise, who's behind this),
   money, what you get either way, and the closing.
   Markup is in growing-together.html, the public page. Creator Studio
   (#panel-growing) shows the same page.
   Phone (768px and under): one column.
   ============================================================ */

#panel-growing, .gt-root {
  --gt-acc: #14B8A6;          /* brand turquoise */
  --gt-ink: #0F766E;          /* turquoise text on light backgrounds */
  --gt-soft: #E6FAF6;
  --gt-purple: #6D28D9;
  --gt-purple-ink: #5B21B6;
  --gt-psoft: #F1EAFE;
  --gt-text: var(--color-text-primary, #18181b);
  --gt-text-2: #3f3f46;
  --gt-muted: #71717a;
  --gt-line: var(--color-border, #e4e4e7);
  --gt-sub: #f7f7f9;
}
#panel-growing a:focus-visible, .gt-root a:focus-visible { outline: 2px solid var(--gt-acc); outline-offset: 2px; }

.gt-pg { max-width: 1000px; margin: 0 auto; padding: 28px 28px 48px; color: var(--gt-text); }
.gt-ic { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- opening ---------- */
.gt-from { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gt-fav { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--gt-psoft); }
.gt-fav.gt-big { width: 52px; height: 52px; }
.gt-from b, .gt-sig b { display: block; font-size: 14.5px; font-weight: 600; color: var(--gt-text); }
.gt-from span, .gt-sig span { display: block; font-size: 13px; color: var(--gt-muted); }
.gt-title { margin: 0 0 12px; font-size: 26px; line-height: 1.2; font-weight: 700; color: #111111; }
.gt-lede { max-width: 780px; margin: 0 0 12px; font-size: 15.5px; line-height: 1.65; color: var(--gt-text-2); }
.gt-lede:last-of-type { margin-bottom: 22px; }

/* ---------- the deal ---------- */
.gt-deal { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gt-dcol { display: flex; flex-direction: column; padding: 20px 22px; border-radius: 16px; }
.gt-dcol.gt-ask { background: var(--gt-psoft); }
.gt-dcol.gt-give { background: var(--gt-soft); }
.gt-dcol h3 { margin: 0 0 10px; font-size: 15.5px; font-weight: 600; }
.gt-dcol.gt-ask h3 { color: var(--gt-purple-ink); }
.gt-dcol.gt-give h3 { color: var(--gt-ink); }
.gt-dcol ul { list-style: none; margin: 0; padding: 0; }
.gt-dcol li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 14px; line-height: 1.5; color: var(--gt-text); }
.gt-dcol li + li { border-top: 1px solid rgba(0, 0, 0, 0.06); }
.gt-dcol li b { font-weight: 600; }
.gt-n, .gt-ck { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; }
.gt-n { background: var(--gt-purple); font-size: 12px; font-weight: 700; }
.gt-ck { background: var(--gt-acc); }
.gt-ck .gt-ic { width: 13px; height: 13px; stroke-width: 3; }
.gt-foot2 { margin: auto 0 0; padding-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--gt-purple-ink); }

/* ---------- sections ---------- */
.gt-part { margin: 34px 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gt-muted); }
.gt-card { margin-top: 16px; padding: 24px 26px; border: 1px solid var(--gt-line); border-radius: 16px; background: #ffffff; }
.gt-part + .gt-card { margin-top: 0; }
.gt-card h2 { margin: 0 0 10px; font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--gt-text); }
.gt-card p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: var(--gt-text-2); }
.gt-wide { max-width: 780px; }
.gt-kicker { margin: 0 0 6px !important; font-size: 11px !important; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gt-ink) !important; }
.gt-num { width: 30px; height: 30px; margin-bottom: 12px; border-radius: 50%; background: var(--gt-purple); color: #ffffff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.gt-sub { margin: 0 0 4px; font-size: 15.5px; font-weight: 600; color: var(--gt-text); }
.gt-fine { font-size: 13px !important; color: var(--gt-muted) !important; }

.gt-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 20px; }
.gt-why.gt-w2 { grid-template-columns: 1fr 1fr; }
.gt-wy { padding: 16px 18px; border-radius: 12px; background: var(--gt-sub); }
.gt-wy.gt-full { grid-column: 1 / -1; background: var(--gt-soft); }
.gt-wy h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; color: var(--gt-ink); }
.gt-wy p { margin: 0; font-size: 14px; }

.gt-cost { margin: 0 0 20px; padding: 18px 20px; border: 1px solid #fde68a; border-radius: 14px; background: #fffbeb; }
.gt-cost h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 600; color: #92400e; }
.gt-cost p { max-width: 780px; font-size: 14px; }
.gt-cost .gt-sure { margin-bottom: 12px; font-weight: 600; color: var(--gt-text); }

.gt-ticks { list-style: none; margin: 4px 0 16px; padding: 0; }
.gt-ticks.gt-two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.gt-ticks li { position: relative; padding: 5px 0 5px 20px; font-size: 14px; line-height: 1.5; color: var(--gt-text-2); }
.gt-ticks li::before { content: ""; position: absolute; left: 3px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--gt-acc); }
.gt-ticks b { font-weight: 600; color: var(--gt-text); }

.gt-links { display: flex; flex-wrap: wrap; gap: 8px; }
.gt-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.gt-btn.gt-pri { background: var(--gt-acc); color: #ffffff; }
.gt-btn.gt-pri:hover { background: var(--gt-ink); }
.gt-btn.gt-sec { background: #ffffff; color: var(--gt-ink); box-shadow: inset 0 0 0 1.5px var(--gt-acc); }
.gt-btn.gt-sec:hover { background: var(--gt-soft); }
.gt-btn .gt-ic { width: 15px; height: 15px; }

/* ---------- your name travels ---------- */
.gt-card.gt-hero { border-color: rgba(20, 184, 166, 0.3); box-shadow: 0 4px 24px rgba(15, 118, 110, 0.1); }
.gt-attr { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
.gt-where { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 14px; }
.gt-w { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--gt-sub); }
.gt-w > .gt-ic { width: 20px; height: 20px; margin-top: 1px; color: var(--gt-ink); stroke-width: 1.9; }
.gt-w b { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 600; }
.gt-w span { font-size: 13px; line-height: 1.4; color: var(--gt-muted); }
.gt-hero .gt-fine { margin: 0; }

.gt-mock { padding: 14px 16px 16px; border-radius: 18px; background: #ffffff; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14); text-align: center; }
.gt-mtop { display: flex; justify-content: space-between; padding: 0 2px; font-size: 18px; line-height: 1; color: #3f3f46; }
.gt-mstk { width: 62%; aspect-ratio: 1; margin: 6px auto 12px; border: 2.5px dashed #c4b5fd; border-radius: 50%; background: var(--gt-psoft); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #7c3aed; }
.gt-mname { font-size: 15.5px; font-weight: 700; color: #111111; }
.gt-mby { margin: 3px 0 6px; font-size: 13px; color: var(--gt-purple); text-decoration: underline; }
.gt-mprice { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 13.5px; font-weight: 700; color: var(--gt-purple); }
.gt-coin { width: 15px; height: 15px; border-radius: 50%; background: var(--gt-purple); color: #ffffff; font-size: 7px; display: inline-flex; align-items: center; justify-content: center; }
.gt-mrow { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.gt-mbtn { flex: 1; padding: 10px; border-radius: 999px; background: linear-gradient(90deg, #6D28D9, #14B8A6); color: #ffffff; font-size: 13.5px; font-weight: 700; }
.gt-mshare { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gt-purple); color: var(--gt-purple); display: flex; align-items: center; justify-content: center; }
.gt-cap { margin: 8px 0 0 !important; font-size: 12.5px !important; line-height: 1.4 !important; text-align: center; color: var(--gt-muted) !important; }

/* ---------- promises ---------- */
.gt-card.gt-dark { border: 0; background: #0F3D39; }
.gt-card.gt-dark h2 { color: #ffffff; }
.gt-card.gt-dark p { max-width: 780px; color: #E6FAF6; }
.gt-card.gt-dark .gt-kicker { color: #5EEAD4 !important; }
.gt-card.gt-dark p:last-child { margin-bottom: 0; }

/* ---------- money ---------- */
.gt-earn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 16px; }
.gt-stat { padding: 14px 16px; border-radius: 12px; background: var(--gt-soft); }
.gt-stat b { display: block; margin-bottom: 3px; font-size: 22px; font-weight: 700; color: var(--gt-ink); }
.gt-stat span { font-size: 13.5px; line-height: 1.4; color: var(--gt-text-2); }

.gt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.gt-chips span { padding: 7px 13px; border-radius: 999px; background: var(--gt-psoft); color: var(--gt-purple-ink); font-size: 13.5px; font-weight: 600; }

/* ---------- closing ---------- */
.gt-card.gt-close { padding: 30px 26px; text-align: center; }
.gt-close p { max-width: 640px; margin: 0 auto 10px; font-size: 15px; }
.gt-sig { display: inline-flex; align-items: center; gap: 12px; margin-top: 12px; text-align: left; }
.gt-frosty { color: var(--gt-purple); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- signed in or not ----------
   gt-in: buttons into Creator Studio, for signed-in people (the public page adds
   gt-signed-in to <html> when this browser is signed in; Studio's panel always has it).
   gt-out: the way to join, for everyone else. */
.gt-in { display: none !important; }
.gt-signed-in .gt-in { display: inline-flex !important; }
.gt-signed-in .gt-links.gt-in { display: flex !important; }
.gt-signed-in .gt-out { display: none !important; }
.gt-cta { justify-content: center; margin-top: 20px; }

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
  .gt-why { grid-template-columns: 1fr; }
  .gt-attr { grid-template-columns: minmax(0, 1fr) 240px; }
}
@media (max-width: 900px) {
  .gt-attr { grid-template-columns: 1fr; }
  .gt-hero .gt-ex { max-width: 300px; }
}
@media (max-width: 768px) {
  .gt-pg { padding: 4px 0 32px; }
  .gt-title { font-size: 22px; }
  .gt-lede { font-size: 14.5px; }
  .gt-deal, .gt-why.gt-w2, .gt-where, .gt-earn, .gt-ticks.gt-two { grid-template-columns: 1fr; }
  .gt-card { padding: 20px 18px; }
  .gt-hero .gt-ex { max-width: 300px; margin: 0 auto; }
}