/* Guide figures: one diagram per guide page, plus the small thumbnails on guides.html.
   Line style matches the services.html illustrations; fill-in cards use the paper-sheet style.
   "Compact" layouts kick in on phones (<=760px) and in the two-column guide layout between
   851px and 1100px, where the guide body column is narrower than ~730px. */

.gfig{margin:38px 0 46px;padding:0;min-width:0}
.gfig *,.gidx *{box-sizing:border-box}
.gf-panel{border:1px solid var(--line);border-radius:6px;background:radial-gradient(ellipse at 50% 120%,#15253a 0,transparent 70%),#0e1826;padding:28px 26px 26px}
.page-growth .gfig figcaption{margin-top:14px;font-size:13px;line-height:1.6;color:var(--muted);max-width:64ch}
.page-growth .gfig ul,.page-growth .gfig ol{list-style:none;margin:0;padding:0}
.page-growth .gfig li{font-size:inherit;line-height:inherit;color:inherit}
.gfig svg,.gidx-thumb svg{display:block;overflow:visible}
.gfig b{font-weight:500;color:var(--ink)}

/* svg art palette (same values as services.html) */
.gfig .a-line,.gidx-thumb .a-line{stroke:rgba(243,242,238,.8);fill:none;stroke-width:1.6}
.gfig .a-dim,.gidx-thumb .a-dim{stroke:rgba(153,167,184,.55);fill:none;stroke-width:1.4}
.gfig .a-az,.gidx-thumb .a-az{stroke:#91c2ed;fill:none;stroke-width:1.8}
.gfig .a-amb,.gidx-thumb .a-amb{stroke:#e8b56a;fill:none;stroke-width:1.8}
.gfig .f-ink,.gidx-thumb .f-ink{fill:rgba(243,242,238,.55)}
.gfig .f-dim,.gidx-thumb .f-dim{fill:rgba(153,167,184,.35)}
.gfig .f-az,.gidx-thumb .f-az{fill:#91c2ed}
.gfig .f-amb,.gidx-thumb .f-amb{fill:#e8b56a}
.gfig .f-panel,.gidx-thumb .f-panel{fill:#132132}
.gfig svg path,.gidx-thumb svg path{stroke-linecap:round;stroke-linejoin:round}

/* ---------- missed-calls.html: one-call trace card (paper sheet) ---------- */
.gfig.gf-trace{margin:34px 0 46px}
.gf-trace figcaption{padding-top:12px}
.trace{margin:0 12px 0 0;border:1px solid #aebdcb;background:#e8edf0;color:#172d40;padding:24px 26px 20px;box-shadow:12px 12px 0 -1px #15263a,12px 12px 0 0 #34495f}
.trace-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;font-weight:600;color:#172d40;border-bottom:1px solid #b9c6cf;padding-bottom:14px}
.trace-top span+span{font-weight:400;color:#516478}
.page-growth .trace-setup{margin:16px 0 4px;font-size:15px;color:#172d40;line-height:1.5}
.trace-steps{list-style:none;counter-reset:t;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.trace-steps li{counter-increment:t;position:relative;padding:44px 12px 4px 0;color:#172d40!important;font-size:13px!important;line-height:1.45!important}
.trace-steps li:before{content:counter(t);position:absolute;top:12px;left:0;width:22px;height:22px;border-radius:50%;background:#172d40;color:#e8edf0;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;z-index:1}
.trace-steps li:after{content:"";position:absolute;top:23px;left:22px;right:0;border-top:1px dashed #8fa3b4}
.trace-steps li:last-child:after{display:none}
.trace-steps b{display:block;font-weight:600;min-height:38px;color:#172d40}
.trace-steps .line{display:block;margin-top:10px;border-bottom:1px solid #8fa3b4;height:26px;font-size:12px;color:#536f83;line-height:26px}
.trace-foot{margin-top:18px;border-top:1px solid #b9c6cf;padding-top:13px;font-size:12.5px;color:#486278}
@media(max-width:760px),(min-width:851px) and (max-width:1100px){.trace-steps{grid-template-columns:1fr}.trace-steps li{padding:14px 0 6px 38px}.trace-steps li:before{top:14px}.trace-steps li:after{top:36px;left:11px;right:auto;bottom:-14px;border-top:0;border-left:1px dashed #8fa3b4}.trace-steps b{min-height:0}}
@media(max-width:760px){.trace{padding:20px 18px 18px}}

/* ---------- website-inquiries.html: one inquiry's path, five checkpoints ---------- */
.gf-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));counter-reset:gs}
.page-growth .gf-steps li{position:relative;display:flex;flex-direction:column;counter-increment:gs;padding:0 16px 0 0;font-size:13px;line-height:1.5;color:var(--sub)}
.gf-steps .gf-ico{order:-1;width:56px;height:40px;margin:0 0 14px -2px}
.gf-steps li:before{content:counter(gs);display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;border:1.6px solid #91c2ed;color:#91c2ed;font-size:12px;font-weight:600;line-height:1;background:#0e1826;position:relative;z-index:1;margin-bottom:14px}
.gf-steps li:after{content:"";position:absolute;left:26px;right:0;top:66px;border-top:1.8px solid #91c2ed}
.gf-steps li:last-child:after{display:none}
.gf-steps b{display:block;font-size:14px;line-height:1.4;margin-bottom:6px}
@media(max-width:760px),(min-width:851px) and (max-width:1100px){
  .gf-steps{grid-template-columns:1fr}
  .page-growth .gf-steps li{display:block;padding:2px 0 24px 44px}
  .page-growth .gf-steps li:last-child{padding-bottom:0}
  .gf-steps li:before{position:absolute;left:0;top:0;margin:0}
  .gf-steps li:after{left:12.1px;top:26px;bottom:0;right:auto;border-top:0;border-left:1.8px solid #91c2ed}
  .gf-steps .gf-ico{display:none}
}

/* ---------- website-not-getting-calls.html: phone with five checks ---------- */
.gf-phone .gf-panel{padding:24px 18px 20px}
.gf-phone svg{width:100%;height:auto}
.gf-phone .narrow{display:none;max-width:400px;margin:0 auto}
.gf-phone .lb{font:500 15px Inter,system-ui,Arial,sans-serif;fill:#f3f2ee}
.gf-phone .sb{font:400 14px Inter,system-ui,Arial,sans-serif;fill:#b5c0ce}
.gf-phone .narrow .lb{font-size:14.5px}
.gf-phone .narrow .sb{font-size:13.5px}
@media(max-width:760px),(min-width:851px) and (max-width:1100px){
  .gf-phone .wide{display:none}
  .gf-phone .narrow{display:block}
}
@media(max-width:760px){.gf-phone .gf-panel{padding:20px 12px 18px}}

/* ---------- patch-rebuild-or-leave.html: decision tree ---------- */
.gf-root{position:relative;max-width:460px;margin:0 auto;border:1.6px solid rgba(243,242,238,.8);border-radius:6px;padding:15px 20px 16px;background:#132132;text-align:center}
.gf-k{display:block;font-size:12px;color:var(--azure);margin-bottom:4px;line-height:1.4}
.gf-root b{display:block;font-size:15px;line-height:1.45}
.gf-root .gf-sub{display:block;font-size:13px;color:var(--sub);margin-top:6px;line-height:1.55}
.gf-root:after{content:"";position:absolute;left:50%;top:100%;height:26px;border-left:1.4px solid rgba(153,167,184,.55)}
.page-growth .gfig .gf-outs{--g:14px;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin-top:52px}
.gf-outs:before{content:"";position:absolute;top:-26px;left:calc((100% - 2*var(--g))/6);right:calc((100% - 2*var(--g))/6);border-top:1.4px solid rgba(153,167,184,.55)}
.page-growth .gf-outs>li{position:relative;border:1px solid var(--line-2);border-radius:6px;padding:15px 16px 14px;font-size:13px;line-height:1.5;color:var(--sub)}
.gf-outs>li:before{content:"";position:absolute;left:50%;top:-27px;height:26px;border-left:1.4px solid rgba(153,167,184,.55)}
.gf-outs>li>b{display:block;font-size:16px;line-height:1.35;color:#91c2ed;margin-bottom:4px}
.gf-outs .gf-when{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.page-growth .gf-outs li li{position:relative;padding:5px 0 5px 14px;border-top:1px solid var(--line)}
.gf-outs li li:before{content:"";position:absolute;left:0;top:14px;width:6px;border-top:1.4px solid rgba(153,167,184,.8)}
.gf-caution{margin-top:18px;border:1.5px dashed #e8b56a;border-radius:6px;padding:11px 16px 12px;font-size:13px;line-height:1.55;color:var(--sub)}
.gf-caution b{color:#e8b56a;font-weight:500}
@media(max-width:760px),(min-width:851px) and (max-width:1100px){
  .gf-root{margin:0;text-align:left;max-width:none}
  .gf-root:after{left:17px;height:20px}
  .page-growth .gfig .gf-outs{grid-template-columns:1fr;margin-top:0;padding:20px 0 0 40px}
  .gf-outs:before{display:none}
  .gf-outs>li:before{left:-23.5px;top:-14px;bottom:-1px;height:auto}
  .gf-outs>li:first-child:before{top:-20px}
  .gf-outs>li:last-child:before{bottom:auto;height:39px}
  .gf-outs>li:after{content:"";position:absolute;left:-23.5px;top:24px;width:22px;border-top:1.4px solid rgba(153,167,184,.55)}
}
@media(max-width:760px){.gf-tree .gf-panel{padding:20px 16px 18px}}

/* ---------- tools-that-dont-talk.html: one job through the tools ---------- */
.gf-flow{display:grid;grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr) 62px minmax(0,1fr) 62px minmax(0,1fr) 62px minmax(0,1fr);align-items:start}
.gf-node{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:13px;line-height:1.35;color:var(--ink)}
.gf-node svg{width:60px;height:46px;margin-bottom:10px;flex:none}
.gf-hop{display:flex;flex-direction:column;align-items:center;text-align:center}
.gf-hop svg{width:62px;height:46px;margin-bottom:10px;flex:none}
.gf-hop .vt{display:none}
.gf-hop span{font-size:12px;line-height:1.3;color:#e8b56a}
.gf-hop.is-in span{color:#91c2ed}
.gf-then{display:flex;align-items:flex-start;gap:10px;margin:26px 0 12px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--sub)}
.gf-then:before{content:"";flex:none;width:8px;height:8px;margin-top:6.5px;border-radius:50%;background:#e8b56a}
.gf-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.page-growth .gf-four li{border-top:1.8px solid #91c2ed;padding-top:10px;font-size:13px;line-height:1.5;color:var(--sub)}
.gf-four b{display:block;font-size:15px;margin-bottom:3px}
@media(max-width:760px),(min-width:851px) and (max-width:1100px){
  .gf-flow{grid-template-columns:1fr;max-width:420px}
  .gf-node{flex-direction:row;text-align:left;gap:14px;font-size:14px}
  .gf-node svg{width:52px;height:40px;margin:0}
  .gf-hop{flex-direction:row;text-align:left;gap:14px}
  .gf-hop svg{margin:0}
  .gf-hop .hz{display:none}
  .gf-hop .vt{display:block;width:52px;height:38px}
  .gf-four{grid-template-columns:1fr 1fr;gap:16px 14px}
}
@media(max-width:760px){.gf-tools .gf-panel{padding:22px 16px 20px}}

/* ---------- run-without-you-five-days.html: the week's list, sorted into three piles ---------- */
.gf-piles .gf-panel{display:grid;grid-template-columns:282px 64px minmax(0,1fr);align-items:center;padding:28px 26px 30px}
.gf-sheet{background:#e8edf0;color:#172d40;border:1px solid #aebdcb;box-shadow:12px 12px 0 -1px #15263a,12px 12px 0 0 #34495f;padding:15px 15px 12px;margin-bottom:12px}
.gf-sheet-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:600;line-height:1.4;border-bottom:1px solid #b9c6cf;padding-bottom:10px}
.gf-sheet-top span+span{font-weight:400;color:#516478}
.gf-sheet-head,.gf-sheet-row{display:grid;grid-template-columns:minmax(0,1fr) 62px 52px 12px;gap:8px;align-items:center}
.gf-sheet-head{font-size:11.5px;line-height:1.3;color:#486278;padding:9px 0 6px}
.gf-sheet-row{height:24px;border-bottom:1px solid #b9c6cf}
.gf-sheet-row i{display:block;height:4px;border-radius:2px;background:rgba(23,45,64,.2)}
.gf-sheet-row svg{width:10px;height:10px}
.gf-piles .gf-fan{width:64px;height:100%;align-self:stretch}
.gf-piles .gf-fan-v{display:none}
.gf-pilelist{display:grid;grid-auto-rows:1fr}
.page-growth .gf-pilelist li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:center;padding:10px 0;font-size:13px;line-height:1.5;color:var(--sub)}
.gf-pilelist svg{width:46px;height:38px}
.gf-pilelist b{display:block;font-size:14.5px;line-height:1.4;margin-bottom:2px}
@media(max-width:760px),(min-width:851px) and (max-width:1100px){
  .gf-piles .gf-panel{grid-template-columns:1fr;align-items:start}
  .gf-sheet{max-width:360px;margin-right:12px;width:calc(100% - 12px)}
  .gf-piles .gf-fan{display:none}
  .gf-piles .gf-fan-v{display:block;width:80px;height:40px;margin:18px 0 2px 24px}
}
@media(max-width:760px){.gf-piles .gf-panel{padding:22px 16px 20px}}

/* ---------- guides.html: index rows with thumbnails ---------- */
.gidx{display:grid;grid-template-columns:120px minmax(0,1fr);gap:28px;align-items:start;margin-top:46px}
.guide-body .gidx h2{margin-top:0}
.gidx p{margin-bottom:0}
.gidx-thumb{width:120px;height:80px;margin-top:2px;border:1px solid var(--line);border-radius:6px;background:radial-gradient(ellipse at 50% 120%,#15253a 0,transparent 70%),#0e1826;overflow:hidden}
.gidx-thumb svg{width:100%;height:100%}
.gidx+.guide-note{margin-top:52px}
@media(max-width:600px){
  .gidx{grid-template-columns:84px minmax(0,1fr);gap:16px;margin-top:38px}
  .gidx-thumb{width:84px;height:56px;margin-top:4px}
  .guide-body .gidx h2{font-size:23px}
}
