/* HV Funnels: one stylesheet for every client funnel. The colours, font and hero ratio
   come from the settings file at run time through the custom properties below. */
:root{
  --primary:#0e7a43;        /* buttons, progress, active states */
  --primary-dark:#08492a;   /* hover and pressed */
  --ink:#14231b;            /* headings */
  --body:#4a5a51;           /* body copy */
  --bg:#f7f6f2;             /* page background */
  --card:#ffffff;
  --line:#e2e0da;
  --hero-ratio:1.7;
  --radius:14px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:#e9e7e1;color:var(--body);
     min-height:100vh;display:flex;flex-direction:column;align-items:center;
     padding:0;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.phone{width:100%;max-width:min(430px,100%);background:var(--bg);flex:1;
       display:flex;flex-direction:column;min-height:100vh;position:relative;
       box-shadow:0 0 42px rgba(0,0,0,.14)}
/* On a desktop the column would stretch to the full window and every screen reads as
   half empty. Framing it at phone height is both better looking and a truer preview. */
@media (min-width:600px){
  body{justify-content:flex-start;padding-bottom:26px}
  .phone{flex:0 0 auto;height:min(858px,calc(100vh - 52px));min-height:0;
         margin:26px auto 0;border-radius:26px;overflow:hidden}
}
header{padding:12px 20px 0}
.wordmark{font-weight:700;color:var(--primary);font-size:15px;letter-spacing:-.01em;min-height:18px}
/* A logo supplied on a solid background sits in a matching tile rather than being knocked
   out badly. Keeps the client's actual asset intact and reads as deliberate. */
.wordmark img{display:block;height:30px;width:auto;border-radius:6px}
.track{height:5px;background:var(--line);border-radius:99px;margin-top:10px;overflow:hidden}
.fill{height:100%;background:var(--primary);border-radius:99px;width:0;
      transition:width .35s cubic-bezier(.4,0,.2,1)}
.meta{display:flex;justify-content:space-between;align-items:center;
      margin-top:6px;font-size:12px;color:#8b978f;min-height:14px}
/* Top aligned rather than centred: with centring, the headline jumps up and down between
   screens as the number of cards changes, and short screens float in the middle looking
   unfinished. Anchoring the headline puts trailing space at the bottom where it reads as normal. */
main{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:16px 20px 24px;
     overflow-y:auto}
/* Wide bands suit a landscape scene; a person needs more height or their head gets cut.
   Set --hero-ratio per client rather than forcing one crop to serve both. */
.hero{width:100%;aspect-ratio:var(--hero-ratio,2.3);object-fit:cover;
      border-radius:var(--radius);margin-bottom:16px;background:#d8d5cd}
.eyebrow{font-size:12px;font-weight:600;color:var(--primary);
         text-transform:uppercase;letter-spacing:.07em;margin-bottom:9px}
h1{font-size:25px;line-height:1.2;color:var(--ink);font-weight:700;
   letter-spacing:-.02em;margin-bottom:9px}
h2{font-size:21px;line-height:1.25;color:var(--ink);font-weight:700;
   letter-spacing:-.015em;margin-bottom:7px}
.sub{font-size:14.5px;line-height:1.5;margin-bottom:15px}
/* On the opening screen the headline sells and this line asks, so they need separating. */
.qline{font-size:17.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin-bottom:11px}
.opts{display:flex;flex-direction:column;gap:9px}
/* Photo cards: a picture answers "which of these is my project?" faster than a label can. */
.opts.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt.photo{flex-direction:column;padding:0;gap:0;align-items:stretch;overflow:hidden}
.opt.photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#ddd}
.opt.photo .plabel{padding:11px 10px;font-size:14px;line-height:1.3;font-weight:600;
      text-align:center;color:var(--ink)}
.opt.photo:active{transform:scale(.985)}
.opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
     background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
     padding:15px 16px;font:inherit;font-size:15.5px;color:var(--ink);font-weight:500;
     cursor:pointer;transition:border-color .15s,transform .1s,box-shadow .15s}
.opt:hover{border-color:var(--primary);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.opt:active{transform:scale(.985)}
.mark{flex:0 0 38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--primary) 9%,#fff);
      color:var(--primary);display:grid;place-items:center;font-size:14px;font-weight:700}
.mark svg{width:21px;height:21px;display:block}
.opt:hover .mark{background:color-mix(in srgb,var(--primary) 16%,#fff)}
.chev{margin-left:auto;color:#c3c9c5;font-size:17px;flex:0 0 auto}
.payoff{background:color-mix(in srgb,var(--primary) 8%,#fff);
        border:1px solid color-mix(in srgb,var(--primary) 22%,#fff);
        border-radius:var(--radius);padding:13px 15px;font-size:13.5px;
        line-height:1.5;color:var(--ink);margin-bottom:17px}
.payoff b{color:var(--primary)}
label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:13px 0 6px}
/* Consent is a legal requirement on a lead form, not a nicety, so it gets a real control
   rather than small print under the button. */
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:15px;
      font-size:12.5px;line-height:1.45;color:var(--body);font-weight:400;cursor:pointer}
.consent input{width:18px;height:18px;flex:0 0 18px;margin:1px 0 0;accent-color:var(--primary)}
.consent a{color:var(--ink)}
.consent.missing{color:#c0392b}
.consent.missing input{outline:2px solid #c0392b;outline-offset:2px}
input,textarea{width:100%;font:inherit;font-size:16px;padding:13px 15px;
      border:1.5px solid var(--line);border-radius:var(--radius);background:var(--card);
      color:var(--ink)}
input:focus,textarea:focus{outline:none;border-color:var(--primary)}
input.missing,textarea.missing{border-color:#c0392b}
/* The honeypot: off screen for people, a normal field for bots. */
.hp{position:absolute;left:-9999px;top:0;height:1px;width:1px;opacity:0;pointer-events:none}
.cta{display:block;width:100%;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);
     padding:16px;font:inherit;font-size:16px;font-weight:600;cursor:pointer;text-align:center;
     text-decoration:none;margin-top:18px;transition:background .15s,transform .1s}
.cta:hover{background:var(--primary-dark)}
.cta:active{transform:scale(.99)}
.cta:disabled{opacity:.7;cursor:default}
.error{color:#c0392b;font-size:13px;line-height:1.45;text-align:center;margin-top:10px}
.error:empty{display:none}
.reassure{font-size:12.5px;color:#8b978f;text-align:center;margin-top:11px;line-height:1.45}
.trust{border-top:1px solid var(--line);padding:11px 20px 18px;font-size:11.5px;
       color:#8b978f;text-align:center;line-height:1.5}
.stars{display:flex;justify-content:center;gap:2px;margin-bottom:5px}
.stars svg{width:13px;height:13px;color:var(--primary)}
.done{text-align:center}
/* Opening screen: the pitch, then a single decision. The points sit below the buttons so
   the first tap stays above the fold on a phone. */
.points{list-style:none;margin:0 0 20px;display:flex;flex-direction:column;gap:9px}
.points.below{margin:20px 0 0;padding-top:17px;border-top:1px solid var(--line)}
.points li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--body);text-align:left}
.points svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px;color:var(--primary)}
.start{display:flex;flex-direction:column;gap:9px}
.primary{display:block;width:100%;background:var(--primary);color:#fff;border:none;border-radius:var(--radius);
      padding:16px;font:inherit;font-size:16px;font-weight:600;cursor:pointer;
      transition:background .15s,transform .1s}
.primary:hover{background:var(--primary-dark)}
.primary:active{transform:scale(.99)}
.secondary{display:block;width:100%;background:none;border:1.5px solid var(--line);border-radius:var(--radius);
      padding:14px;font:inherit;font-size:15px;color:var(--body);cursor:pointer;
      transition:border-color .15s}
.secondary:hover{border-color:var(--primary);color:var(--ink)}
/* A knock out replaces the options with the message and a way back. */
.knockout{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
      padding:18px 16px;font-size:15px;line-height:1.5;color:var(--ink)}
.knockout .secondary{margin-top:14px}
.tick{width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;
      display:grid;place-items:center;margin:0 auto 17px}
.tick svg{width:28px;height:28px}
/* Cookie consent, only when the settings file turns it on. It sits on the bottom of the
   phone frame above everything and holds the pixel back until Accept. */
.consent-banner{position:absolute;left:0;right:0;bottom:0;z-index:5;background:var(--card);
      border-top:1px solid var(--line);padding:14px 20px 16px;font-size:13px;line-height:1.45;
      color:var(--body);box-shadow:0 -6px 20px rgba(0,0,0,.06)}
.consent-banner[hidden]{display:none}
.consent-banner p{margin-bottom:11px}
.consent-banner .row{display:flex;gap:8px}
.consent-banner button{width:auto;flex:1;padding:11px 12px;font-size:14px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}