/* ==========================================================================
   Group 4 — resource pages: news.html, insights.html, how-to.html
   "Bright SaaS" layout: card indexes, a centered ~720px reading column,
   numbered step cards. Loaded before saas.css; all classes prefixed g4-.
   ========================================================================== */

/* Page hero: resource pages don't need the tall shared hero */
.hero.g4-hero { min-height: 0; display: block; padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 88px); }
.g4-hero h1 { max-width: 17ch; }

/* Shared: small meta row (pill + date + link) */
.g4-meta, .g4-post > p.g4-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 18px; font-size: .9rem; line-height: 1.4; color: var(--steel); }
.g4-meta .s-tag { margin: 0; }
.g4-meta a { margin-left: auto; color: var(--cobalt); font-weight: 600; font-size: .88rem; }
.g4-meta a:hover { color: #1F3FD1; }

/* Shared: card index cards (news index, how-to contents) */
.g4-ncards, .g4-gcards { list-style: none; margin: 0; padding: 0; }
.g4-ncards > li, .g4-gcards > li { margin: 0; display: flex; }
.g4-ncard, .g4-gcard { display: flex; flex-direction: column; width: 100%; color: var(--ink); text-decoration: none; }
.g4-ncard:hover, .g4-gcard:hover { color: var(--ink); }
.g4-ncard-top, .g4-gcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.g4-ncard .s-ico, .g4-gcard .s-ico { margin: 0; }
.g4-ncard .s-tag { margin: 0; }
.g4-ncard b, .g4-gcard b { font-family: var(--display); font-weight: 650; font-size: 1.12rem; line-height: 1.32; letter-spacing: -.012em; color: var(--ink); margin: 0 0 10px; }
.g4-ncard:hover b, .g4-gcard:hover b { color: var(--cobalt); }
.g4-ncard small, .g4-gcard small { font-size: .9rem; color: var(--steel); }
.g4-ncard .x-link, .g4-gcard .x-link { margin-top: auto; padding-top: 18px; align-self: flex-start; font-weight: 600; font-size: .95rem; border-bottom: 0; }

/* ==========================================================================
   Long-form reading column (news articles, how-to guides)
   ========================================================================== */
.g4-read { max-width: calc(720px + 48px); padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(56px, 7vw, 96px); }
.g4-post, .g4-guide { scroll-margin-top: 96px; }
.g4-post + .g4-post, .g4-guide + .g4-guide { margin-top: clamp(56px, 6vw, 80px); padding-top: clamp(56px, 6vw, 80px); border-top: 1px solid var(--hair); }

/* Article title + standfirst */
.g4-post h2, .g4-guide h2 { font-size: clamp(1.85rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -.03em; margin: 0 0 22px; }
.g4-stand { font-size: 1.16rem; line-height: 1.6; color: var(--steel); margin: 0; }

/* Prose */
.g4-post > p, .g4-post > ul { font-size: 1.06rem; line-height: 1.75; color: var(--ink-2); margin: 0 0 1.05em; }
.g4-post > h3 { font-size: clamp(1.25rem, 1.8vw, 1.42rem); margin: 2.2em 0 .6em; line-height: 1.25; }
.g4-post > h2 + p, .g4-post > h2 + h3 { margin-top: 0; }
.g4-post strong { color: var(--ink); }
.g4-post > p a, .g4-post li a, .g4-sources a, .g4-step p a {
  color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(50, 86, 245, .35);
}
.g4-post > p a:hover, .g4-post li a:hover, .g4-sources a:hover, .g4-step p a:hover { text-decoration-color: currentColor; }
.g4-post > .check-list { margin: 0 0 1.2em; }
.g4-post > .check-list li { font-size: 1.02rem; line-height: 1.65; margin-bottom: 10px; }

/* Callouts inside prose: soft tinted card */
.g4-post > p.note {
  font-size: 1rem; line-height: 1.68; color: var(--ink-2);
  background: linear-gradient(120deg, #F1F5FF, #F6F2FF); border: 1px solid #DEE5FF; border-radius: 14px;
  padding: 18px 22px 18px 24px; margin: 1.5em 0; position: relative; overflow: hidden;
}
.g4-post > p.note::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-grad); }

/* Sources and method: a quiet card at the end of each note */
.g4-sources { margin-top: 40px; padding: 24px 26px; background: var(--porcelain); border: 1px solid var(--hair); border-radius: 16px; }
.g4-sources strong { display: block; font-family: var(--display); font-size: 1rem; font-weight: 650; color: var(--ink); margin-bottom: 10px; }
.g4-sources ul { list-style: none; padding: 0; margin: 0 0 14px; }
.g4-sources li { font-size: .92rem; line-height: 1.5; padding: 8px 0 8px 18px; margin: 0; color: var(--ink-2); position: relative; }
.g4-sources li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-grad); }
.g4-sources p { font-size: .9rem; line-height: 1.6; color: var(--steel); margin: 0; }

