/* ==========================================================================
   pillars.css — the four-pillar feature block: shared copy + graphics, and
   three layouts (rows, walk, bento). Loads after home.css.
   ========================================================================== */

/* ---------- copy: headline, lead, a quiet feature list, then the customer's words as the row's proof ---------- */
.pillar-copy h3 { font: 500 clamp(26px, 3vw, 36px)/1.12 var(--font-serif); letter-spacing: -.015em; text-wrap: balance; color: var(--ink); }
.pillar-copy > p { margin-top: 14px; max-width: 46ch; font: 400 16.5px/1.6 var(--font-body); color: var(--v2-body); }
.pillar-features { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 16px 0 0; font: 500 13.5px/1.5 var(--font-display); color: var(--v2-body); }
.pillar-features li + li::before { content: "·"; margin: 0 10px; color: #b3b8cc; }
.pillar-copy .quote { display: grid; grid-template-columns: 56px 1fr; gap: 18px; margin-top: 32px; padding: 0; border: 0; }
.pillar-copy .quote img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; clip-path: none; box-shadow: 0 0 0 3px #fff, 0 8px 20px -10px rgba(15, 13, 25, .35); }
.pillar-copy .quote blockquote { margin: 0; }
.pillar-copy .quote blockquote p { font: 400 18px/1.5 var(--font-serif); font-style: italic; color: var(--ink); text-wrap: pretty; }
.pillar-copy .quote blockquote p strong { font-weight: 600; }
.pillar-copy .quote footer { margin-top: 12px; font: 400 13.5px/1.4 var(--font-body); color: var(--v2-body); }
.pillar-copy .quote footer b { display: block; font: 600 14px/1.4 var(--font-display); color: var(--ink); text-transform: none; }
.pillar-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font: 600 15px/1.4 var(--font-display); color: var(--ink); }
.pillar-link .icon { width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.pillar-link:hover { color: var(--blue); }
.pillar-link:hover .icon { transform: translateX(3px); }

/* ---------- graphic shell ---------- */
.pillar-graphic { position: relative; }
.g { position: relative; display: grid; gap: 14px; }
.g-card { padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 13, 25, .05), 0 30px 60px -36px rgba(15, 13, 25, .35); font: 500 12.5px/1.35 var(--font-display); color: var(--ink); }
.g-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; font: 600 12.5px/1.3 var(--font-display); }
.g-h > span { padding: 3px 8px; border-radius: 6px; background: var(--ghost); font: 500 11px/1.3 var(--font-display); color: var(--v2-body); }
.g .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 11px/1 var(--font-display); font-style: normal; background: linear-gradient(135deg, var(--a, #9bb5ff), var(--b, var(--blue))); }
.g .av.gg { background: #fff; box-shadow: 0 0 0 1px var(--v2-line); }
.g .av .icon { width: 17px; height: 17px; }
/* steps are visible by default; only a running graphic hides what has not happened yet */
.g.is-running [data-step]:not(.is-on) { opacity: 0; transform: translateY(6px); }
.g [data-step] { transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }

/* ---------- reviews: composer + phone ---------- */
.g--reviews { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; }
.g > * { min-width: 0; }
.g-steps { display: grid; grid-template-columns: 1fr; gap: 6px; }
.g-steps li > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.g-steps li { display: flex; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--v2-line); font-size: 11.5px; transition: border-color .3s, background-color .3s; }
.g-steps li b { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ghost); color: var(--blue); font-size: 10px; transition: background-color .3s, color .3s; }
.g-steps li small { display: inline; font: 400 10.5px/1.3 var(--font-body); color: var(--v2-body); }
.g-steps li.is-on { border-color: var(--blue); background: var(--ghost); }
.g-steps li.is-on b { background: var(--blue); color: #fff; }
.g-msg { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--v2-card); }
.g-label { display: block; margin-bottom: 6px; font: 500 10.5px/1.3 var(--font-display); color: var(--v2-body); }
.g-msg p { min-height: 3.9em; font: 400 12px/1.5 var(--font-body); color: var(--ink); }
.g-toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; }
.g-toggle i { position: relative; width: 28px; height: 16px; border-radius: 999px; background: #d7dae6; transition: background-color .3s; }
.g-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .3s var(--ease-out); }
.g-toggle i.is-on { background: var(--blue); }
.g-toggle i.is-on::after { left: 14px; }
.g-toggle em { padding: 2px 6px; border-radius: 5px; background: #ddf7ea; color: #0c7a52; font: 600 10px/1.3 var(--font-display); font-style: normal; }
.g-phone { padding: 12px; text-align: center; }
.g-video { position: relative; aspect-ratio: 4 / 3; margin-bottom: 12px; border-radius: 12px; background: linear-gradient(160deg, #e9edff, #fbe3ec); display: grid; place-items: center; }
.g-play { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.g-play .icon { width: 14px; height: 14px; margin-left: 2px; }
.g-video b { position: absolute; left: 10px; bottom: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(15, 13, 25, .7); color: #fff; font-size: 10.5px; }
.g-phone-title { margin-bottom: 8px; font: 600 13px/1.3 var(--font-display); }
.g-dests { display: grid; grid-template-columns: 1fr; gap: 6px; }
.g-dests span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 999px; background: var(--v2-card); font-size: 11.5px; }
.g-dests i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 9px/1 var(--font-display); font-style: normal; }
/* 16px is too small for a disc inside a disc: the official mark fills the slot on its own. */
.g-dests .gg, .g-dests .fb { background: none; }
.g-dests i .icon { width: 16px; height: 16px; }
.g-alt { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--v2-body); }
.g-alt .icon { width: 14px; height: 14px; color: var(--blue); }
.g-sent { margin-top: 10px; font: 600 10.5px/1.3 var(--font-display); color: #0c7a52; }

/* ---------- leads: webchat thread + lead card ---------- */
.g--leads { grid-template-columns: 1fr; }
.g-thread { display: grid; gap: 8px; }
.g-thread li { max-width: 82%; padding: 9px 12px; border-radius: 14px; font: 400 12px/1.45 var(--font-body); }
.g-thread .them { background: var(--v2-card); border-bottom-left-radius: 4px; }
.g-thread .ai { margin-left: auto; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.g-h .g-on { background: #ddf7ea; color: #0c7a52; }
.g-typing { display: flex; gap: 4px; align-items: center; height: 14px; margin-top: 8px; opacity: 0; transition: opacity .2s; }
.g-typing.is-on { opacity: 1; }
.g-typing i { width: 6px; height: 6px; border-radius: 50%; background: #b8bdd0; animation: gdot 1s infinite; }
.g-typing i:nth-child(2) { animation-delay: .15s; }
.g-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes gdot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.g-lead { display: flex; gap: 12px; align-items: center; width: 80%; margin-left: auto; background: var(--ink); color: #fff; }
.g-lead i { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--blue); display: grid; place-items: center; font-style: normal; }
.g-lead small { display: block; margin-top: 2px; font: 400 11px/1.3 var(--font-body); color: rgba(255, 255, 255, .78); }

/* ---------- competitors: bars, share of voice, gap ---------- */
.g-bars { display: grid; gap: 10px; }
.g-bars li { display: grid; grid-template-columns: 150px 1fr 64px; gap: 10px; align-items: center; font-size: 11.5px; }
.g-bars .bar { height: 10px; border-radius: 6px; background: #eef0f6; overflow: hidden; }
.g-bars .bar i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: #c6cbda; transform-origin: left; transition: transform .9s var(--ease-out); }
.g-bars .you .bar i { background: var(--blue); }
.g-bars .you span { font-weight: 600; }
.g-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.g-bars em { margin-left: 4px; padding: 1px 5px; border-radius: 4px; background: var(--ghost); color: var(--blue); font: 600 9.5px/1.4 var(--font-display); font-style: normal; }
.g.is-running .g-bars .bar i, .g.is-running .g-sov-bar i { transform: scaleX(0); }
.g.is-running.is-grown .g-bars .bar i, .g.is-running.is-grown .g-sov-bar i { transform: none; }
.g-sov { margin-top: 14px; font: 500 11px/1.3 var(--font-display); color: var(--v2-body); }
.g-sov-bar { display: flex; gap: 3px; height: 18px; margin-top: 6px; }
.g-sov-bar i { position: relative; width: var(--w); border-radius: 5px; background: #dfe3ef; transform-origin: left; transition: transform .9s var(--ease-out); }
.g-sov-bar .you { background: var(--blue); }
.g-sov-bar b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 600 10px/1 var(--font-display); }
.g-gap { position: relative; height: 36px; margin-top: 12px; }
.g-gap span { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fff6e5; color: #8a5a00; font: 500 11px/1.3 var(--font-display); opacity: 0; transition: opacity .4s; }
.g-gap span.is-on { opacity: 1; }
.g-gap .icon { width: 14px; height: 14px; flex: none; }

/* ---------- team: leaderboard + review toast ---------- */
.g-rows { display: grid; gap: 8px; }
.g-rows li { display: grid; grid-template-columns: 30px 1fr 50px 74px 48px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--v2-card); font-size: 11.5px; }
.g-rows li:first-child { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); }
.g-rows small { display: block; font: 400 10.5px/1.3 var(--font-body); color: var(--v2-body); }
.g-rows b { font-weight: 600; font-variant-numeric: tabular-nums; }
.g-rows .up { text-align: right; color: #0c7a52; font-weight: 600; }
.g-top { display: flex; align-items: center; gap: 6px; }
.g-top .icon { width: 16px; height: 16px; color: #e8a100; }
.g-h .g-growth { background: #ddf7ea; color: #0c7a52; }
.g-toast { display: flex; gap: 10px; align-items: center; width: 72%; margin-left: auto; }
.g-toast small { display: block; font: 400 11px/1.3 var(--font-body); color: var(--v2-body); }

/* ---------- layout: six rows loose on one field ---------- */
.pillars-field { position: relative; padding: clamp(72px, 8vw, 120px) 0; overflow: hidden; }
/* the section field is the hero shader in wide mode: same colours, grain and pointer response, at a third of the opacity */
.pillars-field .blob--section { position: absolute; left: -6%; right: -6%; top: -4%; bottom: -4%; z-index: 0; pointer-events: none; }
.pillars-field .blob--section .blob-canvas.is-loaded { opacity: .18; }
.pillars-field > .col { position: relative; z-index: 1; }
.pillars-field .head { margin-bottom: clamp(24px, 4vw, 48px); }
.pillar-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(44px, 5.5vw, 80px) 0; }
.pillar-row:nth-child(even) > :first-child { order: 2; }
.pillar-row .pillar-graphic { max-width: 520px; justify-self: center; width: 100%; }
/* loose placement: each graphic sits a little differently, like things left on a desk rather than a grid */
.pillar-row:nth-child(1) .pillar-graphic { transform: rotate(-1.2deg) translateY(-6px); }
.pillar-row:nth-child(2) .pillar-graphic { transform: rotate(1deg) translate(12px, 8px); max-width: 480px; }
.pillar-row:nth-child(3) .pillar-graphic { transform: rotate(-.8deg) translateX(-10px); max-width: 540px; }
.pillar-row:nth-child(4) .pillar-graphic { transform: rotate(1.4deg) translateY(6px); }
.pillar-row:nth-child(5) .pillar-graphic { transform: rotate(-1deg) translate(8px, -4px); max-width: 540px; }
.pillar-row:nth-child(6) .pillar-graphic { transform: rotate(.9deg) translateX(-6px); max-width: 480px; }

/* ---------- breakpoints ---------- */
@media (max-width: 991px) {
  .pillar-row { grid-template-columns: 1fr; }
  .pillar-row:nth-child(even) > :first-child { order: 0; }
  .pillar-row .pillar-graphic { transform: none !important; max-width: none; }
  .g--reviews { grid-template-columns: 1fr; }
  .g-bars li { grid-template-columns: 110px 1fr 56px; }
}
@media (max-width: 479px) {
  .g-rows li { grid-template-columns: 30px 1fr 60px; }
  .g-rows li > span:nth-child(3), .g-rows li > .up { display: none; }
  .g-steps { grid-template-columns: 1fr; }
}

/* ---------- listings: one record, three directories ---------- */
.g--listings { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
.g-fields { display: grid; gap: 8px; }
.g-fields div { padding: 8px 10px; border-radius: 10px; background: var(--v2-card); }
.g-fields small { display: block; font: 500 10.5px/1.3 var(--font-display); color: var(--v2-body); }
.g-fields b { display: block; margin-top: 2px; font-weight: 600; }
.g-edit { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: #fff6e5; color: #8a5a00; font: 500 11px/1.3 var(--font-display); }
.g-edit .icon { width: 14px; height: 14px; flex: none; }
.g-dirs ul { display: grid; gap: 8px; }
.g-dirs li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--v2-card); font-size: 11.5px; }
.g-dirs i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; font: 700 11px/1 var(--font-display); font-style: normal; }
/* one white tile per source, hairline, official mark inside — the shape stays identical down the list */
.g-dirs .gg, .g-dirs .fb, .g-dirs .yp, .g-dirs .ta { background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line); }
.g-dirs i .icon { width: 15px; height: 15px; }
.g-state { padding: 3px 8px; border-radius: 6px; background: #ddf7ea; color: #0c7a52; font: 600 10px/1.3 var(--font-display); font-style: normal; transition: background-color .3s, color .3s; }
.g-state.is-syncing { background: #fff6e5; color: #8a5a00; }
.g-roll { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--ghost); color: var(--blue); font: 500 11px/1.3 var(--font-display); }
.g-roll b { font-weight: 700; }

/* ---------- insights: Ask + AI visibility ---------- */
.g--insights { grid-template-columns: 1fr; }
.g-q { padding: 10px 12px; border-radius: 12px; background: var(--ink); color: #fff; font: 500 12px/1.4 var(--font-display); }
.g-a { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--v2-card); font: 400 12px/1.5 var(--font-body); color: var(--ink); }
.g-a b { font-weight: 700; color: var(--blue); }
.g-themes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.g-themes li { padding: 5px 9px; border-radius: 999px; background: var(--ghost); font: 500 11px/1.3 var(--font-display); }
.g-themes li b { font-weight: 700; }
.g-themes .down b { color: #0c7a52; } .g-themes .up b { color: var(--blue); }
.g-aiv ul { display: grid; gap: 6px; }
.g-aiv li { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--v2-card); font-size: 11.5px; }
.g-aiv b { font: 600 10.5px/1.3 var(--font-display); padding: 3px 8px; border-radius: 6px; }
.g-aiv .yes { background: #ddf7ea; color: #0c7a52; } .g-aiv .no { background: #f1f2f7; color: #6b7088; }

/* the phone in the reviews graphic shows the real review page (2026-09-05): the business name, then the heading */
.g-phone-brand { margin-bottom: 4px; font: 700 12px/1.3 var(--font-display); color: var(--ink); }