/* ===== Approved look, 2026-10-15 (Cathy) =====
   White pages, charcoal text, forest-green actions, pale-sage sections, subtle borders. No beige, no terracotta.
   Loaded last: it sets the palette, then the homepage sections from the approved mockups. */
:root{--paper:#fff;--ink:#19231f;--soft:#55625b;--wash:#f1f6f2;--line:#dce5df;--mark:#e3efe6;--accent:#145b43;--accent-deep:#0f4734;--yes:#145b43;--amber:#145b43;--sage:#9cc3ad}
html,body,.offer-site{background:#fff;color:var(--ink)}

/* Buttons and links: flat, restrained rounding */
.offer-site .button{background:var(--accent);border-color:var(--accent);color:#fff;border-radius:999px;box-shadow:none}
.offer-site .button:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.offer-site .button.outline{background:#fff;color:var(--accent);border-color:var(--accent)}
.offer-site .button.outline:hover{background:var(--wash);color:var(--accent-deep)}
.offer-site .text-link{color:var(--accent);border-bottom-color:currentColor}
.offer-site a:focus-visible,.offer-site button:focus-visible,.offer-site summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.ktag.yes.soft,.offer-site .tag,.case-top span:last-child{background:var(--mark);color:var(--accent-deep)}

/* Logo: the shape stays, in forest green and sage */
.brand-symbol{color:var(--accent)}
.brand-symbol span{color:#ad6548}

/* Hero: the last phrase in green, on a sage highlighter line (Cathy liked it, 10-15); the preview sits on a pale-sage backing */
.editorial-hero h1 em,.page-hero h1 em{color:var(--accent);background:linear-gradient(transparent 60%,#cfe5d6 60%,#cfe5d6 92%,transparent 92%);padding:0 .06em;margin:0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.offer-site h2 em{font-style:normal;color:var(--accent)}
.hero-backing{background:var(--wash);border-radius:20px;padding:34px 30px 22px}
.hero-backing .pv-devices{margin-right:18px}

/* Full-width pale-sage bands */
.sage-band{background:var(--wash);padding:84px 0;margin:72px 0}
.sage-band+.sage-band{margin-top:0}
.section-heading{text-align:center;max-width:720px;margin:0 auto 40px}
.section-heading h2{margin:0 0 10px}
.section-heading p{color:var(--soft);margin:0}

/* What we do: three white cards on sage, number + title, then the illustration */
.sage-band .shots{margin:0 auto;padding:0}
.shot-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.shot{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;margin:0;display:flex;flex-direction:column;gap:18px;box-shadow:none}
.shot figcaption{display:block;color:var(--soft);font-size:16px;line-height:1.5}
.shot .cap-head{display:flex;align-items:center;gap:14px;margin:0 0 10px}
.shot .cap-head .num{flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px}
.shot .cap-head b{color:var(--ink);font-size:19px;line-height:1.25;margin:0}
.shot .cap-text{display:block}
.shot .screen{background:var(--wash);border:1px solid var(--line);border-radius:12px;margin-top:auto}
.shot .range{background:var(--mark);color:var(--accent-deep)}
.shot .btn{background:var(--accent);color:#fff}
.shots-note{text-align:center;color:var(--soft);font-size:13px!important;margin:22px 0 0}

/* Portfolio frames: white and sage instead of sand */
.work-bar,.pv-bar{background:var(--wash)!important;border-color:var(--line)!important}
.work-shot,.pv-browser{border-color:var(--line)!important;box-shadow:0 1px 2px rgba(25,35,31,.06)!important}
.work-nav button{background:var(--accent);border-color:var(--accent);color:#fff}

/* The cleanroom case */
.case-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:96px;margin-bottom:24px}
.case-copy h2{margin:6px 0 16px}
.case-copy p{color:var(--soft)}
.case-figure-card{background:var(--wash);border-radius:18px;padding:38px 36px}
.offer-site .case-big{font-family:var(--display);font-weight:700;font-size:clamp(46px,6vw,72px);line-height:1;color:var(--accent);letter-spacing:-.03em;margin:0 0 12px}
.offer-site .case-big .per{font-size:.45em;color:var(--ink);font-weight:600;letter-spacing:-.01em}
.case-what{font-size:18px!important;color:var(--ink);margin:0 0 18px}
.case-limit{font-size:13px!important;color:var(--soft);margin:0}

/* Lead alerts */
.alerts-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.alerts-copy h2{margin:0 0 16px}
.alerts-copy>p{color:var(--soft);font-size:18px!important;max-width:520px}
.round-checks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.round-checks li{position:relative;padding-left:36px;font-size:17px}
.round-checks li:before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.alert-phone{margin:0;text-align:center}
.phone-frame,.note-card{transform:none!important;animation:none!important;margin-left:0!important;margin-right:0!important;opacity:1!important}
.phone-frame{margin:0 auto!important}
.phone-frame{background:#fff;border:1px solid var(--line);border-radius:34px 34px 0 0;border-bottom:0;padding:18px 18px 26px;max-width:330px;margin:0 auto;text-align:left}
.phone-status{font-size:13px;margin:0 8px 14px}
.note-card{display:grid;grid-template-columns:34px 1fr;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 2px 10px rgba(25,35,31,.07)}
.note-logo{color:var(--accent)}
.note-logo svg{width:30px;height:30px;display:block}
.note-card p{margin:0;font-size:14px!important;color:var(--soft)}
.note-card .note-top{display:flex;justify-content:space-between;gap:8px;color:var(--ink)}
.note-card .note-top em{font-style:normal;font-size:12px;color:var(--soft)}
.note-card .note-link{color:var(--accent);font-weight:600;margin-top:6px}
.phone-frame>i{display:block;height:10px;border-radius:6px;background:var(--wash);margin:14px 6px 0}
.phone-frame>i.short{width:55%}
.alert-phone figcaption{font-size:13px;color:var(--soft);margin-top:10px}

/* Free check band */
.check-band{background:#fff;border:1px solid var(--line);border-radius:18px}

/* Three offers */
.offers{margin-top:96px}
.offer-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.offer-cards article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.offer-cards article.featured{border:2px solid var(--accent)}
.offer-cards .ktag{align-self:flex-start}
.offer-cards h3{margin:4px 0 0;font-size:22px}
.offer-price{font-family:var(--display);font-weight:700;font-size:26px!important;color:var(--accent);margin:0}
.offer-price small{font-size:.7em;font-weight:600}
.offer-cards p{margin:0;color:var(--ink)}
.offer-cards .offer-terms{color:var(--soft);font-size:15px!important}
.offer-cards .button{margin-top:auto;width:100%;justify-content:center}
.offers .free-first{text-align:center;color:var(--soft);margin-top:22px}
.offers .free-first a{color:var(--accent);font-weight:600}

/* Cathy and the questions, side by side */
.owner-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;margin-top:96px;margin-bottom:24px;align-items:start}
.owner-intro{border-right:1px solid var(--line);padding-right:48px}
.owner-head{display:flex;align-items:center;justify-content:space-between;gap:20px}
.owner-head h2{margin:6px 0 18px}
.owner-head img{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:top;flex:none}
.owner-intro p{color:var(--soft)}
.owner-questions h2{margin:0 0 18px}
.owner-questions .faq-list details{background:#fff;border:1px solid var(--line);border-radius:10px;margin:0 0 10px;padding:0 16px}
.owner-questions .faq-list summary{padding:14px 0;font-weight:600}
.owner-questions .text-link{display:inline-block;margin-top:10px}

/* Final call to action: pale sage, centred, two buttons (inner pages use the same band) */
.final-band{text-align:center;margin-bottom:0}
.final-band h2{margin:0 0 10px}
.final-band p{color:var(--soft);margin:0 0 24px}
.final-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.final-band small{display:block;margin-top:14px;color:var(--soft)}
.final-cta{background:var(--wash)!important}
.final-cta h2,.final-cta h2 *,.final-cta p,.final-cta .overline,.final-cta small{color:var(--ink)!important}
.final-cta .button{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}

/* Footer: clean white */
.site-foot{background:#fff;border-top:1px solid var(--line)}
.site-foot a{color:var(--ink)}
.site-foot a:hover{color:var(--accent)}

@media (max-width:900px){
 .shot-row,.offer-cards{grid-template-columns:1fr}
 .case-split,.alerts-split,.owner-faq{grid-template-columns:1fr;gap:32px}
 .owner-intro{border-right:0;padding-right:0;border-bottom:1px solid var(--line);padding-bottom:32px}
 .sage-band{padding:56px 0;margin:48px 0}
 .hero-backing{padding:22px 16px 16px}
 .case-figure-card{padding:28px 24px}
}

/* What we do, card 01: the example service page carries a real job photo, as in the approved mockup */
.shot .sp-row{display:grid;grid-template-columns:minmax(0,1fr) 44%;gap:14px;align-items:start}
.shot .sp-left{display:flex;flex-direction:column;align-items:flex-start;gap:11px;min-width:0}
.shot .sp-left i{align-self:stretch;display:block;height:9px;border-radius:5px;background:var(--line)}
.shot .sp-left i.short{width:62%;align-self:flex-start}
.shot .sp-left .btn{margin-top:6px;white-space:nowrap}
.shot .sp-photo{width:100%;height:auto;aspect-ratio:4/3.4;object-fit:cover;border-radius:8px;display:block}