/* ==========================================================================
   Group 2 pages: method.html, solutions.html, cases.html
   "Bright SaaS" layout pass. Loaded after en.css and before saas.css,
   so rules that compete with saas.css are scoped under .g2-page.
   Every class is prefixed g2-.
   ========================================================================== */

/* Hero: shorter, type-led */
.g2-hero { min-height: 0; }
.g2-hero h1 { max-width: 15ch; }
.g2-hero .hero-lead { max-width: 58ch; }
.g2-btns { align-items: center; gap: 16px 24px; }

.g2-foot { margin: 28px auto 0; text-align: center; max-width: 72ch; }
.g2-page .s-head p strong { color: var(--ink); }

/* Shared: centered sub-heading inside a section */
.g2-subhead { text-align: center; font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 750; letter-spacing: -.025em; margin: clamp(72px, 8vw, 104px) 0 36px; }

/* ---------- GEO vs SEO diagram (method) ---------- */
.g2-vs { margin: 0 0 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.g2-vs-card { display: flex; flex-direction: column; padding: 30px 30px 28px; border-radius: 20px; background: var(--porcelain); border: 1px solid var(--hair); }
.g2-vs-card--geo { background: linear-gradient(#fff, #fff) padding-box, var(--brand-grad) border-box; border: 2px solid transparent; box-shadow: var(--s-shadow-lg); }
.g2-vs-top { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.g2-vs-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #E6EBF2; }
.g2-vs-ico svg { width: 19px; height: 19px; stroke: var(--steel); }
.g2-vs-card--geo .g2-vs-ico { background: var(--brand-grad); box-shadow: 0 10px 20px -10px rgba(76,70,245,.7); }
.g2-vs-card--geo .g2-vs-ico svg { stroke: #fff; }
.g2-vs-label { margin: 0; font-weight: 650; font-size: 1.02rem; line-height: 1.35; color: var(--ink-2); }
.g2-vs-card--geo .g2-vs-label { color: var(--ink); }
.g2-flow { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.g2-flow li { position: relative; margin: 0; padding: 13px 18px; border-radius: 12px; text-align: center; font-size: .97rem; line-height: 1.35; background: #fff; border: 1px solid var(--hair); color: var(--steel); }
.g2-vs-card--geo .g2-flow li { border-color: #D5DEFF; color: var(--ink); font-weight: 550; }
.g2-vs-card--geo .g2-flow li.g2-flow-key { padding: 26px 18px; background: var(--brand-grad); border-color: transparent; color: #fff; font-weight: 650; font-size: 1.05rem; box-shadow: 0 14px 30px -14px rgba(76,70,245,.75); }
/* down-arrow connectors drawn as shapes */
.g2-flow li + li::before { content: ''; position: absolute; left: 50%; top: -21px; width: 1.5px; height: 12px; margin-left: -.75px; background: #A9B4C6; }
.g2-flow li + li::after { content: ''; position: absolute; left: 50%; top: -10px; margin-left: -4.5px; border: 4.5px solid transparent; border-top: 6px solid #A9B4C6; border-bottom: 0; }
.g2-vs-card--geo .g2-flow li + li::before { background: var(--violet); }
.g2-vs-card--geo .g2-flow li + li::after { border-top-color: var(--violet); }
.g2-vs-out { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--hair); font-size: .95rem; color: var(--steel); }
.g2-vs-out strong { color: var(--ink); }
.g2-vs-card--geo .g2-vs-out strong { color: var(--cobalt); }
.g2-vs-cap { grid-column: 1 / -1; margin: 8px auto 0; text-align: center; max-width: 70ch; color: var(--ink-2); }
.g2-vs-cap strong { color: var(--ink); }

/* ---------- Capabilities (method): s-feature rows ---------- */
.g2-page .g2-cap .s-feature-copy > p { color: var(--steel); margin: 0 0 22px; }
.g2-page .g2-cap:last-child { margin-bottom: 0; }

/* ---------- Step rows (method phases, cases pilot) ---------- */
.g2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: none; }
.g2-step { position: relative; margin: 0; display: flex; flex-direction: column; padding: 28px 24px 24px; background: #fff; border: 1px solid var(--hair); border-radius: 20px; box-shadow: var(--s-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.g2-step:hover { transform: translateY(-3px); box-shadow: var(--s-shadow-lg); }
/* connector between step cards */
.g2-step + .g2-step::before { content: ''; position: absolute; left: -22px; top: 49px; width: 22px; height: 2px; background: linear-gradient(90deg, #C7D3FF, #D9C9FF); }
.g2-step-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.g2-step-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-grad); color: #fff; font-weight: 750; font-size: 1.1rem; box-shadow: 0 10px 20px -10px rgba(76,70,245,.7); }
.g2-step-when { font-size: .82rem; font-weight: 650; color: var(--cobalt); background: #EEF2FF; border-radius: 999px; padding: 5px 11px; text-align: right; }
.g2-step h3 { margin: 0 0 8px; }
.g2-step p { color: var(--steel); font-size: .97rem; margin: 0 0 14px; }
.g2-step .g2-step-key { color: var(--violet); font-weight: 650; font-size: .9rem; margin-bottom: 10px; }
.g2-step .g2-step-out { margin: auto 0 0; padding: 14px 16px; border-radius: 12px; background: var(--porcelain); color: var(--ink-2); font-size: .92rem; }
.g2-step .g2-step-out strong { color: var(--ink); }
.g2-loop { display: flex; gap: 12px; align-items: flex-start; justify-content: center; width: fit-content; max-width: 100%; margin: 36px auto 0; padding: 14px 22px; border-radius: 999px; background: linear-gradient(120deg, #F1F5FF, #F5F0FF); border: 1px solid #DEE5FF; color: var(--ink-2); font-size: .97rem; }
.g2-loop svg { width: 20px; height: 20px; flex: none; color: var(--cobalt); margin-top: 2px; }
.g2-loop strong { color: var(--ink); }
.g2-loop--plain { max-width: 820px; border-radius: 18px; padding: 18px 24px; text-align: left; }

/* ---------- Dark band (one per page) ---------- */
.g2-dark { padding: clamp(80px, 9vw, 128px) 0; }
.g2-dark .s-head .x-kicker { color: #A9B8FF; }
.g2-dark .s-head p { color: #B9C1D3; }
.g2-page .g2-glass { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); box-shadow: none; backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: flex-start; }
.g2-page .g2-glass:hover { box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); border-color: rgba(169,184,255,.35); }
.g2-page .g2-glass h3 { color: #fff; }
.g2-page .g2-glass p { color: #B9C1D3; }
.g2-page .g2-glass .g2-play { margin-top: auto; padding-top: 18px; color: #E7EAF2; font-size: .94rem; }
.g2-glass p + .g2-play { margin-top: auto; }
.g2-page .g2-glass .g2-play strong { color: #C9D2FF; }
.g2-dnote { margin: 32px auto 0; max-width: 72ch; text-align: center; font-size: .9rem; color: #8E98AE !important; }

/* ---------- Industry jump bar + cards (solutions) ---------- */
.g2-jump { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: -16px 0 48px; text-align: center; }
.g2-jump-lab { font-weight: 650; color: var(--ink); font-size: .95rem; }
.g2-jump-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 980px; }
.g2-jump-links a { display: inline-block; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--border-strong); color: var(--ink-2); font-weight: 550; font-size: .9rem; line-height: 1.3; box-shadow: 0 1px 2px rgba(10,37,64,.05); transition: border-color .2s ease, color .2s ease, background .2s ease; }
.g2-jump-links a:hover { border-color: var(--cobalt); color: var(--cobalt); background: #F5F7FF; }
.g2-page .g2-ind { display: flex; flex-direction: column; scroll-margin-top: 110px; padding: 30px 28px 24px; }
.g2-page .g2-ind:target { border-color: #B9C6FF; box-shadow: 0 0 0 3px rgba(50,86,245,.14), var(--s-shadow-lg); }
.g2-page .g2-ind h3 { margin-bottom: 6px; }
.g2-page .g2-ind .g2-ind-who { font-size: .92rem; color: var(--steel); margin: 0 0 16px; }
.g2-page .g2-ind .g2-ind-why { font-size: .97rem; color: var(--ink-2); margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--porcelain); }
.g2-page .g2-ind .g2-ind-why strong { color: var(--ink); }
.g2-ind .s-checks { margin-bottom: 8px; }
.g2-ind .s-checks li { font-size: .94rem; padding-bottom: 12px; }
.g2-ind .s-checks li::before { top: 2px; }
.g2-ind .s-checks li::after { top: 7px; }
.g2-page .g2-ind .g2-evidence { margin: 0 0 16px; font-size: .9rem; }
.g2-evidence a { display: block; color: var(--ink-2); padding: 10px 14px 10px 34px; position: relative; border-radius: 12px; background: #FFF5F5; border: 1px solid #FBDADA; line-height: 1.45; }
.g2-evidence a::before { content: ''; position: absolute; left: 14px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: #D64545; }
.g2-evidence a:hover { color: var(--cobalt); border-color: #F3B9B9; }
.g2-page .g2-ind .g2-ind-plan { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--hair); font-size: .92rem; color: var(--steel); }
.g2-page .g2-ind .g2-ind-plan strong { color: var(--cobalt); }

/* ---------- Before / after cards (solutions) ---------- */
.g2-page .g2-ba-card { display: flex; flex-direction: column; align-items: flex-start; }
.g2-page .g2-ba-card .g2-ba-q { font-size: 1.2rem; line-height: 1.35; letter-spacing: -.015em; font-weight: 650; color: var(--ink); margin: 0 0 22px; }
.g2-ba-card dl { margin: auto 0 0; width: 100%; display: grid; gap: 10px; }
.g2-ba-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--porcelain); }
.g2-ba-row--after { background: linear-gradient(120deg, #F1F5FF, #F5F0FF); box-shadow: inset 0 0 0 1px #DEE5FF; }
.g2-ba dt { font-size: .84rem; font-weight: 650; color: var(--steel); padding-top: 2px; }
.g2-ba dd { margin: 0; color: var(--steel); font-size: .95rem; }
.g2-ba dd b { display: block; margin-top: 4px; font-weight: 650; font-size: .88rem; color: var(--steel); }
.g2-ba-row--after dt { color: var(--cobalt); }
.g2-ba-row--after dd, .g2-ba-row--after dd b { color: var(--ink); }
.g2-ba em { font-style: normal; font-weight: 650; color: #fff; background: var(--brand-grad); border-radius: 6px; padding: 1px 7px; }

/* ---------- Client cases (cases) ---------- */
.g2-page .g2-case { display: flex; flex-direction: column; }
.g2-page .g2-case .s-tag { align-self: flex-start; margin-bottom: 12px; }
.g2-page .g2-case h3 { font-size: 1.25rem; margin-bottom: 6px; }
.g2-page .g2-case .note { margin: 0 0 20px; font-size: .86rem; }
.g2-facts { margin: 0; display: flex; flex-direction: column; flex: 1; }
.g2-facts > div { padding: 14px 0; border-top: 1px solid var(--hair); }
.g2-facts dt { font-weight: 650; color: var(--ink); font-size: .9rem; margin-bottom: 4px; }
.g2-facts dd { margin: 0; color: var(--steel); font-size: .96rem; }
.g2-facts .g2-facts-result { margin-top: auto; padding: 16px 18px; border: 0; border-radius: 14px; background: linear-gradient(120deg, #F1F5FF, #F5F0FF); box-shadow: inset 0 0 0 1px #DEE5FF; }
.g2-facts .g2-facts-result dt { color: var(--cobalt); }
.g2-facts .g2-facts-result dd { color: var(--ink); font-weight: 600; }

/* Evidence lesson (cases) */
.g2-lesson { max-width: 820px; margin: 56px auto 0; text-align: center; }
.g2-page .g2-lesson .g2-lesson-lead { font-family: var(--font); font-size: .95rem; font-weight: 650; letter-spacing: 0; color: var(--cobalt); margin: 0; }
.g2-page .g2-lesson .x-lesson { margin-top: 12px; max-width: 32ch; }
.g2-page .g2-lesson .x-lesson-body { max-width: 66ch; }
.g2-shots .shot figcaption strong { display: inline; }
.shot-q code { font-family: var(--font); font-size: .92rem; font-weight: 600; color: var(--carbon); }

/* Self-run ledger (cases) */
.g2-page .g2-proof { margin-top: 0; align-items: stretch; }
.g2-ledger dl { margin-bottom: 0 !important; }
.g2-ledger dt small { display: block; font-size: .84rem; color: var(--steel); margin-top: 2px; }
.g2-page .g2-ledger dd { font-size: 1.5rem; align-self: center; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.g2-page .g2-ledger dd small { -webkit-text-fill-color: var(--steel); }
.g2-page .g2-matters { padding: 34px 34px 30px; }
.g2-page .g2-matters h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin-bottom: 14px; }
.g2-page .g2-matters p { color: var(--ink-2); margin: 0 0 16px; }
.g2-page .g2-matters strong { color: var(--ink); }
.g2-page .g2-matters .g2-caveat { margin: 22px 0 0; padding: 16px 18px; border-radius: 14px; background: #FFF8EC; border: 1px solid #F6E1B5; font-size: .93rem; color: var(--ink-2); }
.g2-page .g2-matters .g2-caveat strong { color: #7A4B00; }

/* Measured value on a light band (cases) */
.g2-page .g2-stats { border-top: 0; gap: 22px; }
.g2-page .g2-stats .x-stat, .g2-page .g2-stats .x-stat + .x-stat { background: #fff; border: 1px solid var(--hair) !important; border-radius: 20px; padding: 30px 28px 28px !important; box-shadow: var(--s-shadow); backdrop-filter: none; }
.g2-page .g2-stats .x-stat-num { background: linear-gradient(120deg, #0A2540 10%, #3256F5 60%, #7A4DFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .05em; }
.g2-page .g2-stats .x-bar i { background: #EDF1F7; }
.g2-page .g2-stats .x-bar i::after { background: #B8C3D4; }
.g2-page .g2-stats .x-bar i.x-after::after { background: var(--brand-grad); }

/* Who it's for (cases) */
.g2-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1040px; margin: 0 auto; }
.g2-cols .s-card { padding: 34px 34px 30px; }
.g2-cols h3 { margin-bottom: 18px; }
.g2-cols .s-checks { margin-bottom: 8px; }
.g2-page .g2-cols .note { margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--hair); font-size: .92rem; color: var(--steel); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .g2-steps { grid-template-columns: 1fr 1fr; }
  .g2-step:nth-child(3)::before { display: none; }
}
@media (max-width: 980px) {
  .g2-inds.s-grid--3, .g2-ba.s-grid--3, .g2-cases.s-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .g2-vs { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .g2-inds.s-grid--3, .g2-ba.s-grid--3, .g2-cases.s-grid--3 { grid-template-columns: 1fr; }
  .g2-steps { grid-template-columns: 1fr; gap: 26px; }
  .g2-step + .g2-step::before, .g2-step:nth-child(3)::before { display: block; left: 46px; top: -26px; width: 2px; height: 26px; background: linear-gradient(180deg, #C7D3FF, #D9C9FF); }
  .g2-cols { grid-template-columns: 1fr; }
  .g2-vs-card { padding: 24px 20px; }
  .g2-cols .s-card, .g2-page .g2-matters { padding: 28px 22px 24px; }
  .g2-jump { align-items: flex-start; text-align: left; margin-top: -24px; }
  .g2-jump-links { justify-content: flex-start; gap: 8px; }
  .g2-jump-links a { font-size: .86rem; padding: 7px 13px; }
  .g2-loop { border-radius: 18px; text-align: left; justify-content: flex-start; }
  .g2-foot, .g2-dnote, .g2-vs-cap, .g2-subhead, .g2-lesson { text-align: left; margin-left: 0; }
  .g2-page .g2-lesson .x-lesson, .g2-page .g2-lesson .x-lesson-body { text-align: left; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .g2-step { transition: none; transform: none !important; }
}

/* Tables stack into labelled rows on phones */
@media (max-width: 640px) {
  .g2-stack { min-width: 0; }
  .g2-stack thead { display: none; }
  .g2-stack, .g2-stack tbody, .g2-stack tr, .g2-stack td { display: block; width: 100%; }
  .g2-stack tr { padding: 18px 18px 14px; border-top: 1px solid var(--hair); }
  .g2-stack tbody tr:first-child { border-top: 0; }
  .g2-stack td { padding: 6px 0; border: 0; }
  .g2-stack td:first-child { padding: 0 0 8px; font-size: 1.02rem; color: var(--carbon); }
  .g2-stack td:not(:first-child)::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 600; color: var(--steel); margin-bottom: 2px; }
  .g2-stack .td-win { padding-left: 12px; margin: 4px 0; }
}

/* Small helpers */
.g2-nw { white-space: nowrap; }
/* Feather render edges that are not pure white so they blend into the card */
.g2-cap .s-feature-art img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-composite: intersect; }

/* Refinements after visual check */
.g2-ba-card dl { margin-top: 0; }
.g2-page .g2-stats .x-stat-num { font-size: clamp(2.6rem, 4.2vw, 3.7rem); white-space: nowrap; }
.g2-page .g2-ledger dl div:first-child { border-top: 0; padding-top: 0; }
.g2-cols .s-card { display: flex; flex-direction: column; }
.g2-page .g2-cols .note { margin-top: auto; }
@media (max-width: 760px) {
  .g2-jump-links { flex-wrap: nowrap; overflow-x: auto; max-width: none; width: calc(100% + 48px); margin: 0 -24px; padding: 2px 24px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .g2-jump-links::-webkit-scrollbar { display: none; }
  .g2-jump-links a { flex: none; white-space: nowrap; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .g2-inds.s-grid--3 > :last-child, .g2-ba.s-grid--3 > :last-child, .g2-cases.s-grid--3 > :last-child { grid-column: 1 / -1; }
}