/* Shared layout patterns used by homepage + inner pages */
.stats-band { border-block: 1px solid var(--line); padding: 32px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
@media (max-width: 860px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }
.problem .lede { margin-bottom: 24px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.svc-card { text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; }
.svc-card:hover { transform: translateY(-2px); border-color: var(--gold); }
.svc-card h3 a { color: inherit; text-decoration: none; }
.svc-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.svc-card .feat-cta { display: inline-block; margin-top: 2px; }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } }
.process-list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.process-list li { border-top: 2px solid var(--gold); padding-top: 16px; }
.process-list h3 { margin: 8px 0; }
@media (max-width: 1000px) { .process-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .process-list { grid-template-columns: 1fr; } }
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 40px 0; }
.feat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 24px; }
.feat-card img { border-radius: var(--r-sm); margin-bottom: 14px; }
.feat-card p { font-size: 15px; margin: 8px 0 10px; }
.feat-cta { font-weight: 700; font-size: 14px; color: var(--orange-ink); text-decoration: none; }
.feat-cta:hover { box-shadow: inset 0 -2px 0 0 var(--orange); }
@media (max-width: 1000px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .feat-grid { grid-template-columns: 1fr; } }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.why-card { background: var(--green-2); border-color: rgba(250,250,248,.12); }
.why-card h3 { font-size: 18px; }
.why-card p { font-size: 15px; }
@media (max-width: 1000px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } }
.leadmagnet-box { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  background: var(--cream); border-radius: var(--r-lg); padding: 48px; }
@media (max-width: 860px) { .leadmagnet-box { grid-template-columns: 1fr; padding: 32px; } }
.faq-wrap { max-width: 800px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { font-family: var(--font-d); font-weight: 700; font-size: 18px; cursor: pointer; }
.faq summary:hover { color: var(--gold-ink); }
.faq details p { margin: 10px 0 0; }
.final-cta-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.final-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.objections { list-style: none; display: grid; gap: 12px; margin: 28px 0 0; }
.objections li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink-2); }
.objections li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold-ink); font-weight: 700; }
.objections strong { color: var(--ink); }

/* Author box — shared by /about/ and blog posts (patterns.css loads on every page) */
.author-box { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; margin: 40px 0 8px; }
/* The flex item is the <picture> wrapper, not the <img> inside it, so the
   no-shrink guard has to sit on the picture. Without it the photo is squeezed
   to a sliver (160px -> 30px on /about/) while the height stays put. The guard
   is kept on .author-photo too so the img still holds if the picture is dropped. */
.author-box picture, .author-photo { flex: none; }
.author-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.author-name { font-family: var(--font-d); font-weight: 700; color: var(--ink); margin: 0 0 2px; }
.author-box p:last-child { margin-top: 8px; }
.author-box a { font-weight: 700; color: var(--gold-ink); text-decoration: none; }
.author-box a:hover { box-shadow: inset 0 -2px 0 0 var(--gold); }
.author-box--about { margin-top: 0; }
.author-box--about .author-photo { width: 160px; height: 160px; border-radius: var(--r-md); }
@media (max-width: 640px) { .author-box { flex-direction: column; } .author-box--about .author-photo { width: 100%; height: auto; } }