/* CreatorsUGC English blog (/blog). Matches the discovery homepage: neutral #222/#717171 text, #ebebeb lines,
   light-gray band, white pill buttons, purple only for primary actions. Self-contained (app.css is pre-compiled). */
.g-band,.g-wrap{--g-ink:#222;--g-text:#2f2f2f;--g-muted:#717171;--g-line:#ebebeb;--g-line-2:#dddddd;--g-soft:#f7f7f7;--g-brand:#7c3aed;--g-brand-ink:#6d28d9}
.dark .g-band,.dark .g-wrap{--g-ink:#f4f4f5;--g-text:#d4d4d8;--g-muted:#a1a1aa;--g-line:#2f2f35;--g-line-2:#3f3f46;--g-soft:#1c1c21}
.g-wrap{max-width:1280px!important;width:100%;margin:0 auto!important;padding:0 48px 80px;color:var(--g-text);font-size:17px;line-height:1.65;box-sizing:border-box}
/* layout forces '#main-content > div > div { max-width:100% !important }' — win on specificity */
#main-content .g-wrap.g-wrap,.g-wrap.g-wrap{max-width:1280px!important;margin-left:auto!important;margin-right:auto!important}
.g-wrap *,.g-wrap *::before,.g-wrap *::after,.g-band *{box-sizing:border-box}
.g-wrap a{color:var(--g-ink);text-decoration:none}
.g-wrap a:hover{text-decoration:underline}

/* Gray band at the top (like the homepage search band) */
.g-band{background:var(--g-soft);border-bottom:1px solid var(--g-line);margin:0 0 40px}
.g-band .g-wrap{padding-top:20px;padding-bottom:36px}
.g-band-center{text-align:center}
.g-band-center .g-hero{margin-left:auto;margin-right:auto}
.g-band-center .g-subnav{justify-content:center}
.g-band-center .g-crumbs ol{justify-content:center}

.g-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 18px;padding:0;font-size:13px;color:var(--g-muted)}
.g-crumbs li{display:flex;gap:6px;align-items:center;min-width:0}
.g-crumbs a{color:var(--g-muted)!important}
.g-crumbs [aria-current]{color:var(--g-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}

.g-subnav{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.g-subnav a{display:inline-flex;align-items:center;height:42px;padding:0 18px;background:#fff;border:1px solid var(--g-line-2);border-radius:999px;font-size:15px;font-weight:500;color:var(--g-ink)!important}
.dark .g-subnav a{background:transparent}
.g-subnav a:hover{text-decoration:none;border-color:var(--g-ink)}
.g-subnav a.is-active{border:2px solid var(--g-ink);padding:0 17px;font-weight:600}

.g-hero{max-width:760px;margin:0}
.g-kicker{font-size:13px;font-weight:600;color:var(--g-muted);margin:0 0 8px}
.g-hero h1{font-size:clamp(28px,4vw,38px);line-height:1.15;font-weight:700;color:var(--g-ink);margin:0 0 10px;letter-spacing:-.015em}
.g-lead{font-size:18px;color:var(--g-muted);margin:0}
.g-muted{color:var(--g-muted)}

.g-hubcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin:0 0 48px}
.g-hubcard{display:flex;flex-direction:column;gap:8px;padding:28px;border-radius:16px;border:1px solid var(--g-line);background:#fff;color:var(--g-text)!important;transition:box-shadow .2s}
.dark .g-hubcard{background:var(--g-soft)}
.g-hubcard:hover{text-decoration:none!important;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.g-hubcard-label{font-size:13px;font-weight:600;color:var(--g-muted)}
.g-hubcard-title{font-size:22px;font-weight:700;color:var(--g-ink);line-height:1.25}
.g-hubcard-desc{font-size:16px;color:var(--g-muted)}
.g-hubcard-count{margin-top:auto;padding-top:8px;font-weight:600;color:var(--g-brand)}

.g-section{margin:48px 0 0}
.g-section h2{font-size:22px;font-weight:700;color:var(--g-ink);margin:0 0 18px;line-height:1.25}
.g-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.g-section-head a{font-weight:600;font-size:15px;text-decoration:underline}
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:24px}
.g-card{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--g-line);border-radius:16px;background:#fff;color:var(--g-text)!important;min-width:0;transition:box-shadow .2s}
.dark .g-card{background:var(--g-soft)}
.g-card:hover{text-decoration:none!important;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.g-card-tag{align-self:flex-start;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--g-soft);color:var(--g-ink);border:1px solid var(--g-line)}
.g-card-title{font-size:17px;font-weight:600;color:var(--g-ink);line-height:1.35}
.g-card-desc{font-size:15px;line-height:1.5;color:var(--g-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.g-starthere{border:1px solid var(--g-line);border-radius:16px;padding:22px 26px;background:#fff;max-width:760px}
.dark .g-starthere{background:var(--g-soft)}
.g-starthere h2{font-size:18px;margin:0 0 10px;color:var(--g-ink);font-weight:700}
.g-starthere ol{margin:0;padding-left:20px}
.g-starthere li{margin:6px 0}
.g-starthere a{text-decoration:underline}

.g-legacy ul{list-style:none;padding:0;margin:0}
.g-legacy li{padding:10px 0;border-bottom:1px solid var(--g-line);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.g-legacy a{text-decoration:underline}
.g-langtag{font-size:12px;color:var(--g-muted);border:1px solid var(--g-line);border-radius:999px;padding:1px 8px}

/* Article */
.g-article-head{max-width:760px;margin:0}
.g-pill{display:inline-flex;align-items:center;height:30px;font-size:13px;font-weight:600;padding:0 12px;border-radius:999px;margin-bottom:14px;background:#fff;border:1px solid var(--g-line-2);color:var(--g-ink)!important}
.dark .g-pill{background:transparent}
.g-pill:hover{text-decoration:none!important;border-color:var(--g-ink)}
.g-article-head h1{font-size:clamp(28px,4vw,40px);line-height:1.15;font-weight:700;color:var(--g-ink);margin:0 0 12px;letter-spacing:-.015em}
.g-dek{font-size:18px;margin:0 0 14px;color:var(--g-muted)}
.g-meta{display:flex;flex-wrap:wrap;gap:6px 8px;font-size:14px;color:var(--g-muted);margin:0}
.g-article-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:1024px){.g-article-grid{grid-template-columns:minmax(0,720px) 280px;justify-content:space-between;gap:64px}.g-toc{order:2;position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow:auto}}
.g-toc details{border:1px solid var(--g-line);border-radius:16px;padding:16px 18px;background:#fff}
.dark .g-toc details{background:var(--g-soft)}
.g-toc summary{font-weight:700;color:var(--g-ink);cursor:pointer;font-size:15px}
.g-toc ol{margin:10px 0 0;padding-left:18px;font-size:14px;line-height:1.45;color:var(--g-muted)}
.g-toc li{margin:7px 0}
.g-toc a{color:var(--g-muted)!important}
.g-toc a:hover{color:var(--g-ink)!important}

.g-prose{min-width:0}
.g-prose>*:first-child{margin-top:0}
.g-prose p{margin:0 0 1.1em}
.g-prose h2{font-size:26px;line-height:1.25;font-weight:700;color:var(--g-ink);margin:1.9em 0 .6em;letter-spacing:-.01em;scroll-margin-top:96px}
.g-prose h3{font-size:20px;line-height:1.3;font-weight:600;color:var(--g-ink);margin:1.6em 0 .5em;scroll-margin-top:96px}
.g-prose h4{font-size:17px;font-weight:600;color:var(--g-ink);margin:1.4em 0 .4em}
.g-prose ul,.g-prose ol{margin:0 0 1.2em;padding-left:1.4em}
.g-prose ul{list-style:disc}
.g-prose ol{list-style:decimal}
.g-prose li{margin:.35em 0}
.g-prose li>ul,.g-prose li>ol{margin:.35em 0}
.g-prose strong{color:var(--g-ink);font-weight:600}
.g-prose a{color:var(--g-brand-ink)!important;text-decoration:underline;text-underline-offset:2px}
.g-prose code{background:var(--g-soft);padding:1px 5px;border-radius:6px;font-size:.9em}
.g-prose hr{border:0;border-top:1px solid var(--g-line);margin:2em 0}
.g-prose blockquote{margin:1.2em 0;padding:4px 0 4px 16px;border-left:3px solid var(--g-line-2)}

.g-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4em;border:1px solid var(--g-line);border-radius:16px}
.g-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;min-width:520px}
.g-table th,.g-table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--g-line)}
.g-table thead th{background:var(--g-soft);color:var(--g-ink);font-weight:600}
.g-table tr:last-child td{border-bottom:0}
.g-table caption{caption-side:bottom;text-align:left;font-size:13px;color:var(--g-muted);padding:8px 14px}

.g-callout{border-radius:16px;padding:18px 20px;margin:0 0 1.4em;background:var(--g-soft);border:1px solid var(--g-line)}
.g-callout>*:last-child{margin-bottom:0}
.g-callout-title{display:block;font-weight:700;color:var(--g-ink);margin:0 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.g-callout.g-example{background:#fff;border:1px dashed var(--g-line-2)}
.g-callout.g-example .g-callout-title{color:var(--g-muted)}
.g-callout.g-warning{background:#fff8f6;border-color:#f3d6cf}
.g-callout.g-tip{background:#faf7ff;border-color:#e9e1fb}
.dark .g-callout.g-example{background:transparent}
.dark .g-callout.g-warning{background:#2a1a17;border-color:#4a2b24}
.dark .g-callout.g-tip{background:#221c33;border-color:#3b3058}

.g-template{position:relative;margin:0 0 1.4em;border:1px solid var(--g-line);border-radius:16px;background:var(--g-soft)}
.g-template-label{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--g-muted);padding:12px 18px 0}
.g-template pre{margin:0;padding:8px 18px 18px;white-space:pre-wrap;word-wrap:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.6;color:var(--g-ink);background:transparent;border:0}

.g-checklist{list-style:none!important;padding-left:0!important}
.g-checklist li{position:relative;padding-left:30px}
.g-checklist li::before{content:"";position:absolute;left:2px;top:.32em;width:16px;height:16px;border:1.5px solid var(--g-line-2);border-radius:5px;background:#fff}

.g-faq h3{font-size:18px}
.g-sources{font-size:14px;line-height:1.5;color:var(--g-muted)}
.g-sources li{margin:.5em 0;word-break:break-word}

/* CTA — white card, purple primary pill like the header "Sign Up" */
.g-cta{margin:44px 0 20px;padding:28px;border-radius:20px;border:1px solid var(--g-line);background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.dark .g-cta{background:var(--g-soft)}
.g-cta-kicker{font-size:13px;font-weight:600;color:var(--g-muted);margin:0 0 6px!important}
.g-cta-title{font-size:22px;font-weight:700;line-height:1.25;color:var(--g-ink);margin:0 0 8px!important}
.g-cta-body{font-size:16px;color:var(--g-muted);margin:0 0 18px!important}
.g-cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.g-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none!important}
.g-btn-primary{background:var(--g-brand);color:#fff!important}
.g-btn-primary:hover{background:var(--g-brand-ink)}
.g-btn-ghost{background:#fff;border:1px solid var(--g-line-2);color:var(--g-ink)!important}
.dark .g-btn-ghost{background:transparent}
.g-btn-ghost:hover{border-color:var(--g-ink)}
.g-disclosure{font-size:13px;color:var(--g-muted);border-top:1px solid var(--g-line);padding-top:14px;margin-top:8px}

@media (max-width:768px){
  .g-wrap{padding:0 16px 64px;font-size:16.5px}
  .g-band{margin-bottom:28px;border:1px solid var(--g-line);border-radius:16px}
  .g-band .g-wrap{padding-left:16px;padding-right:16px}
  .g-band .g-wrap{padding-top:14px;padding-bottom:26px}
  .g-lead,.g-dek{font-size:16.5px}
  .g-prose h2{font-size:23px}
  .g-prose h3{font-size:19px}
  .g-hubcard,.g-cta{padding:22px}
  .g-subnav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px}
  .g-band-center .g-subnav{justify-content:flex-start}
  .g-subnav a{flex:0 0 auto}
  .g-btn{width:100%}
}

/* Product screenshots in guides */
.g-figure{margin:0 0 1.6em}
.g-figure img{display:block;width:100%;height:auto;border:1px solid var(--g-line);border-radius:14px;background:var(--g-soft)}
.g-figure figcaption{font-size:13.5px;color:var(--g-muted);margin-top:8px;line-height:1.5}
.g-download{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:15px;color:var(--g-muted);border:1px solid var(--g-line);border-radius:14px;padding:12px 16px;background:#fff}
.g-download a{font-weight:600}