/* "Find → Trust → Reach" hub + series. Clean, white, one idea per screen.
   Palette: navy #2C3E50, teal #00BFA5/#00897B, yellow #FFC107 (site colours). */

.gf { color: #2C3E50; }
.gf *, .gf *::before, .gf *::after { box-sizing: border-box; }
.gf .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.gf h1, .gf h2, .gf h3 { color: #2C3E50; margin: 0; line-height: 1.12; letter-spacing: -0.01em; }
.gf p { color: #4A5568; font-size: 19px; line-height: 1.6; margin: 0; }
.gf .lbl { display: block; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #00897B; margin-bottom: 14px; }
.gf .hl { color: #00897B; }

/* Buttons */
.gf-btn {
  display: inline-block; background: #FFC107; color: #2C3E50 !important; font-weight: 800; font-size: 18px;
  padding: 16px 32px; border-radius: 999px; text-decoration: none !important; border: 0; cursor: pointer;
  box-shadow: 0 6px 18px rgba(255,193,7,.35); transition: transform .15s, box-shadow .15s;
}
.gf-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,193,7,.45); }
.gf-btn.alt { background: #fff; color: #00897B !important; border: 2px solid #00897B; box-shadow: none; }
.gf-link { color: #00897B; font-weight: 700; text-decoration: none; font-size: 18px; }
.gf-link:hover { text-decoration: underline; }
.gf-link::after { content: " →"; }

/* ---------- Hero ---------- */
.gf-hero { background: #fff; padding: 72px 0 40px; }
.gf-hero .wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.gf-hero h1 { font-size: 64px; margin-bottom: 22px; text-wrap: balance; }
.gf-hero p { margin-bottom: 30px; max-width: 520px; }
.gf-hero .gf-hint { font-size: 15px; color: #718096; margin-top: 14px; }

/* Sticky pill nav (Workspace style) */
.gf-pills { position: sticky; top: 0; z-index: 400; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); padding: 14px 0; }
.gf-pills .in { display: flex; justify-content: center; gap: 6px; margin: 0 auto; width: max-content; max-width: 100%;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 6px; box-shadow: 0 4px 14px rgba(44,62,80,.08); overflow-x: auto; }
.gf-pills a { white-space: nowrap; font-size: 15px; font-weight: 600; color: #2C3E50; text-decoration: none; padding: 9px 18px; border-radius: 999px; }
.gf-pills a:hover, .gf-pills a.on { background: #E6F7F4; color: #00897B; }

/* ---------- Sections ---------- */
.gf-sec { padding: 96px 0; }
.gf-sec.tint { background: #F7FAFB; }
.gf-sec .head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.gf-sec .head h2 { font-size: 46px; margin-bottom: 18px; text-wrap: balance; }

/* Three checks */
.gf-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.gf-3 > div { text-align: center; }
.gf-3 .ic { width: 64px; height: 64px; border-radius: 20px; background: #E6F7F4; color: #00897B; font-size: 28px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.gf-3 h3 { font-size: 26px; margin-bottom: 10px; }
.gf-3 p { font-size: 17px; }

/* Feature rows with big-stat visual */
.gf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 56px 0; }
.gf-row + .gf-row { border-top: 1px solid #edf2f7; }
.gf-row.flip .txt { order: 2; }
.gf-row h3 { font-size: 38px; margin-bottom: 16px; text-wrap: balance; }
.gf-row p { margin-bottom: 22px; }
.gf-big { background: #2C3E50; color: #fff; border-radius: 24px; padding: 48px 40px; text-align: center; box-shadow: 0 24px 60px rgba(44,62,80,.18); }
.gf-big .n { font-size: 96px; font-weight: 800; line-height: 1; color: #FFC107; letter-spacing: -0.03em; }
.gf-big .n small { font-size: 40px; }
.gf-big .t { color: #fff; font-size: 20px; line-height: 1.45; margin: 16px auto 0; max-width: 360px; }
.gf-big .s { display: block; color: rgba(255,255,255,.55); font-size: 12px; margin-top: 18px; }
.gf-big .vs { display: flex; justify-content: center; gap: 36px; align-items: flex-end; }
.gf-big .vs .n2 { font-size: 34px; color: rgba(255,255,255,.5); font-weight: 800; line-height: 1; }
.gf-big .vs span { display: block; font-size: 14px; color: rgba(255,255,255,.7); margin-top: 8px; max-width: 150px; }

/* Proof strip */
.gf-proof { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; padding: 36px 0; border-top: 1px solid #edf2f7; border-bottom: 1px solid #edf2f7; }
.gf-proof div { text-align: center; }
.gf-proof b { display: block; font-size: 30px; color: #2C3E50; }
.gf-proof span { font-size: 14px; color: #718096; }

/* AI strip */
.gf-ai { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.gf-ai h2 { font-size: 42px; margin-bottom: 16px; text-wrap: balance; }
.gf-ai ol { margin: 0; padding: 0; list-style: none; counter-reset: p; }
.gf-ai li { counter-increment: p; display: flex; gap: 16px; align-items: center; padding: 14px 18px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; margin-bottom: 10px; }
.gf-ai li::before { content: counter(p); width: 34px; height: 34px; border-radius: 50%; background: #E6F7F4; color: #00897B; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gf-ai li a { color: #2C3E50; font-weight: 700; text-decoration: none; font-size: 17px; }
.gf-ai li a:hover { color: #00897B; }

/* ---------- Report form box ---------- */
.gf-form-box { background: #fff; color: #2C3E50; border-radius: 24px; padding: 32px; border: 1px solid #e2e8f0; box-shadow: 0 24px 60px rgba(44,62,80,.14); }
.gf-form-box h3 { margin: 0 0 6px; font-size: 24px; color: #2C3E50; }
.gf-form-box .gf-form-sub { font-size: 15px; color: #718096; margin: 0 0 16px; }
.gf-form-box label { display: block; font-weight: 700; margin: 14px 0 6px; font-size: 15px; }
.gf-form-box input[type=text], .gf-form-box input[type=email] { width: 100%; padding: 14px; border: 1px solid #cbd5e0; border-radius: 10px; font-size: 16px; box-sizing: border-box; }
.gf-form-box button[type=submit] { width: 100%; margin-top: 18px; background: #FFC107; color: #2C3E50; border: 0; border-radius: 999px; padding: 16px; font-size: 18px; font-weight: 800; cursor: pointer; }
.gf-form-box .privacy { font-size: 12px; color: #718096; margin-top: 12px; line-height: 1.5; }
.gf-form-box .noplace { font-size: 14px; color: #4A5568; margin: 14px 0 0; text-align: center; }
.gf-form-box #ib-form-widget input, .gf-form-box #ib-form-widget select { width: 100%; padding: 14px; border: 1px solid #cbd5e0; border-radius: 10px; font-size: 16px; box-sizing: border-box; }
.gf-form-box .business-lookup-container .form-heading { display: none !important; }

/* Banded report section (part pages) */
.gf-report { background: #2C3E50; color: #fff; padding: 80px 0; }
.gf-report .container { max-width: 1060px; margin: 0 auto; padding: 0 24px; display: block; }
.gf-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.gf-report h2 { color: #fff; font-size: 40px; margin: 0 0 18px; text-wrap: balance; }
.gf-report ul { padding: 0; list-style: none; margin: 0; }
.gf-report li { color: #fff; font-size: 18px; margin: 12px 0; }
.gf-report li::before { content: "✓ "; color: #FFC107; font-weight: 800; }

/* Mobile sticky CTA */
.gf-sticky { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900; text-align: center;
  background: #FFC107; color: #2C3E50; font-weight: 800; font-size: 17px; padding: 15px; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.25); }

/* ---------- Part pages (kept until the parts are redesigned) ---------- */
.gf-content { max-width: 760px; margin: 0 auto; padding: 48px 24px 24px; color: #2C3E50; }
.gf-content p, .gf-content li { font-size: 18px; line-height: 1.7; color: #4A5568; }
.gf-content h2 { font-size: 32px; margin: 48px 0 14px; color: #2C3E50; }
.gf-content h3 { font-size: 22px; margin: 28px 0 10px; color: #2C3E50; }
.gf-content strong { color: #2C3E50; }
.gf-lead { font-size: 22px !important; color: #2C3E50 !important; }
.gf-hero .container { display: block; max-width: 800px; margin: 0 auto; padding: 0 24px; text-align: center; }
.gf-hero .container h1 { font-size: 50px; }
.gf-hero .gf-subtitle { font-size: 20px; margin: 0 auto; max-width: 640px; }
.gf-badge { display: inline-block; background: #E6F7F4; color: #00897B; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; }
.gf-nav { background: #F7FAFB; border-bottom: 1px solid #e2e8f0; padding: 14px 0; }
.gf-nav .container { max-width: 800px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; box-sizing: border-box; }
.gf-nav a { color: #00897B; font-weight: 600; text-decoration: none; }
.gf-stat { background: #fff; border-left: 6px solid #00BFA5; box-shadow: 0 6px 20px rgba(44,62,80,.08); border-radius: 12px; padding: 22px 26px; margin: 28px 0; }
.gf-stat .num { font-size: 44px; font-weight: 800; color: #00897B; display: block; line-height: 1.1; }
.gf-stat p { margin: 6px 0 0; color: #2C3E50; }
.gf-stat .src { display: block; font-size: 13px; color: #718096; margin-top: 8px; }
.gf-stat .src a { color: #718096; }
.gf-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 22px 26px; margin: 18px 0; }
.gf-card h3 { margin-top: 0; }
.gf-fix { background: #FFF8E1; border: 1px solid #FFE082; border-radius: 14px; padding: 22px 26px; margin: 28px 0; }
.gf-fix h3 { margin-top: 0; }
.gf-fix h3::before { content: "⏱ "; }
.gf-quote { border-left: 4px solid #FFC107; padding: 6px 0 6px 20px; margin: 30px 0; font-style: italic; }
.gf-quote cite { display: block; font-style: normal; font-weight: 700; margin-top: 8px; color: #2C3E50; }
.gf-check { background: #F7FAFB; border-radius: 14px; padding: 26px; margin: 35px 0; }
.gf-check h2 { margin-top: 0; }
.gf-check ol { padding-left: 0; list-style: none; counter-reset: q; margin: 0; }
.gf-check li { counter-increment: q; background: #fff; border-radius: 8px; padding: 14px 16px; margin: 10px 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 17px; }
.gf-check li::before { content: counter(q) "."; font-weight: 700; color: #00897B; }
.gf-check li.gf-group { background: none; padding: 0; display: block; counter-increment: none; font-weight: 800; color: #2C3E50; margin: 22px 0 4px; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; }
.gf-check li.gf-group::before { content: none; }
.gf-check li .q { flex: 1; }
.gf-check .yn { display: flex; gap: 6px; flex-shrink: 0; }
.gf-check .yn button { border: 2px solid #cbd5e0; background: #fff; color: #4A5568; border-radius: 6px; padding: 6px 14px; font-weight: 700; cursor: pointer; }
.gf-check .yn button.on-yes { background: #00BFA5; border-color: #00BFA5; color: #fff; }
.gf-check .yn button.on-no { background: #e53e3e; border-color: #e53e3e; color: #fff; }
.gf-result { margin-top: 20px; padding: 18px 20px; border-radius: 8px; background: #2C3E50; color: #fff; display: none; }
.gf-result.show { display: block; }
.gf-result p { color: #fff; margin: 4px 0; }
.gf-result .score { font-size: 32px; font-weight: 800; color: #FFC107; }
.gf-pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 40px 0 10px; }
.gf-sources { font-size: 13px !important; color: #718096 !important; border-top: 1px solid #e2e8f0; margin-top: 40px; padding-top: 16px; }
.gf-sources li { font-size: 13px !important; line-height: 1.6 !important; }
.gf-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; }
.gf-part { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; text-decoration: none; color: #2C3E50; }
.gf-part .n { font-size: 12px; font-weight: 800; color: #00897B; text-transform: uppercase; letter-spacing: 1px; }
.gf-part h3 { margin: 8px 0; font-size: 19px; }
.gf-part p { font-size: 15px; margin: 0; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .gf-hero .wrap, .gf-row, .gf-ai, .gf-report-grid { grid-template-columns: 1fr; gap: 36px; }
  .gf-row.flip .txt { order: 0; }
  .gf-hero { padding: 44px 0 24px; }
  .gf-hero h1 { font-size: 40px; }
  .gf-hero .container h1 { font-size: 34px; }
  .gf p { font-size: 17px; }
  .gf-sec { padding: 64px 0; }
  .gf-sec .head h2, .gf-ai h2, .gf-report h2 { font-size: 32px; }
  .gf-row h3 { font-size: 28px; }
  .gf-big .n { font-size: 72px; }
  .gf-3 { grid-template-columns: 1fr; gap: 32px; }
  .gf-pills .in { justify-content: flex-start; }
  .gf-sticky.show { display: block; }
  .gf-content h2 { font-size: 26px; }
  .gf-check li { flex-direction: column; align-items: flex-start; }
}

/* keep jumped-to sections clear of the sticky pill bar */


/* ---------- Part pages (redesigned) ---------- */
.gf-phero { background: #fff; padding: 64px 0 24px; text-align: center; }
.gf-phero .wrap { max-width: 820px; }
.gf-phero h1 { font-size: 54px; margin: 0 0 18px; text-wrap: balance; }
.gf-phero p { max-width: 640px; margin: 0 auto; }
.gf-meta { display: inline-flex; gap: 10px; align-items: center; background: #E6F7F4; color: #00897B; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; }
.gf-fact { max-width: 720px; margin: 36px auto 0; }
.gf-pts { max-width: 760px; margin: 0 auto; }
.gf-pt { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 40px 0; border-top: 1px solid #edf2f7; }
.gf-pt .ic { width: 56px; height: 56px; border-radius: 18px; background: #E6F7F4; color: #00897B; font-size: 24px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.gf-pt h3 { font-size: 28px; margin-bottom: 10px; text-wrap: balance; }
.gf-pt p + p { margin-top: 12px; }
.gf-pt .q { display: block; margin-top: 14px; padding-left: 16px; border-left: 4px solid #FFC107; font-style: italic; color: #2C3E50; }
.gf-pt .q small { display: block; font-style: normal; color: #718096; font-size: 13px; margin-top: 4px; }
.gf-fixbox { max-width: 760px; margin: 24px auto 0; background: #FFF8E1; border: 1px solid #FFE082; border-radius: 24px; padding: 36px 40px; }
.gf-fixbox h2 { font-size: 30px; margin-bottom: 18px; }
.gf-fixbox ol { margin: 0; padding-left: 22px; }
.gf-fixbox li { font-size: 18px; line-height: 1.6; color: #2C3E50; margin: 10px 0; }
.gf-fixbox .or { margin-top: 22px; padding-top: 18px; border-top: 1px solid #FFE082; font-size: 17px; }
.gf-ppager { max-width: 760px; margin: 48px auto 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gf-psrc { max-width: 760px; margin: 40px auto 0; padding-top: 16px; border-top: 1px solid #edf2f7; }
.gf-psrc li { font-size: 13px; color: #718096; line-height: 1.6; }
@media (max-width: 900px) {
  .gf-phero h1 { font-size: 36px; }
  .gf-pt { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
  .gf-pt h3 { font-size: 24px; }
  .gf-fixbox { padding: 26px 22px; }
}

/* ---------- Customer-friendly page: contact-methods picker ---------- */
.gf-pick { background: #fff; border: 1px solid #e2e8f0; border-radius: 24px; padding: 28px; box-shadow: 0 24px 60px rgba(44,62,80,.14); }
.gf-pick h3 { font-size: 22px; margin-bottom: 4px; }
.gf-pick .sub { font-size: 15px; color: #718096; margin-bottom: 16px; }
.gf-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.gf-chip { border: 2px solid #cbd5e0; background: #fff; color: #2C3E50; border-radius: 999px; padding: 11px 18px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all .12s; }
.gf-chip:hover { border-color: #00897B; }
.gf-chip.on { background: #00897B; border-color: #00897B; color: #fff; }
.gf-chip.on::before { content: "✓ "; }
.gf-verdict { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: #F7FAFB; border: 1px solid #e2e8f0; }
.gf-verdict b { display: block; font-size: 20px; color: #2C3E50; margin-bottom: 4px; }
.gf-verdict p { font-size: 15px; }
.gf-verdict.good { background: #E6F7F4; border-color: #b2e5dc; }
.gf-verdict.bad { background: #FFF8E1; border-color: #FFE082; }
.gf-verdict .gf-btn { margin-top: 12px; font-size: 16px; padding: 12px 22px; }

/* 4 needs: a sequence (find -> trust -> understand -> contact). Numbered badges sit on the card edge, arrows
   between cards carry the order, and card 4 (the one most sites get wrong) is the dark, highlighted one. */
.gf-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; padding-top: 26px; counter-reset: none; }
.gf-4 > div { position: relative; background: #fff; border: 1px solid #e2e8f0; border-top: 6px solid #00BFA5; border-radius: 20px;
  padding: 44px 24px 28px; box-shadow: 0 14px 30px -18px rgba(44,62,80,.35); transition: transform .2s, box-shadow .2s; }
.gf-4 > div:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -18px rgba(44,62,80,.45); }
.gf-4 .ic { position: absolute; top: -30px; left: 22px; width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(135deg, #00BFA5, #00897B); color: #fff; font-size: 24px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 4px solid #fff; box-shadow: 0 8px 18px -6px rgba(0,137,123,.6); }
.gf-4 h3 { font-size: 24px; margin-bottom: 10px; }
.gf-4 p { font-size: 16px; }
/* the arrow in the gap between cards */
.gf-4 > div:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -30px; width: 24px; height: 24px; margin-top: -12px;
  background: no-repeat center/14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h9M7 3l4 4-4 4' fill='none' stroke='%2300897B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), #E6F7F4;
  border-radius: 50%; z-index: 1; }
/* card 4: the one that matters most */
.gf-4 > .key { background: #2C3E50; border-color: #2C3E50; border-top-color: #FFC107; box-shadow: 0 18px 36px -16px rgba(44,62,80,.6); }
.gf-4 > .key h3 { color: #fff; }
.gf-4 > .key p { color: rgba(255,255,255,.86); }
.gf-4 > .key em { color: #FFC107; font-style: italic; }
.gf-4 > .key .ic { background: #FFC107; color: #2C3E50; box-shadow: 0 8px 18px -6px rgba(255,193,7,.7); }
.gf-4 .flag { position: absolute; top: 14px; right: 16px; background: #FFC107; color: #2C3E50; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .gf-4 > div, .gf-4 > div:hover { transition: none; transform: none; } }

/* 7 ways */
.gf-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.gf-way { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 24px; display: grid; grid-template-columns: 48px 1fr; gap: 16px; }
.gf-way .em { font-size: 30px; line-height: 1; }
.gf-way h3 { font-size: 21px; margin-bottom: 6px; }
.gf-way p { font-size: 16px; }
.gf-way .fit { display: block; margin-top: 8px; font-size: 14px; color: #00897B; font-weight: 700; }

.gf-cta { background: #2C3E50; color: #fff; padding: 88px 0; text-align: center; }
.gf-cta h2 { color: #fff; font-size: 46px; margin-bottom: 16px; text-wrap: balance; }
.gf-cta p { color: rgba(255,255,255,.85); max-width: 640px; margin: 0 auto 28px; }
.gf-cta .hint { font-size: 15px; color: rgba(255,255,255,.6); margin-top: 14px; }

@media (max-width: 900px) {
  .gf-4 { grid-template-columns: 1fr 1fr; gap: 48px 24px; }
  .gf-4 > div:not(:last-child)::after { display: none; }       /* two per row: the numbers carry the order */
  .gf-cta h2 { font-size: 32px; }
}
@media (max-width: 520px) {
  .gf-4 { grid-template-columns: 1fr; gap: 44px; }
  /* one column: arrows point down between the cards */
  .gf-4 > div:not(:last-child)::after { display: block; top: auto; bottom: -36px; right: auto; left: 50%; margin: 0 0 0 -12px; transform: rotate(90deg); }
}


/* Insites widget inside the picker box */
.gf-pick #ib-form-widget { font-family: inherit; }
.gf-pick .ib-form { max-width: 100%; padding: 0; margin: 0; }
.gf-pick .ib-form .ib-form-group { margin-bottom: 14px; }
.gf-pick .ib-form-group label { color: #2C3E50 !important; font-weight: 700 !important; font-size: 15px; }
.gf-pick .ib-form input, .gf-pick .ib-form select { display: block; width: 100%; padding: 13px; border: 1px solid #cbd5e0; border-radius: 10px; font-size: 16px; box-sizing: border-box; }
.gf-pick .ib-form input:focus { outline: none; border-color: #00897B; box-shadow: 0 0 0 3px rgba(0,137,123,.12); }
.gf-pick .business-lookup-container .form-heading { display: none !important; }
.gf-pick .ib-form button, .gf-pick .ib-form input[type=submit] { width: 100%; background: #FFC107 !important; color: #2C3E50 !important; border: 0 !important; border-radius: 999px !important; padding: 15px !important; font-size: 17px !important; font-weight: 800 !important; cursor: pointer; }
.gf-hero .wrap { align-items: start; }
.gf-hero .wrap > div:first-child { padding-top: 24px; }

/* Step 2 panel: the hand-off to the full check */
.cf-step { margin-top: 22px; padding: 24px 22px; border-radius: 18px; background: linear-gradient(180deg, #E6F7F4 0%, #fff 60%); border: 2px solid #00897B; position: relative; animation: cfIn .5s ease-out; }
.cf-step .step { display: inline-block; background: #FFC107; color: #2C3E50; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.cf-step h3 { font-size: 28px; margin: 0 0 8px; line-height: 1.15; }
.cf-step .sub { font-size: 16px; color: #4A5568; margin-bottom: 14px; }
.cf-step .type { font-size: 17px; font-weight: 800; color: #00897B; margin-bottom: 10px; }
.cf-step .arrow { display: inline-block; animation: cfBounce 1.2s infinite; }
@keyframes cfIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cfBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* 7 ways: alternating feature rows with website screenshots */
.gf-way-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; padding: 48px 0; }
.gf-way-row + .gf-way-row { border-top: 1px solid #e2e8f0; }
.gf-way-row.flip .txt { order: 2; }
.gf-way-row h3 { font-size: 34px; margin-bottom: 14px; text-wrap: balance; }
.gf-way-row p { margin-bottom: 14px; }
.gf-way-row .fit { display: inline-block; font-size: 15px; font-weight: 700; color: #00897B; background: #E6F7F4; padding: 6px 14px; border-radius: 999px; }
.gf-way-row .shot { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(44,62,80,.16); border: 1px solid #e2e8f0; }
.gf-way-row .bar { height: 30px; background: #F1F5F9; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.gf-way-row .bar i { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e0; display: block; }
.gf-way-row img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }   /* small screenshots stay sharp, centred in the frame */
.gf-way-row .ph { aspect-ratio: 16 / 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #94a3b8; font-size: 14px; font-weight: 700; background: repeating-linear-gradient(45deg, #fafcfd 0 12px, #f3f6f8 12px 24px); }
.gf-way-row .ph span { font-size: 44px; }
.gf-way-close { text-align: center; padding: 56px 0 0; }
.gf-way-close h3 { font-size: 30px; margin-bottom: 22px; text-wrap: balance; }
@media (max-width: 900px) {
  .gf-way-row { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
  .gf-way-row.flip .txt { order: 0; }
  .gf-way-row .shot { order: -1; }
  .gf-way-row h3 { font-size: 26px; }
  .gf-way-close h3 { font-size: 24px; }
}

/* Widget in the picker box: shorter form + sane secondary button (this page only) */
.gf-pick .ib-form-group:has(input[name="locations"]),
.gf-pick .ib-form-group:has(input[name="phone"]) { display: none !important; }
.gf-pick .ib-form .return-to-search-button,
.gf-pick .ib-form button.return-to-search-button {
  display: block; width: auto; margin: 12px auto 0; background: none !important; color: #718096 !important;
  border: 0 !important; padding: 4px !important; font-size: 14px !important; font-weight: 600 !important;
  text-decoration: underline; box-shadow: none !important;
}
.gf-pick .ib-form .submit-step-button { display: block; width: 100%; }

/* Rank report form nested inside a step-2 panel */
.cf-step .gf-form-box { box-shadow: none; border: 0; padding: 0; border-radius: 0; background: transparent; }
.cf-step #gf-form-widget > h3, .cf-step #gf-form-widget > .gf-form-sub { display: none; }
.cf-step #gf-form-personal > h3 { font-size: 18px; }

/* AI band: tinted, compact */
.gf-aiband { background: #F7FAFB; padding: 72px 0; }
.gf-aiband .gf-big { padding: 36px 32px; }
.gf-aiband .gf-big .n { font-size: 72px; }

/* ---------- Brand marks (coloured, readable at a glance) ---------- */
.brand { display: inline-block; width: 28px; height: 28px; vertical-align: -7px; background-color: var(--bc);
  -webkit-mask: var(--bi) center / contain no-repeat; mask: var(--bi) center / contain no-repeat; }
.gf-chip .brand { width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; }
.gf-chip.on .brand { background-color: #fff; }
.lbl .brand { width: 26px; height: 26px; margin-right: 8px; vertical-align: -8px; }
.gf-big .brand, .gf-report .brand { background-color: #fff; }
.gf-way-row .ph span .brand { width: 64px; height: 64px; opacity: .6; }
.brand-strip { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 22px; margin-top: 30px; }
.brand-strip .lead { flex-basis: 100%; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #718096; margin-bottom: -6px; }
.brand-strip .b { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; font-size: 12px; font-weight: 700; color: #4A5568; text-align: center; line-height: 1.2; }
.brand-strip .badge { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #F1F5F9; background: color-mix(in srgb, var(--bc) 12%, #fff); box-shadow: 0 6px 16px rgba(44,62,80,.10); }
.brand-strip .badge .brand { width: 32px; height: 32px; vertical-align: middle; }
.gf-aiband .brand-strip, .gf-ai .brand-strip { margin-top: 28px; padding-top: 22px; border-top: 1px solid #e2e8f0; }

@media (max-width: 900px) { .brand-strip { gap: 14px 12px; } .brand-strip .b { width: 72px; font-size: 11px; } .brand-strip .badge { width: 52px; height: 52px; } .brand-strip .badge .brand { width: 28px; height: 28px; } }
.brand-img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; background: none; -webkit-mask: none; mask: none; }
.gf-chip .brand-img { width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; }
.brand-strip .badge .brand-img { width: 40px; height: 40px; border-radius: 50%; }
.lbl .brand-img { width: 26px; height: 26px; margin-right: 8px; vertical-align: -8px; }
.gf-way-row .ph span .brand-img { width: 64px; height: 64px; border-radius: 12px; opacity: .8; }

/* ---------- Focus takeover (input touched → form goes full-screen) ---------- */
html.takeover-on, html.takeover-on body { overflow: hidden; }
.gf-pick.takeover, .gf-form-box.takeover {
  position: fixed; inset: 0; z-index: 3000; will-change: transform; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-radius: 0; border: 0; box-shadow: none; padding: 64px 20px 40px; max-width: none; background: #fff;
}
.gf-pick.takeover > h3 { font-size: 24px; padding-right: 48px; }
.gf-pick.takeover .gf-chips { margin-top: 4px; }
.gf-pick.takeover .cf-step { margin-top: 16px; animation: none; }
.takeover .takeover-close { position: fixed; top: 14px; right: 14px; z-index: 3001; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #e2e8f0; background: #fff; color: #2C3E50; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(44,62,80,.15); }
html.takeover-on .gf-sticky { display: none !important; }
@media (min-width: 901px) {
  .gf-pick.takeover, .gf-form-box.takeover { inset: 0; padding: 80px 0 40px; }
  .gf-pick.takeover > *:not(.takeover-close), .gf-form-box.takeover > *:not(.takeover-close) { max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* Mobile hero: the picker/form is the point, get it on screen */
@media (max-width: 900px) {
  .gf-hero .wrap > div:first-child .gf-btn, .gf-hero .wrap > div:first-child .gf-hint { display: none; }
  .gf-hero .wrap > div:first-child { padding-top: 8px; }
  .gf-hero .wrap { gap: 22px; }
  .gf-hero h1 { font-size: 36px; margin-bottom: 14px; }
  .gf-hero p { margin-bottom: 0; }
}
/* Hub: logo strip spans below both columns */
.gf-hero .wrap > .hero-strip { grid-column: 1 / -1; }

/* Check button + grade card */
.gf-check-btn { display: block; width: 100%; margin-top: 16px; background: #FFC107; color: #2C3E50; border: 0; border-radius: 999px; padding: 15px; font-size: 17px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(255,193,7,.35); }
.gf-check-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.gf-verdict { display: none; }
.gf-verdict.show { display: block; }
.gf-verdict .grade { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #00897B; background: #fff; border: 1px solid #b2e5dc; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; }
.gf-verdict.bad .grade { color: #B7791F; border-color: #FFE082; }
.gf-verdict b { font-size: 22px; }
.gf-verdict p { font-size: 16px; }
.cf-step h3 { font-size: 30px; }

/* After Check: chips shrink to the ones you picked (your progress, kept in view); result + audit form take the screen */
.gf-chip { transition: font-size .25s, padding .25s; }
.gf-pick.graded > h3, .gf-pick.graded > .sub, .gf-pick.graded .gf-picked { display: none; }
.gf-pick.graded .gf-chips { gap: 6px; }
.gf-pick.graded .gf-chip:not(.on) { display: none; }
.gf-pick.graded .gf-chip { font-size: 13px; padding: 6px 12px; border-width: 1px; }
.gf-pick.graded .gf-chip .brand { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; }
.gf-pick.graded .gf-check-btn { display: block; width: 100%; max-width: 560px; text-align: left; margin: 8px auto 0; background: none; box-shadow: none; color: #00897B; font-size: 13px; font-weight: 700; padding: 0; text-decoration: underline; }
.gf-pick.graded .gf-verdict { margin-top: 12px; padding: 14px 16px; }
.gf-pick.graded .gf-verdict b { font-size: 24px; line-height: 1.15; }
.gf-pick.graded .gf-verdict p { font-size: 15px; margin-top: 4px; }
.gf-pick.graded .cf-step { margin-top: 14px; padding: 20px 18px; }
.gf-pick.graded .cf-step .sub { display: none; }
.gf-pick.graded .cf-step h3 { font-size: 26px; margin-bottom: 6px; }
.gf-pick.graded .cf-step .type { margin-bottom: 6px; }
.gf-pick.takeover.graded { padding-top: 56px; }
.gf-picked { display: none; }

/* ---------- Hub (pure hub: 4 spokes) ---------- */
.hub-hero { background: #fff; padding: 72px 0 40px; text-align: center; }
.hub-hero .wrap { max-width: 820px; }
.hub-hero h1 { font-size: 60px; margin-bottom: 20px; text-wrap: balance; }
.hub-hero p { max-width: 680px; margin: 0 auto 26px; }
.hub-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hub-jump a { background: #E6F7F4; color: #00897B; font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 999px; text-decoration: none; }
.hub-jump a:hover { background: #00897B; color: #fff; }
.hub-hero .brand-strip { justify-content: center; margin-top: 34px; }
.hub-hero .brand-strip .lead { text-align: center; }

.hub-spoke { padding: 88px 0; scroll-margin-top: 20px; }
.hub-spoke.tint { background: #F7FAFB; }
.hub-spoke .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.hub-spoke:nth-of-type(odd) .peek { order: 2; }
.hub-spoke h2 { font-size: 44px; margin-bottom: 16px; text-wrap: balance; }
.hub-spoke .big { font-size: 20px; color: #2C3E50; margin-bottom: 18px; }
.hub-spoke ul { margin: 0 0 26px; padding: 0; list-style: none; }
.hub-spoke li { font-size: 17px; color: #4A5568; padding-left: 26px; position: relative; margin: 8px 0; }
.hub-spoke li::before { content: "✓"; position: absolute; left: 0; color: #00897B; font-weight: 800; }
.hub-spoke .stat { display: flex; gap: 16px; align-items: center; margin: 6px 0 18px; font-size: 16px; color: #4A5568; }
.hub-spoke .stat .n { font-size: 56px; font-weight: 800; color: #00897B; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.hub-spoke .stat .n small { font-size: 26px; }
.hub-spoke .stat .n2 { display: block; font-size: 30px; font-weight: 800; color: #94a3b8; line-height: 1; }
.hub-spoke .stat.vs { gap: 28px; align-items: flex-end; }
.hub-spoke .stat.vs > span { display: block; max-width: 200px; font-size: 14px; }
.hub-spoke .stat.vs > span .n { display: block; }

.peek { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 24px; padding: 26px; text-decoration: none; color: #2C3E50;
  box-shadow: 0 24px 60px rgba(44,62,80,.12); transition: transform .2s, box-shadow .2s; position: relative; }
.peek:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(44,62,80,.18); text-decoration: none; }
.peek-head { font-size: 20px; font-weight: 800; margin-bottom: 14px; }
.gf-chips.static .gf-chip { cursor: default; pointer-events: none; font-size: 14px; padding: 9px 14px; }
.peek-grade { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: #E6F7F4; border: 1px solid #b2e5dc; }
.peek-grade.bad { background: #FFF8E1; border-color: #FFE082; }
.peek-grade .grade { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #00897B; background: #fff; border: 1px solid #b2e5dc; padding: 3px 9px; border-radius: 999px; margin-bottom: 6px; }
.peek-grade.bad .grade { color: #B7791F; border-color: #FFE082; }
.peek-grade b { display: block; font-size: 18px; }
.peek-cta { display: block; margin-top: 16px; color: #00897B; font-weight: 800; font-size: 16px; }
.peek.list ol { margin: 0; padding: 0; list-style: none; counter-reset: p; }
.peek.list li { counter-increment: p; display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #edf2f7; font-weight: 700; font-size: 15px; }
.peek.list li::before { content: counter(p); width: 28px; height: 28px; border-radius: 50%; background: #E6F7F4; color: #00897B; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
.peek.list .brand-strip { margin-top: 16px; gap: 10px 12px; }
.peek.list .brand-strip .b { width: 60px; font-size: 10px; }
.peek.list .brand-strip .badge { width: 40px; height: 40px; }
.peek.list .brand-strip .badge .brand { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .hub-hero { padding: 44px 0 24px; }
  .hub-hero h1 { font-size: 38px; }
  .hub-spoke { padding: 56px 0; }
  .hub-spoke .wrap { grid-template-columns: 1fr; gap: 28px; }
  .hub-spoke:nth-of-type(odd) .peek { order: 0; }
  .hub-spoke h2 { font-size: 30px; }
  .hub-spoke .stat .n { font-size: 44px; }
  .peek { padding: 20px; }
}
.gf-3 > a { display: block; text-decoration: none; color: inherit; border-radius: 20px; padding: 16px; transition: background .2s; }
.gf-3 > a:hover { background: #F7FAFB; text-decoration: none; }
.gf-3 > a h3, .gf-3 > a p { text-align: center; }
.hub-intro { padding: 64px 0; text-align: center; }
.hub-intro.tint { background: #F7FAFB; }
.hub-intro .wrap { max-width: 760px; }
.hub-intro h2 { font-size: 44px; margin-bottom: 16px; text-wrap: balance; }
@media (max-width: 900px) { .hub-intro { padding: 44px 0; } .hub-intro h2 { font-size: 30px; } }
.peek.list li { padding-left: 0; }
.peek.list li::before { position: static; }
#checks .brand-strip { justify-content: center; margin-top: 44px; }
#checks .brand-strip .lead { text-align: center; }
.hub-hero { padding-bottom: 28px; }

/* Every path → website visual */
.paths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; max-width: 960px; margin: 0 auto; }
.path { text-align: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 20px 12px; }
.path .badge { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; background: color-mix(in srgb, var(--bc) 12%, #fff); }
.path .badge .brand { width: 30px; height: 30px; }
.path b { display: block; font-size: 16px; color: #2C3E50; }
.path > span:last-child { font-size: 13px; color: #718096; }
.paths .arrows { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); height: 44px; }
.paths .arrows span { position: relative; }
.paths .arrows span::before { content: ""; position: absolute; left: 50%; top: 0; width: 3px; height: 30px; background: #b2e5dc; transform: translateX(-50%); border-radius: 2px; }
.paths .arrows span::after { content: ""; position: absolute; left: 50%; top: 26px; width: 12px; height: 12px; border-right: 3px solid #00897B; border-bottom: 3px solid #00897B; transform: translateX(-50%) rotate(45deg); }
.paths .dest { grid-column: 1 / -1; max-width: 560px; margin: 0 auto; background: #fff; border: 2px solid #00897B; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(44,62,80,.14); }
.paths .dest .bar { height: 34px; background: #F1F5F9; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.paths .dest .bar i { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e0; display: block; }
.paths .dest .bar em { margin-left: 10px; font-style: normal; font-size: 12px; color: #718096; background: #fff; border-radius: 6px; padding: 3px 10px; }
.paths .dest .body { padding: 22px 24px; text-align: center; }
.paths .dest b { display: block; font-size: 24px; color: #2C3E50; margin-bottom: 6px; }
.paths .dest p { font-size: 15px; margin-bottom: 12px; }
.paths .dest .tag { display: inline-block; background: #E6F7F4; color: #00897B; font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 999px; }
@media (max-width: 900px) {
  .paths { grid-template-columns: 1fr 1fr; gap: 12px; }
  .paths .arrows { grid-template-columns: 1fr; height: 40px; }
  .paths .arrows span:not(:first-child) { display: none; }
  .path { padding: 16px 10px; }
}
.paths { grid-template-columns: repeat(5, 1fr); max-width: 1080px; }
.paths .arrows { grid-template-columns: repeat(5, 1fr); }
.path .badge .plus { font-size: 30px; font-weight: 800; color: #00897B; }
@media (max-width: 900px) { .paths { grid-template-columns: 1fr 1fr; } .paths .path.more { grid-column: 1 / -1; } .paths .arrows { grid-template-columns: 1fr; } }

/* "What each path looks like" screenshot strip */
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1120px; margin: 0 auto; }
.shot-card { margin: 0; }
.shot-card .shot { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 44px rgba(44,62,80,.14); border: 1px solid #e2e8f0; }
.shot-card .bar { height: 26px; background: #F1F5F9; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; gap: 5px; padding: 0 10px; }
.shot-card .bar i { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e0; display: block; }
.shot-card img { display: block; width: 100%; height: auto; }
.shot-card .ph { aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #94a3b8; font-size: 13px; font-weight: 700; text-align: center; padding: 12px;
  background: repeating-linear-gradient(45deg, #fafcfd 0 12px, #f3f6f8 12px 24px); }
.shot-card .ph span .brand { width: 44px; height: 44px; opacity: .6; }
.shot-card figcaption { margin-top: 12px; font-size: 15px; color: #4A5568; line-height: 1.5; }
.shot-card figcaption .lbl { margin-bottom: 4px; }
@media (max-width: 900px) { .shots { grid-template-columns: 1fr 1fr; gap: 14px; } .shot-card figcaption { font-size: 14px; } }

/* Phone frames for real screenshots */
.phone { border-radius: 30px; border: 7px solid #1f2937; background: #1f2937; overflow: hidden; aspect-ratio: 9 / 19; box-shadow: 0 24px 60px rgba(44,62,80,.22); }
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot-card .shot.phone { border-radius: 30px; }
.shots { grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 980px; }
.paths .dest { border: 0; box-shadow: none; background: transparent; max-width: 320px; }
.paths .dest .dest-phone { width: 220px; margin: 0 auto; }
.paths .dest .body { padding: 16px 0 0; }
.paths .dest .body b { font-size: 22px; }
@media (max-width: 900px) {
  .shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px; padding: 6px 20px 12px; margin: 0 -24px; max-width: none; scrollbar-width: none; }
  .shots::-webkit-scrollbar { display: none; }
  .shot-card { flex: 0 0 68%; scroll-snap-align: center; }
  .paths .dest .dest-phone { width: 200px; }
}
/* Trust rows: portrait phone beside the text */
.gf-way-row .shot.phone { width: 250px; margin: 0 auto; border-radius: 30px; }
.gf-way-row .shot.phone .ph { aspect-ratio: 9 / 19; }
@media (max-width: 900px) { .gf-way-row .shot.phone { width: 210px; } }
.gf-way-row .shot.phone img { object-fit: contain; object-position: top; background: #fff; }

/* Mobile pass: tap targets ≥44px, readable captions, lighter phone frames */
.gf-link { display: inline-block; padding: 9px 0; }
.gf-ai li a, .peek.list li { min-height: 44px; }
.gf-ai li { padding: 12px 18px; }
.gf-big .s { font-size: 13px; }
@media (max-width: 900px) {
  .brand-strip .b { font-size: 12px; }
  .gf-fixbox .or a, .gf-fixbox a { display: inline-block; padding: 6px 0; }
}

/* Four things as a sub-nav: the link cards take the same styling as the original divs; .key = active page */
.gf-4 > .ft { position: relative; display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid #e2e8f0; border-top: 6px solid #00BFA5; border-radius: 20px;
  padding: 44px 24px 28px; box-shadow: 0 14px 30px -18px rgba(44,62,80,.35); transition: transform .2s, box-shadow .2s; }
.gf-4 > a.ft:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -18px rgba(44,62,80,.45); text-decoration: none; }
.gf-4 > .ft:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -30px; width: 24px; height: 24px; margin-top: -12px;
  background: no-repeat center/14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h9M7 3l4 4-4 4' fill='none' stroke='%2300897B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), #E6F7F4;
  border-radius: 50%; z-index: 1; }
.gf-4 > .key { background: #2C3E50; border-color: #2C3E50; border-top-color: #FFC107; box-shadow: 0 18px 36px -16px rgba(44,62,80,.6); }
.gf-4 > .key h3 { color: #fff; }
.gf-4 > .key p { color: rgba(255,255,255,.86); }
.gf-4 > .key em { color: #FFC107; font-style: italic; }
.gf-4 > .key .ic { background: #FFC107; color: #2C3E50; box-shadow: 0 8px 18px -6px rgba(255,193,7,.7); }
@media (max-width: 900px) { .gf-4 > .ft:not(:last-child)::after { display: none; } }
@media (max-width: 520px) { .gf-4 > .ft:not(:last-child)::after { display: block; top: auto; bottom: -36px; right: auto; left: 50%; margin: 0 0 0 -12px; transform: rotate(90deg); } }
.gf-4 > div.ft { cursor: default; }
.gf-4 > div.ft:hover { transform: none; }

/* Insites confirm step: the small "is this the right business?" button stays small; only the final submit is full-width */
.gf-pick .ib-form .confirm-details .submit-step-button, .gf-pick .ib-form button.confirm-details-button { display: inline-block; width: auto; padding: 10px 18px !important; font-size: 15px !important; margin: 0; }
.gf-pick .ib-form .confirm-details { display: none; }   /* Insites shows these with inline display:block only after a Maps pick; the manual 'not listed' flow keeps them hidden */
.gf-pick .ib-form .confirm-details[style*="block"] { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; }

/* Insites confirm step (after a business is picked): match our forms */
.gf-pick .ib-form .form-heading { display: none !important; }                        /* our panel already says what to do */
.gf-pick .ib-form #confirm-details-top[style*="block"] { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; background: #F7FAFB; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.gf-pick .ib-form .confirm-details-message { font-weight: 700; color: #2C3E50; font-size: 15px; }
.gf-pick .ib-form .confirm-details-button { display: inline-block !important; width: auto !important; padding: 9px 16px !important; font-size: 14px !important; margin: 0 !important; white-space: nowrap; }
.gf-pick .ib-form .ib-form-group { margin-bottom: 12px; }
.gf-pick .ib-form .ib-form-group label { font-size: 13px; font-weight: 700; color: #718096; margin-bottom: 4px; text-transform: none; }
.gf-pick .ib-form .fixed-field, .gf-pick .ib-form input.fixed-field, .gf-pick .ib-form input[readonly] {
  color: #2C3E50 !important; background: #F7FAFB !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important;
  padding: 12px 44px 12px 14px !important; font-size: 16px !important; font-family: inherit !important; }
/* The picked value is a <span class="fixed-field"> beside a 26%-wide inline label in Insites' CSS. Stack them instead. */
.gf-pick .ib-form label.fixed-field-label { display: block; width: auto !important; max-width: none; margin-bottom: 4px; }
.gf-pick .ib-form span.fixed-field { display: block; position: relative; width: 100%; margin: 0 !important; box-sizing: border-box; line-height: 1.3; }
.gf-pick .ib-form .edit-field-button { float: none !important; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #00897B; }
.gf-pick .ib-form .edit-field-button svg { display: block; width: 18px; height: 18px; }
.gf-pick .ib-form .fa-pencil-alt, .gf-pick .ib-form .fa-pencil, .gf-pick .ib-form .fa-edit, .gf-pick .ib-form [class*="edit-icon"], .gf-pick .ib-form [class*="edit-field"] { color: #00897B !important; }
.gf-pick .ib-form #confirm-details-bottom[style*="block"] { display: flex !important; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.gf-pick .ib-form #confirm-details-bottom .confirm-details-button { padding: 14px 22px !important; font-size: 16px !important; }
.gf-pick .ib-form #confirm-details-bottom .return-to-search-button { margin: 0; }