/* What the planner does (features.html): the full list behind the home page's six points, in eight cards that follow the
   home page's look. Navy band at the top with links to each card, white cards with a picture, who each part is mainly for,
   short points and the caveats, then the closing band. Colours, type and sizes come from tokens.css. */
.ft-page{margin:0;color:var(--ink);font:400 var(--text-sm)/1.55 var(--font);-webkit-font-smoothing:antialiased;background-color:var(--page);background-image:linear-gradient(var(--page-grid) 1px,transparent 1px),linear-gradient(90deg,var(--page-grid) 1px,transparent 1px);background-size:28px 28px}
.ft-page *,.ft-page *::before,.ft-page *::after{box-sizing:border-box}
.ft-page :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
:where(.ft-page a){color:inherit;text-decoration:none}
.ft-page svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ft-page h1,.ft-page h2{text-wrap:balance}
.ft-page p,.ft-page li{text-wrap:pretty}
.ft-wrap{width:100%;max-width:1250px;margin:0 auto;padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}
.ft-skip{position:absolute;left:16px;top:-60px;z-index:60;padding:10px 14px;border-radius:8px;background:var(--ev-sky);color:var(--ev-sky-ink);font-weight:650}
.ft-skip:focus{top:12px}


.ft-hero{margin:32px 0 0;padding:44px 48px 40px;border-radius:24px;color:#fff;background:var(--ev-navy);background-image:radial-gradient(circle at 85% -10%,#2c5b7c 0,transparent 55%),linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:auto,28px 28px,28px 28px;box-shadow:0 18px 44px #10283c33;--focus:var(--ev-sky)}
.ft-eyebrow{margin-bottom:14px;font-size:var(--text-2xs);font-weight:700;letter-spacing:1.6px;color:var(--ev-sky)}
.ft-eyebrow span+span::before{content:'·';margin:0 .45em 0 .2em}
.ft-hero h1{margin:0 0 14px;font-size:var(--text-4xl);line-height:1.1;letter-spacing:-1px}
.ft-hero p{margin:0;max-width:640px;color:var(--ev-on-navy);font-size:var(--text-base);line-height:1.6}
.ft-chips{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.ft-chips a{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 13px;border:1px solid #ffffff2e;border-radius:999px;background:#ffffff0d;color:#fff;font-size:var(--text-xs);font-weight:600}
.ft-chips a:hover{background:#ffffff1f;border-color:#ffffff55}
.ft-chips svg{width:15px;height:15px;color:var(--ev-sky)}
.ft-note{margin:18px 0 0;font-size:var(--text-xs);color:#50697b}

.ft-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:22px 0 36px}
.ft-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff;border:1px solid #dfe7ee;border-radius:18px;box-shadow:var(--ev-shadow);scroll-margin-top:96px}
.ft-pic{aspect-ratio:16/8;overflow:hidden;background:#e9eef3;border-bottom:1px solid #e3eaf1}
.ft-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.ft-body{display:flex;flex-direction:column;flex:1;padding:20px 24px 22px}
.ft-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.ft-icon{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:11px;background:#eaf2ff;color:var(--accent)}
.ft-card h2{margin:0;font-size:var(--text-xl);line-height:1.25;letter-spacing:-.3px}
.ft-for{display:inline-block;margin:6px 0 12px;font-size:var(--text-2xs);font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#4c6b84}
.ft-card ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.ft-card li{position:relative;padding-left:18px;color:#2c4558;line-height:1.5}
.ft-card li::before{content:'';position:absolute;left:1px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.ft-caveat{margin:14px 0 0;padding-top:12px;border-top:1px solid #edf2f6;font-size:var(--text-xs);color:#50697b}

.ft-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 30px;padding:30px 40px;border-radius:24px;color:#fff;background:var(--ev-navy);background-image:var(--ev-navy-glow);box-shadow:0 18px 44px #10283c33;--focus:var(--ev-sky)}
.ft-cta h2{margin:0 0 4px;font-size:var(--text-2xl);letter-spacing:-.5px}
.ft-cta p{margin:0;color:var(--ev-on-navy)}
.ft-actions{display:flex;flex-wrap:wrap;gap:10px}
.ft-btn{display:inline-flex;align-items:center;gap:8px;min-height:45px;padding:12px 17px;border:1px solid #ffffff3a;border-radius:9px;background:#ffffff12;color:#fff;font-size:var(--text-ui);font-weight:650;white-space:nowrap}
.ft-btn:hover{background:#ffffff22;border-color:#ffffff66}
.ft-btn svg{width:17px;height:17px}
.ft-page .ft-primary{background:var(--ev-sky);border-color:var(--ev-sky);color:var(--ev-sky-ink)}
.ft-page .ft-primary:hover{background:var(--ev-sky-hover);border-color:var(--ev-sky-hover)}

.ft-foot{display:flex;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:max(40px,env(safe-area-inset-bottom,0px));color:#50697b;font-size:var(--text-xs)}
.ft-foot a{display:inline-flex;align-items:center;min-height:35px;color:var(--accentText);font-weight:650}
.ft-foot a:hover{text-decoration:underline;text-underline-offset:4px}
.ft-company{display:block;margin-top:4px;font-size:var(--text-2xs);line-height:1.6}
.ft-foot-links{display:flex;flex:none;gap:20px;align-items:flex-start}

/* How to use the planner (4 November 2026, moved from Home): the four steps of a job in one navy band above the cards. */
.ft-steps{margin:22px 0 0;padding:28px 32px 30px;border-radius:24px;color:#fff;background:var(--ev-navy);background-image:var(--ev-navy-glow);--focus:var(--ev-sky)}
.ft-steps-head{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:20px}
.ft-steps h2{margin:0;font-size:var(--text-2xl);letter-spacing:-.5px}
.ft-steps ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;counter-reset:ft-step}
.ft-steps li{display:grid;gap:6px;align-content:start;padding:18px;border:1px solid #ffffff1f;border-radius:14px;background:#ffffff0f;counter-increment:ft-step}
.ft-steps li::before{content:counter(ft-step);display:inline-grid;place-items:center;width:30px;height:30px;margin-bottom:4px;border-radius:50%;background:var(--ev-sky);color:var(--ev-sky-ink);font-weight:750;font-size:var(--text-ui)}
.ft-steps b{font-size:var(--text-base);line-height:1.3}
.ft-steps span{color:var(--ev-on-navy);line-height:1.5}
.ft-more{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:12px;color:var(--accentText);font-weight:650}
.ft-more:hover{text-decoration:underline;text-underline-offset:4px}
.ft-more svg{width:16px;height:16px}

@media(max-width:1100px){
 .ft-wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
 .ft-hero{padding:36px 32px 32px}
 .ft-steps{padding:26px 28px 28px}
 .ft-steps ol{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ft-body{padding:18px 20px 20px}
}
@media(max-width:700px){
 .ft-wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
 .ft-hero{margin-top:20px;padding:28px 20px 24px;border-radius:20px}
 .ft-eyebrow span{display:block}
 .ft-eyebrow span+span::before{content:none}
 .ft-hero h1{font-size:var(--text-3xl)}
 .ft-hero p{font-size:var(--text-sm)}
 .ft-grid{grid-template-columns:1fr;gap:16px}
 .ft-steps{padding:22px 20px 24px;border-radius:20px}
 .ft-steps ol{grid-template-columns:1fr}
 .ft-cta{flex-direction:column;align-items:flex-start;padding:24px 20px;border-radius:20px}
 .ft-foot{flex-direction:column;gap:6px}
}

/* Page colour, 28 October 2026: the Features page takes the blue-grey --page (Site Notes keeps the lighter page), and text
   straight on it keeps 4.5:1. */
.ft-page.ft-features{background-color:var(--page);background-image:linear-gradient(var(--page-grid) 1px,transparent 1px),linear-gradient(90deg,var(--page-grid) 1px,transparent 1px)}
.ft-features .ft-note,.ft-features .ft-foot{color:var(--dim)}

/* About page (about.html), 1 November 2026: the same header, hero, cards and footer as Features, plus a row of short facts,
   the faceless installer drawing at the top of the background card, and the contact line. */
.ab-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:22px 0 0;padding:0;list-style:none}
.ab-facts li{display:flex;flex-direction:column;gap:4px;padding:18px 20px;background:#fff;border:1px solid #dfe7ee;border-radius:16px;box-shadow:var(--ev-shadow)}
.ab-facts b{font-size:var(--text-2xl);line-height:1.2;letter-spacing:-.5px;color:var(--ev-navy)}
.ab-facts span{color:var(--dim);line-height:1.45}
.ab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:22px 0 36px}
.ab-grid .ab-intro{grid-row:span 2}
.ab-grid h2{margin:0 0 12px}
.ab-grid .ft-body>p{margin:0;color:#2c4558;line-height:1.65}
.ab-pic{padding:20px 24px 0;background:#f4f7fa;border-bottom:1px solid #e3eaf1}
.ab-pic img{display:block;width:100%;max-width:330px;height:auto;margin:0 auto}
.ft-cta .ab-link{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ab-contact{margin:0 0 8px;font-size:var(--text-xs);color:var(--dim)}
.ab-contact a{color:var(--accentText);font-weight:650}
@media(max-width:1100px){.ab-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.ab-facts{gap:10px}.ab-facts li{padding:14px 16px}.ab-facts b{font-size:var(--text-xl)}.ab-grid{grid-template-columns:1fr;gap:16px}.ab-grid .ab-intro{grid-row:auto}}
/* Councils (councils.html, 4 November 2026): site audits for councils and site owners, in the same cards with no pictures. */
.ft-hero-actions{margin-top:24px}
.ft-councils .ft-card{scroll-margin-top:96px}