/* /guides/profit-bidding/ — the Profit Bidding course.
   Generated pages (scripts/build-profit-bidding-guide.py) share this sheet.

   A reading surface first: bigger type and more space than the rest of
   frontend4, no coloured text, no highlights. Status colour and the brand
   gradient are not used anywhere in the guide. Tokens from style.css +
   growth-plan.css. */

.pg { min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto; background: var(--page-bg); }
.pg--cover { grid-template-rows: auto 1fr auto; }

/* ============================================================
   chrome
   ============================================================ */
.pg-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 18px clamp(20px, 3.2vw, 40px); border-bottom: 1px solid rgba(17,17,16,.08); background: var(--page-bg); }
.pg-bar__logo { display: inline-flex; color: var(--ink); }
.pg-bar__logo svg { width: 84px; height: 26px; }
.pg-bar__title { font: 500 15px/1.3 var(--font-sans); color: var(--ink-soft); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 20px; border-left: 1px solid rgba(17,17,16,.12); }
.pg-bar__title:hover { color: var(--ink); }
.pg-bar__right { display: flex; align-items: center; gap: 10px; }
.pg-bar__toc, .pg-bar__quiz { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; font: 500 14.5px/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: all .25s cubic-bezier(.2,.7,.2,1); }
.pg-bar__toc { display: none; border: 1px solid rgba(17,17,16,.14); background: #fff; color: var(--ink); }
.pg-bar__quiz { background: var(--ink); color: #fff; border: 0; }
.pg-bar__quiz:hover { background: #000; transform: translateY(-1px); }

.pg-prog { height: 3px; background: rgba(17,17,16,.06); }
.pg-prog i { display: block; height: 100%; background: var(--ink); }

.pg-foot { padding: 40px clamp(20px, 3.2vw, 48px); text-align: center; font: 300 14px/1.6 var(--font-sans); color: var(--ink-mute); border-top: 1px solid rgba(17,17,16,.08); }
.pg-foot a { color: inherit; text-decoration: none; }
.pg-foot a:hover { color: var(--ink); }
.pg-foot span { margin: 0 8px; opacity: .5; }

/* ============================================================
   layout — contents rail + reading column
   ============================================================ */
.pg-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); max-width: 1240px; width: 100%; margin: 0 auto; padding: clamp(28px, 4vw, 56px) clamp(20px, 3.2vw, 40px) clamp(56px, 7vw, 96px); }

.pg-nav { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; padding-right: 6px; }
.pg-nav__prog { margin: 0 0 22px; }
.pg-nav__prog p { font: 500 14px/1 var(--font-sans); color: var(--ink-soft); margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.pg-nav__prog b { display: block; height: 5px; border-radius: 999px; background: rgba(17,17,16,.08); overflow: hidden; }
.pg-nav__prog i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--ink); transition: width .45s cubic-bezier(.2,.7,.2,1); }
.pg-nav__sections, .pg-nav__sections ol { list-style: none; margin: 0; padding: 0; }
.pg-nav__sections > li { padding: 14px 0; border-top: 1px solid rgba(17,17,16,.08); }
.pg-nav__sec { font: 600 13.5px/1.3 var(--font-sans); color: var(--ink); margin: 0 0 8px; }
.pg-nav__link { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; font: 400 15px/1.4 var(--font-sans); color: var(--ink-soft); text-decoration: none; transition: background .2s cubic-bezier(.2,.7,.2,1); }
.pg-nav__link:hover { background: rgba(17,17,16,.04); color: var(--ink); }
.pg-nav__link.is-current { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--shadow-tile); }
.pg-nav__link i, .pg-toc__list a i { flex: none; position: relative; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 1.5px solid rgba(17,17,16,.22); }
.pg-nav__link.is-read i, .pg-toc__list a.is-read i { background: var(--ink); border-color: var(--ink); }
.pg-nav__link.is-read i::after, .pg-toc__list a.is-read i::after { content: ""; position: absolute; left: 3.5px; top: 4px; width: 6px; height: 3px; border-left: 1.4px solid #fff; border-bottom: 1.4px solid #fff; transform: rotate(-45deg); }

/* ============================================================
   the reading column
   ============================================================ */
.pg-main { max-width: 760px; min-width: 0; }
.pg-crumb { font: 500 15px/1.3 var(--font-sans); color: var(--ink-mute); margin: 0 0 14px; }
.pg-h1 { font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50; font-size: clamp(38px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.025em; color: var(--ink); margin: 0; }
.pg-meta { font: 400 15px/1.3 var(--font-sans); color: var(--ink-mute); margin: 18px 0 0; padding-bottom: clamp(28px, 3.5vw, 40px); border-bottom: 1px solid rgba(17,17,16,.08); font-variant-numeric: tabular-nums; }

.pg-body { padding-top: clamp(28px, 3.5vw, 40px); font: 400 clamp(18px, 1.3vw, 20px)/1.75 var(--font-sans); color: var(--ink-soft); }
.pg-body > * + * { margin-top: 1.1em; }
.pg-body p { margin-bottom: 0; }
.pg-body b, .pg-body strong { font-weight: 600; color: var(--ink); }
.pg-body a { color: var(--ink); text-underline-offset: 3px; }
.pg-body sup { font-size: .55em; }
.pg-body h2 { font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -.02em; color: var(--ink); margin: 2em 0 0; }
.pg-body h2 + * { margin-top: .7em; }
.pg-body h3 { font: 600 clamp(19px, 1.4vw, 21px)/1.35 var(--font-sans); letter-spacing: -.01em; color: var(--ink); margin: 1.6em 0 0; }
.pg-body h3 + * { margin-top: .5em; }
.pg-lead { font-size: clamp(21px, 1.6vw, 24px); line-height: 1.55; color: var(--ink); }
.pg-label { display: inline-block; font: 600 14px/1 var(--font-sans); color: var(--ink); background: #fff; border: 1px solid var(--card-border); border-radius: 999px; padding: 8px 16px; }
.pg-label + * { margin-top: 1.2em; }

/* drawn bullets */
.pg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; }
.pg-list li { position: relative; padding-left: 30px; }
.pg-list li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }

.pg-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pg-ticks li { position: relative; padding-left: 36px; font: 400 clamp(19px, 1.4vw, 22px)/1.45 var(--font-sans); color: var(--ink); }
.pg-ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 23px; height: 23px; border-radius: 50%; background: var(--ink); }
.pg-ticks li::after { content: ""; position: absolute; left: 7px; top: 10px; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

/* numbered steps */
.pg-steps { list-style: none; margin: 0; padding: 0; counter-reset: pgstep; display: grid; gap: 10px; }
.pg-steps li { counter-increment: pgstep; position: relative; display: grid; gap: 4px; padding: 18px 22px 18px 72px; background: #fff; border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow-tile); }
.pg-steps li::before { content: counter(pgstep); position: absolute; left: 20px; top: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 15px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.pg-steps b { font: 600 clamp(17.5px, 1.25vw, 19px)/1.4 var(--font-sans); color: var(--ink); }
.pg-steps span { font: 400 clamp(16.5px, 1.15vw, 18px)/1.6 var(--font-sans); color: var(--ink-soft); }

/* worked examples */
.pg-example { background: #fff; border: 1px solid var(--card-border); border-radius: 22px; box-shadow: var(--card-shadow); padding: clamp(22px, 3vw, 32px); }
.pg-example__lbl { font: 600 15px/1.3 var(--font-sans); color: var(--ink); margin: 0 0 14px !important; }
.pg-calc { display: grid; }
.pg-calc > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(17,17,16,.08); font: 400 clamp(16.5px, 1.2vw, 18px)/1.45 var(--font-sans); color: var(--ink-soft); }
.pg-calc b { font-weight: 500; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-calc .is-sub { color: var(--ink); font-weight: 500; }
.pg-calc .is-total { border-top: 2px solid var(--ink); color: var(--ink); font-weight: 600; }
.pg-calc .is-total b { font-weight: 600; font-size: 1.1em; }

.pg-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pg-result > div { background: #fff; border: 1px solid var(--card-border); border-radius: 18px; box-shadow: var(--shadow-tile); padding: 20px 22px; }
.pg-result p { font: 400 15.5px/1.4 var(--font-sans); color: var(--ink-soft); margin: 0 0 8px; }
.pg-result b { font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50; font-size: clamp(34px, 3vw, 44px); line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* tables */
.pg-table { overflow-x: auto; background: #fff; border: 1px solid var(--card-border); border-radius: 18px; box-shadow: var(--shadow-tile); }
.pg-table--flush { border: 0; box-shadow: none; border-radius: 0; background: none; }
.pg-table table { width: 100%; border-collapse: collapse; font: 400 clamp(15.5px, 1.1vw, 17px)/1.5 var(--font-sans); }
.pg-table th, .pg-table td { text-align: left; vertical-align: top; padding: 13px 18px; border-top: 1px solid rgba(17,17,16,.08); }
.pg-table--flush th, .pg-table--flush td { padding-left: 0; }
.pg-table thead th { border-top: 0; font-weight: 600; font-size: .9em; color: var(--ink-mute); }
.pg-table tbody th { font-weight: 500; color: var(--ink); }
.pg-table td { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* the margin stack */
.pg-stack { display: grid; gap: 12px; }
.pg-stack__group { background: #fff; border: 1px solid var(--card-border); border-radius: 18px; box-shadow: var(--shadow-tile); padding: 20px 24px 8px; }
.pg-stack__head { font: 600 16px/1.3 var(--font-sans); color: var(--ink); margin: 0 0 6px !important; }
.pg-stack dl { margin: 0; }
.pg-stack dt { font: 600 clamp(16.5px, 1.2vw, 18px)/1.4 var(--font-sans); color: var(--ink); padding-top: 12px; border-top: 1px solid rgba(17,17,16,.08); }
.pg-stack dd { margin: 4px 0 12px; font: 400 clamp(16px, 1.15vw, 17.5px)/1.6 var(--font-sans); color: var(--ink-soft); }

/* notes, resources, GROW solution */
.pg-note { background: var(--panel); border: 1px solid rgba(17,17,16,.06); border-radius: 18px; padding: 18px 22px; }
.pg-note p { margin: 0; font-size: .95em; }

.pg-resources { display: grid; gap: 10px; }
.pg-resources__lbl { font: 600 15px/1.3 var(--font-sans); color: var(--ink); margin: 0 !important; }
.pg-resources a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: #fff; border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--shadow-tile); font: 500 17px/1.3 var(--font-sans); color: var(--ink); text-decoration: none; transition: all .25s cubic-bezier(.2,.7,.2,1); }
.pg-resources a::after { content: "\2192"; font-weight: 400; }
.pg-resources a:hover { transform: translateY(-1px); border-color: rgba(17,17,16,.2); }

.pg-solution { background: var(--panel); border: 1px solid rgba(17,17,16,.06); border-radius: 24px; padding: clamp(24px, 3.4vw, 36px); margin-top: 2em !important; }
.pg-solution > * + * { margin-top: 1em; }
.pg-solution__lbl { display: flex; align-items: center; gap: 10px; font: 600 15px/1.2 var(--font-sans); color: var(--ink); margin: 0 !important; }
.pg-solution__lbl::before { content: "GROW"; font: 800 12px/1 var(--font-display); letter-spacing: -.2px; color: #fff; background: var(--ink); border-radius: 6px; padding: 5px 7px; }
.pg-solution .pg-steps li { box-shadow: none; }

/* screenshots — framed exactly as captured */
.pg-shot { margin: 1.6em 0 0; }
.pg-shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(17,17,16,.1); box-shadow: 0 1px 2px rgba(17,17,16,.04), 0 24px 50px -28px rgba(17,17,16,.35); background: #fff; }
.pg-shot figcaption { font: 400 15px/1.5 var(--font-sans); color: var(--ink-mute); margin-top: 12px; }

.pg-author { display: flex; align-items: center; gap: 16px; padding-top: 1.2em; }
.pg-author img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.pg-author p { margin: 0; display: grid; gap: 2px; line-height: 1.3; }
.pg-author b { font-size: 18px; }
.pg-author span { font-size: 15px; color: var(--ink-mute); }

.pg-principles { display: grid; gap: 12px; }
.pg-principles > div { background: #fff; border: 1px solid var(--card-border); border-radius: 18px; box-shadow: var(--shadow-tile); padding: 22px 24px; }
.pg-principles h3 { margin: 0 !important; }
.pg-principles p { margin: 8px 0 0; font-size: .95em; }

.pg-cta { background: #fff; border: 1px solid var(--card-border); border-radius: 24px; box-shadow: var(--card-shadow); padding: clamp(26px, 4vw, 40px); margin-top: 2.4em !important; text-align: center; }
.pg-cta h3 { font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.02em; margin: 0 !important; }
.pg-cta p { margin: 12px auto 0; max-width: 46ch; }
.pg-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.pg-cta__btns a { text-decoration: none; }

/* prev / next */
.pg-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(28px, 3.5vw, 40px); border-top: 1px solid rgba(17,17,16,.08); }
.pg-pager a { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 18px 22px; border-radius: 18px; text-decoration: none; transition: all .25s cubic-bezier(.2,.7,.2,1); }
.pg-pager span { display: grid; gap: 4px; min-width: 0; font: 500 17px/1.35 var(--font-sans); }
.pg-pager small { font: 400 14px/1 var(--font-sans); }
.pg-pager svg { flex: none; width: 20px; height: 20px; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.pg-pager__prev { background: #fff; border: 1px solid var(--card-border); color: var(--ink); }
.pg-pager__prev small { color: var(--ink-mute); }
.pg-pager__prev:hover svg { transform: translateX(-3px); }
.pg-pager__next { grid-column: 2; justify-content: space-between; text-align: right; background: var(--ink); color: #fff; box-shadow: 0 10px 30px -12px rgba(17,17,16,.45); }
.pg-pager__next small { color: rgba(255,255,255,.65); }
.pg-pager__next:hover { background: #000; transform: translateY(-1px); }
.pg-pager__next:hover svg { transform: translateX(3px); }

/* ============================================================
   the cover
   ============================================================ */
.pg-cover { max-width: 960px; width: 100%; margin: 0 auto; padding: clamp(40px, 6vw, 88px) clamp(20px, 3.2vw, 40px) clamp(56px, 7vw, 96px); }
.pg-pill { display: inline-block; font: 600 14px/1 var(--font-sans); color: var(--ink); background: #fff; border: 1px solid var(--card-border); border-radius: 999px; padding: 8px 16px; margin: 0 0 24px; }
.pg-cover__h1 { font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50; font-size: clamp(44px, 5.4vw, 80px); line-height: 1; letter-spacing: -.028em; color: var(--ink); margin: 0; max-width: 16ch; }
.pg-cover__sub { font: 400 clamp(20px, 1.6vw, 24px)/1.5 var(--font-sans); color: var(--ink-soft); max-width: 44ch; margin: 24px 0 0; }
.pg-cover__lead { font: 500 clamp(18px, 1.3vw, 20px)/1.5 var(--font-sans); color: var(--ink); margin: 32px 0 16px; }
.pg-cover__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 36px 0 0; }
.pg-cover__cta .btn-dark { height: 60px; padding: 0 34px; font-size: 17.5px; text-decoration: none; }
.pg-cover__meta { font: 400 16px/1.4 var(--font-sans); color: var(--ink-mute); margin: 0; }
.pg-cover__based { font: 400 16px/1.6 var(--font-sans); color: var(--ink-mute); max-width: 56ch; margin: 28px 0 0; }
.pg-cover__based sup { font-size: .55em; }

.pg-toc { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid rgba(17,17,16,.08); }
.pg-toc__h { font-family: var(--font-serif); font-weight: 400; font-variation-settings: 'SOFT' 50; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -.025em; color: var(--ink); margin: 0 0 32px; }
.pg-toc__list, .pg-toc__list ol { list-style: none; margin: 0; padding: 0; }
.pg-toc__list { display: grid; gap: 14px; }
.pg-toc__sec { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px 40px; background: #fff; border: 1px solid var(--card-border); border-radius: 22px; box-shadow: var(--shadow-tile); padding: clamp(22px, 3vw, 30px); }
.pg-toc__head p { font: 500 14px/1.2 var(--font-sans); color: var(--ink-mute); margin: 0 0 6px; }
.pg-toc__head h3 { font: 600 clamp(20px, 1.6vw, 23px)/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--ink); margin: 0; }
.pg-toc__list ol { display: grid; }
.pg-toc__list ol a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(17,17,16,.07); font: 400 17.5px/1.4 var(--font-sans); color: var(--ink); text-decoration: none; }
.pg-toc__list ol li:first-child a { border-top: 0; padding-top: 2px; }
.pg-toc__list ol a span { flex: 1; }
.pg-toc__list ol a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.pg-toc__list ol a i { margin-top: 3px; }
.pg-toc__list em { font: 400 14.5px/1.4 var(--font-sans); font-style: normal; color: var(--ink-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1000px) {
    .pg-layout { grid-template-columns: minmax(0, 1fr); }
    .pg-bar__toc { display: inline-flex; }
    .pg-nav { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(360px, 88vw); max-height: none; padding: 24px 22px; background: var(--page-bg); box-shadow: 0 0 60px rgba(17,17,16,.25); transform: translateX(-105%); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
    .pg-nav.is-open { transform: none; }
    html.pg-lock { overflow: hidden; }
    .pg-main { max-width: 760px; margin: 0 auto; width: 100%; }
}
@media (max-width: 760px) {
    .pg-bar { grid-template-columns: auto auto; justify-content: space-between; }
    .pg-bar__title { display: none; }
    .pg-bar__quiz { display: none; }
    .pg-toc__sec { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .pg-pager { grid-template-columns: minmax(0, 1fr); }
    .pg-pager__next { grid-column: 1; grid-row: 1; }
    .pg-result { grid-template-columns: minmax(0, 1fr); }
    .pg-steps li { padding: 16px 18px 16px 62px; }
    .pg-steps li::before { left: 16px; top: 16px; width: 30px; height: 30px; font-size: 14px; }
    .pg-calc > div { flex-wrap: wrap; gap: 2px 12px; }
    .pg-cover__cta .btn-dark { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .pg-nav, .pg-nav__prog i, .pg-pager a, .pg-pager svg, .pg-resources a, .pg-bar__quiz { transition: none; }
}