/* Wide lane: figures and tables break out of the 720px column */
.g4-post > .shot.g4-wide { --g4w: min(880px, calc(100vw - 48px)); }
.g4-post > .shot-grid.g4-wide, .g4-post > .g4-table.g4-wide { --g4w: min(1080px, calc(100vw - 48px)); }
.g4-post > .shot.g4-wide, .g4-post > .shot-grid.g4-wide, .g4-post > .g4-table.g4-wide { width: var(--g4w); max-width: none; margin-left: calc((100% - var(--g4w)) / 2); margin-right: 0; }
/* style.css caps #ai-audit-0812 .shot at 700px; lift it for the wide lane */
.g4-read #ai-audit-0812 .shot { max-width: none; margin: 36px 0; }
.g4-read #ai-audit-0812 > .shot.g4-wide { margin-left: calc((100% - var(--g4w)) / 2); }
.g4-read #ai-audit-0812 .shot-grid .shot { margin: 0; }

/* Figures (AI screenshots) as rounded cards */
.g4-post .shot { margin: 36px 0; border: 1px solid var(--hair); border-radius: 18px; box-shadow: var(--s-shadow); background: #fff; }
.g4-post .shot-grid { margin: 32px 0 36px; gap: 22px; }
.g4-post .shot-grid .shot { margin: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.g4-post .shot-grid .shot figcaption { margin-top: 0; }
.g4-post .shot-q { padding: 16px 20px 14px; background: #fff; }
.g4-post .shot-tag { display: inline-block; background: #EEF2FF !important; color: var(--cobalt) !important; border-radius: 999px; padding: 3px 10px; font-size: .74rem; letter-spacing: .01em; text-transform: none; font-weight: 650; margin-bottom: 8px; }
.g4-post .shot-q code { font-family: var(--font); font-size: .95rem; font-weight: 550; color: var(--ink); }
.g4-post .shot img { border-bottom: 1px solid var(--hair); }
.g4-post .shot figcaption { font-size: .9rem; padding: 14px 20px 16px; }
.g4-post .shot figcaption strong { display: inline; font-size: .93rem; }

/* Tables (already rounded by saas.css) */
.g4-table { margin: 22px 0 12px; }
.g4-table thead th { font-size: .84rem; padding: 14px 18px 12px; white-space: nowrap; }
.g4-table td { padding: 14px 18px; font-size: .92rem; }
.g4-table tbody tr:last-child td { border-bottom: 0; }
.g4-table .q-cell code { font-family: var(--font); font-size: .88rem; color: var(--ink-2); }
.g4-table td.td-bad, .g4-table td.td-win { white-space: nowrap; font-weight: 700; font-size: 1rem; }

/* Inline CTA between articles / guides */
.g4-break { margin: clamp(48px, 6vw, 72px) 0 0; }
.g4-break + .g4-post, .g4-break + .g4-guide { margin-top: clamp(64px, 8vw, 104px); padding-top: 0; border-top: 0; }
.g4-break .inline-cta { max-width: none; margin: 0; padding: 26px 28px; }
.g4-break .inline-cta .btn-row { gap: 12px; align-items: center; flex-wrap: wrap; }

/* ==========================================================================
   insights.html — resource hub
   ========================================================================== */
.g4-feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 22px; }
.g4-rcard { display: flex; flex-direction: column; }
.g4-rcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.g4-lib .g4-rcard .s-ico { margin: 0; }
.g4-lib .g4-rcard .s-tag { margin: 0; }
.g4-lib .g4-rcard h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 10px; }
.g4-lib .g4-rcard--feat h3 { font-size: 1.5rem; letter-spacing: -.02em; }
.g4-rcard h3 a { color: var(--ink); }
.g4-rcard h3 a:hover { color: var(--cobalt); }
.g4-lib .g4-rcard > p { margin: 0 0 18px; }
.g4-rcard--feat { padding: 34px 34px 30px; }
.g4-rlist { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.g4-rlist li { margin: 0; padding: 0 0 0 30px; position: relative; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.g4-rlist li::before { content: ''; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #EEF2FF; }
.g4-rlist li::after { content: ''; position: absolute; left: 6px; top: 6px; width: 8px; height: 4.5px; border-left: 2px solid var(--cobalt); border-bottom: 2px solid var(--cobalt); transform: rotate(-45deg); }
.g4-rcard-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.g4-lib .g4-rcard .g4-rmeta { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .84rem; line-height: 1.45; color: var(--steel); }
.g4-rmeta span { font-weight: 650; color: var(--ink); }
.g4-rcard-foot .x-link { font-weight: 600; font-size: .94rem; }
.g4-more-grid .g4-rcard-foot { flex-direction: column; align-items: flex-start; }
.g4-lib .g4-more-grid .g4-rmeta { flex-direction: column; }
.g4-ccard h3 { font-size: 1.12rem; }

/* ==========================================================================
   news.html — index cards + changelog cards
   ========================================================================== */
.g4-idx .s-head { margin-bottom: 48px; }

.g4-log { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; display: grid; gap: 14px; }
.g4-log-item {
  margin: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 28px; align-items: start;
  background: #fff; border: 1px solid var(--hair); border-radius: 18px; padding: 24px 28px; box-shadow: 0 1px 2px rgba(10, 37, 64, .04);
}
.g4-log-item time { justify-self: start; font-size: .8rem; font-weight: 650; color: var(--cobalt); background: #EEF2FF; border-radius: 999px; padding: 5px 12px; white-space: nowrap; margin-top: 1px; }
.g4-log-item h3 { font-size: 1.08rem; margin: 0 0 6px; line-height: 1.35; }
.g4-log-item p { margin: 0; color: var(--steel); font-size: .98rem; line-height: 1.62; }

/* ==========================================================================
   how-to.html — guide contents + numbered step cards
   ========================================================================== */
.g4-toc-sec .s-head { margin-bottom: 44px; }
.g4-group { font-size: 1.06rem; font-weight: 700; color: var(--ink); margin: 0 0 18px; }
.g4-group span { font-weight: 500; color: var(--steel); }
.g4-gcards + .g4-group { margin-top: 44px; }
.g4-gcard .g4-num { font-family: var(--display); font-weight: 750; font-size: .95rem; color: #fff; letter-spacing: -.01em; }
.g4-time { display: inline-block; font-size: .8rem; font-weight: 650; color: var(--cobalt); background: #EEF2FF; border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.g4-gcard--cta { background: linear-gradient(135deg, #F1F5FF, #F4EEFF); border-color: #DEE5FF; }

.g4-guide-head { margin-bottom: 30px; }
.g4-steps { list-style: none; margin: 0; padding: 0; counter-reset: g4s; display: grid; gap: 14px; }
.g4-step {
  counter-increment: g4s; margin: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 18px;
  background: #fff; border: 1px solid var(--hair); border-radius: 18px; padding: 22px 26px 22px 22px; box-shadow: var(--s-shadow);
}
.g4-step::before {
  content: counter(g4s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--brand-grad); color: #fff; font-family: var(--display); font-weight: 750; font-size: 1rem;
  box-shadow: 0 10px 20px -10px rgba(76, 70, 245, .7);
}
.g4-step > div { min-width: 0; padding-top: 7px; }
.g4-step h3 { font-size: 1.12rem; margin: 0 0 8px; line-height: 1.35; }
.g4-step p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--ink-2); }

/* Page CTA: keep the text clear of the report card on the right */
.g4-cta { padding: clamp(48px, 6vw, 88px) 0; }
@media (min-width: 901px) { .g4-cta .cta-band { padding-right: calc(min(34%, 400px) + 96px); } }

/* Responsive */
@media (max-width: 980px) {
  .g4-feat-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .g4-read { padding-top: 56px; }
  .g4-meta a { margin-left: 0; }
  .g4-post > p, .g4-post > ul { font-size: 1.02rem; }
  .g4-post .shot-grid { grid-template-columns: minmax(0, 1fr); }
  .g4-post .shot-q code { font-size: .88rem; }
  .g4-post > p.note { padding: 16px 18px 16px 20px; }
  .g4-sources { padding: 20px; }
  .g4-break .inline-cta { padding: 22px 20px; }
  .g4-rcard--feat { padding: 28px 24px 24px; }
  .g4-log-item { grid-template-columns: minmax(0, 1fr); padding: 20px 22px; }
  .g4-step { grid-template-columns: 34px minmax(0, 1fr); gap: 0 14px; padding: 18px 18px 18px 16px; }
  .g4-step::before { width: 34px; height: 34px; border-radius: 10px; font-size: .92rem; }
  .g4-step > div { padding-top: 4px; }
}
@media (max-width: 760px) {
  .g4-step > div { display: contents; }
  .g4-step h3 { align-self: center; margin: 0; }
  .g4-step p { grid-column: 1 / -1; margin-top: 12px; }
}