/* ---------- Base (shared by every Triviall Kenya landing) ---------- */
:root{--bg:#fff;--ink:#071a17;--muted:#55635f;--accent:#ef3038;--cta:#078646;--cta-ink:#fff;--card:#fff;--line:rgba(7,26,23,.14);--ok:#0b7a43;--err:#c8102e;--soft:#e9f4e4;--focus:rgba(7,134,70,.2);--link:inherit;
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.35}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,p{margin:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.page{width:100%;max-width:480px;min-height:100vh;min-height:100svh;margin:0 auto;background:var(--bg);position:relative;overflow-x:hidden;display:flex;flex-direction:column}
.ico{width:1em;height:1em;fill:currentColor;flex:none}

/* Brand word-mark: dotless “ı” + coloured dot */
.brand{font-weight:800;font-size:2.35rem;letter-spacing:-.045em;line-height:1;color:var(--brand,var(--ink));white-space:nowrap}
.dot-i{position:relative;display:inline-block}
.dot-i::before{content:"";position:absolute;left:50%;top:.02em;width:.2em;height:.2em;margin-left:-.1em;border-radius:50%;background:var(--accent)}
.headline{font-weight:800;letter-spacing:-.035em;line-height:.98}

/* Social proof */
.stats{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:1.05rem}
.stats strong{font-weight:800;font-size:1.25em}
.stats .ico{font-size:1.9rem;color:var(--ok)}

/* Conversion form */
.conversion{margin:0 16px;padding:18px;border-radius:20px;background:var(--card);box-shadow:0 8px 26px rgba(5,38,28,.08);border:1px solid rgba(0,0,0,.06)}
.conversion .label{display:block;font-weight:700;margin-bottom:8px;font-size:1rem}
.phone-field{position:relative;display:flex;align-items:center;height:var(--ph,58px);border:2px solid #b4bbbf;border-radius:13px;background:#fff}
.phone-field:focus-within{border-color:var(--cta);box-shadow:0 0 0 4px var(--focus)}
.prefix{display:flex;align-items:center;gap:8px;height:100%;padding:0 12px 0 13px;border-right:1.5px solid #d5d9db;background:#f3f5f4;border-radius:11px 0 0 11px;flex:none;user-select:none;-webkit-user-select:none}
.prefix .flag{width:28px;height:19px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.prefix .cc{font-size:1.15rem;font-weight:700;color:#15242e;letter-spacing:.01em}
.phone{flex:1;min-width:0;height:100%;border:0;border-radius:0 11px 11px 0;background:transparent;padding:0 42px 0 12px;font-size:1.2rem;font-weight:600;letter-spacing:.02em;outline:none;color:#15242e}
.phone::placeholder{color:#949ca1;font-weight:500}
.phone-ok{position:absolute;right:14px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--ok);color:#fff;padding:4px;opacity:0;transform:scale(.6)}
.phone-field.is-valid{border-color:var(--ok)}
.phone-field.is-valid .phone-ok{opacity:1;transform:none}
.phone-field.is-invalid{border-color:var(--err)}
.field-msg{font-size:.85rem;font-weight:600;margin-top:6px;color:var(--err)}
.field-msg:empty{display:none}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;margin-top:12px;padding:12px 16px;border:0;border-radius:14px;background:var(--cta);color:var(--cta-ink);font-weight:800;font-size:1.15rem;line-height:1.15;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cta:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.cta[aria-busy="true"]{opacity:.75;cursor:progress}
.cta:disabled{opacity:.45;cursor:not-allowed}
.cta+.consent,.form-stage+.consent{margin-top:14px}

/* Help text under the number field */
.field-help{font-size:.85rem;font-weight:500;margin-top:6px;color:var(--muted)}
.field-help.is-error{color:var(--err);font-weight:700}
.field-help.is-success{color:var(--ok);font-weight:800}

/* Guide arrows: point at the number field, then move down to point at the CTA once it's valid */
.form-stage{position:relative}
.guide{position:absolute;top:0;width:26px;height:var(--ph,58px);display:grid;place-items:center;color:var(--guide,var(--accent));pointer-events:none;z-index:1}
.guide svg{width:26px;height:26px;fill:currentColor;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.guide-l{left:-31px}
.guide-r{right:-31px}
.guide-r svg{transform:scaleX(-1)}
.form-stage.is-valid .guide-l{transform:translateY(var(--to-cta,70px)) rotate(28deg)}
.form-stage.is-valid .guide-r{transform:translateY(var(--to-cta,70px)) rotate(-28deg)}
.price{text-align:center;font-weight:600;margin:12px 0 0;font-size:.82rem;color:var(--price,var(--muted))}
.powered{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:8px;font-size:.7rem;font-weight:500;color:var(--muted);letter-spacing:.01em}
.powered picture{display:block;line-height:0}
.powered img{display:block;height:18px;width:auto}
.ty .powered{margin-top:14px}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;line-height:1.35;cursor:pointer}
.consent span{padding-top:2px}
.consent input{-webkit-appearance:none;appearance:none;width:24px;height:24px;flex:none;margin:0;border:2px solid #8b9398;border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer}
.consent input:checked{background:var(--cta);border-color:var(--cta)}
.consent input:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 3px 3px 0;transform:translateY(-1px) rotate(45deg)}
.consent input:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.consent.is-invalid input{border-color:var(--err)}
.consent a{color:var(--link);font-weight:700}

/* Feature strip */
.features{list-style:none;margin:0;display:grid;grid-template-columns:repeat(4,1fr);padding:18px 10px 6px}
.feature{text-align:center;padding:2px 4px;border-right:1px solid var(--line);font-size:.8rem;font-weight:800;line-height:1.2}
.feature:last-child{border-right:0}
.feature small{display:block;font-weight:500;color:var(--muted);margin-top:4px;font-size:.72rem;line-height:1.25}
.badge{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 8px;font-size:28px;background:var(--b,#0b5a3a);color:var(--bi,#fff)}

/* FAQ accordion */
.faq{margin:16px;border-radius:18px;background:var(--card);border:1px solid rgba(0,0,0,.06)}
.faq details{border-bottom:1px solid var(--line);padding:0 16px}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;font-weight:800;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-4px;flex:none}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq p{padding:0 0 14px;color:var(--muted);font-size:.9rem}

/* Footer */
.site-footer{margin-top:auto;padding:18px 16px 24px;text-align:center;font-size:.8rem;color:var(--muted)}
.site-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:6px}
.site-footer a{font-weight:600;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* Thank-you page */
.ty{flex:1;display:flex;flex-direction:column;padding:26px 20px 8px;text-align:center}
.ty .brand{align-self:center}
.ty-check{width:80px;height:80px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;margin:20px auto 16px;font-size:44px;box-shadow:0 0 0 10px var(--soft)}
.ty h1{font-size:clamp(2.2rem,10vw,3rem)}
.ty-lead{font-size:1.08rem;margin-top:10px}
.summary{margin:18px 0 0;padding:4px 16px;border-radius:16px;background:var(--card);border:1px solid rgba(0,0,0,.07);text-align:left}
.summary div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.summary div:last-child{border-bottom:0}
.summary div[hidden]{display:none}
.summary dt{color:var(--muted);font-weight:500}
.summary dd{margin:0;font-weight:800;text-align:right}
.status{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.85rem;font-weight:800}
.status.pending{background:#fff1c7;color:#7a5300}
.status.active{background:var(--soft);color:var(--ok)}
.ty-check.is-pending{background:#fff1c7;color:#7a5300;box-shadow:0 0 0 10px rgba(242,191,0,.18)}
.ty-hint{margin-top:12px;padding:12px 14px;border:1.5px dashed rgba(11,122,67,.4);border-radius:14px;background:#eefaf2;color:#17603b;font-weight:600;font-size:.95rem}
.ty-about{margin-top:20px;padding:16px;border-radius:16px;background:var(--card);border:1px solid rgba(0,0,0,.07);text-align:left;color:var(--muted);font-size:.9rem;line-height:1.45}
.ty-about h2{font-size:1rem;color:var(--ink);margin-bottom:6px}
.ty-about p+p{margin-top:8px}
.ty-home{align-self:center;margin:18px 0 6px;padding:10px 28px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-weight:700;text-decoration:none}
.ty-home:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.ty-sub{font-size:1rem;font-weight:800;margin:26px 0 0;text-align:left}
.ty-steps{list-style:none;padding:0;margin:10px 0 4px;display:grid;gap:10px;text-align:left}
.ty-steps li{display:flex;gap:14px;align-items:center;padding:13px 16px;border-radius:16px;background:var(--card);border:1px solid rgba(0,0,0,.07);font-weight:700}
.ty-steps li small{display:block;font-weight:500;color:var(--muted);font-size:.82rem}
.ty-steps .n{width:36px;height:36px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-weight:800;flex:none}
.ty .cta{margin-top:18px;text-decoration:none}
.ty-page .ty-note{margin-top:14px}
.ty-note{font-size:.82rem;color:var(--muted);margin-top:12px}

@media (max-width:380px){.prefix{gap:6px;padding:0 9px 0 10px}.prefix .flag{width:24px;height:16px}.prefix .cc,.phone{font-size:1.05rem}.guide{width:22px}.guide svg{width:22px;height:22px}.guide-l{left:-27px}.guide-r{right:-27px}.cta{font-size:1.04rem;padding:10px 12px}.features .feature{font-size:.74rem}}
@media (min-width:700px){html,body{background:#ececec}.page{box-shadow:0 0 40px rgba(0,0,0,.12)}}
@media (prefers-reduced-motion:no-preference){
  .phone-field{transition:border-color .15s,box-shadow .15s}
  .phone-ok{transition:opacity .18s,transform .18s}
  .cta{transition:transform .12s ease,filter .12s ease}
  .cta:not(:disabled){animation:ctaPulse 1.8s ease-in-out infinite}
  .cta:not(:disabled):hover{transform:translateY(-2px);filter:brightness(.96)}
  .cta:not(:disabled):active{transform:translateY(1px) scale(.98);animation:none}
  @keyframes ctaPulse{0%{box-shadow:0 0 0 0 var(--focus),0 6px 14px rgba(0,0,0,.12);scale:1}50%{scale:1.025}70%{box-shadow:0 0 0 12px transparent,0 6px 14px rgba(0,0,0,.12)}100%{box-shadow:0 0 0 0 transparent,0 6px 14px rgba(0,0,0,.12);scale:1}}
  .phone-field:not(.is-valid){animation:inputPulse 1.8s ease-out infinite}
  @keyframes inputPulse{0%{box-shadow:0 0 0 0 var(--focus)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
  .guide{transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
  .guide-l svg{animation:nudgeL 1s ease-in-out infinite}
  .guide-r svg{animation:nudgeR 1s ease-in-out infinite}
  @keyframes nudgeL{0%,100%{transform:translateX(-3px)}50%{transform:translateX(4px)}}
  @keyframes nudgeR{0%,100%{transform:scaleX(-1) translateX(-3px)}50%{transform:scaleX(-1) translateX(4px)}}
  .ty-check{animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
  .ty-check.is-pending{animation:pop .45s cubic-bezier(.2,1.4,.4,1) both,ring 1.8s ease-out .5s infinite}
  @keyframes ring{0%{box-shadow:0 0 0 0 rgba(242,191,0,.45)}70%{box-shadow:0 0 0 16px rgba(242,191,0,0)}100%{box-shadow:0 0 0 0 rgba(242,191,0,0)}}
  @keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
}

/* ---------- 04 · Community / local pride ---------- */
:root{--bg:#fdf6eb;--ink:#0d3b2c;--accent:#d4552f;--cta:#155c3e;--ok:#1d7a4a;--soft:#dcefd8;--muted:#5b6a64;--link:#d4552f;--focus:rgba(21,92,62,.2)}
.hero-img img{width:100%}
.conversion{margin-top:-4px;position:relative}
.cta{border-radius:999px}
.cta .ico{font-size:1.4rem}
.features{padding-top:20px}
.feature{font-size:.82rem}
.steps{list-style:none;margin:14px 16px 0;padding:12px 10px;border-radius:16px;background:#e2efd9;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.steps li{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;line-height:1.2;position:relative}
.steps li+li::before{content:"›";position:absolute;left:-8px;font-size:1.3rem;font-weight:400}
.steps li+li{padding-left:6px}
.steps .n{width:32px;height:32px;border-radius:50%;background:#c4e4c2;display:grid;place-items:center;font-weight:800;font-size:1rem;flex:none}
.site-footer.dark{background:#0f3b2b;color:#fff;text-align:left;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin-top:auto;padding:18px 16px 22px}
.site-footer.dark nav{margin:0}
.foot-brand .brand{font-size:1.8rem;color:#fff;display:inline-flex;align-items:flex-start}
.foot-brand p:last-child{font-size:.8rem;opacity:.85}
.rays{width:.55em;height:.65em;margin:-.1em 0 0 .06em}
.ty-img img{width:100%;max-height:240px;object-fit:cover;object-position:center 20%}
.ty{padding-top:4px}
.ty-check{margin-top:-44px;position:relative;box-shadow:0 0 0 8px var(--bg)}
.ty .headline span{display:block;color:var(--accent)}
@media (max-height:760px){:root{--ph:52px}.cta{min-height:52px}.conversion{padding:14px}.hero-img img{max-height:40svh;object-fit:cover;object-position:top}}
@media (max-height:660px){.hero-img img{max-height:34svh}.price{margin:7px 0 6px}}
@media (max-height:560px){.hero-img img{max-height:26svh}}

/* Above-the-fold fit levels (added by app.js only when the CTA would be below the fold) */
.fit-1 .hero-img{display:none}
.fit-1 .fit-title{position:static!important;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;padding:14px 18px 12px;font-size:1.6rem;font-weight:800;letter-spacing:-.035em;line-height:1.05}
.fit-1 .fit-brand{display:block;font-size:1rem;letter-spacing:-.02em;margin-bottom:2px}
.fit-1 .fit-accent{color:var(--accent)}
.fit-3 .conversion{padding:12px 14px}
.fit-4 .fit-title{font-size:1.25rem;padding:8px 18px 6px}
.fit-4 .conversion .label{display:none}