/* Kiwi Cash Flow — palette sampled from live render 2026-07-15 */
:root{
  --cream:#F9F8F5;
  --teal:#01434B;
  --lime:#C8F780;
  --green:#4EEC9C;
  --mint:#CAF0D9;
  --mint-2:#CAF1CB;
  --white:#FFF;
  --ink:#01434B;
  --maxw:1200px;
  --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--cream); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- nav ---------- */
.nav{background:var(--cream);border-bottom:1px solid rgba(1,67,75,.08);position:sticky;top:0;z-index:50}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:.02em}
.brand .mark{width:34px;height:34px;border-radius:9px;background:var(--teal);display:grid;place-items:center;color:var(--green);font-weight:900;font-size:17px}
.brand span{font-size:12px;line-height:1.05;text-transform:uppercase}
.navlinks{display:flex;gap:30px;list-style:none;font-size:14px}
.navlinks a{text-decoration:none;font-weight:600;opacity:.9}
.navlinks a:hover{opacity:1;color:#0a6b62}
.navtoggle{display:none;background:none;border:0;font-size:24px;color:var(--teal);cursor:pointer}

/* ---------- buttons ---------- */
.btn{display:inline-block;border-radius:999px;padding:11px 26px;font-size:13px;font-weight:700;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:.15s}
.btn-lime{background:var(--lime);color:var(--teal)}
.btn-lime:hover{filter:brightness(.94)}
.btn-outline{border-color:var(--teal);color:var(--teal)}
.btn-outline:hover{background:var(--teal);color:var(--white)}
.btn-teal{background:var(--teal);color:var(--white)}
.btn-teal:hover{filter:brightness(1.25)}
.btn-ghost-light{border-color:var(--white);color:var(--white)}
.btn-ghost-light:hover{background:var(--white);color:var(--teal)}

/* ---------- sections ---------- */
.sec{padding:84px 0}
.sec-teal{background:var(--teal);color:var(--white)}
.sec-cream{background:var(--cream)}
h1,h2,h3,h4{line-height:1.12;letter-spacing:-.01em}
.h-hero{font-size:clamp(30px,4.4vw,50px);font-weight:400}
.h-hero strong{font-weight:800;display:block}
.h-xl{font-size:clamp(28px,3.6vw,44px);font-weight:800}
.h-lg{font-size:clamp(22px,2.6vw,32px);font-weight:800}
.lede{font-size:14px;line-height:1.75;opacity:.92}
.lede strong{font-weight:800}

/* ---------- hero ---------- */
.hero{padding:64px 0 48px}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.hero .cta-row{display:flex;gap:14px;margin:26px 0 40px;flex-wrap:wrap}
.stats{display:flex;gap:52px}
.stat b{display:block;font-size:clamp(22px,2.4vw,30px);font-weight:800;color:var(--teal)}
.stat span{font-size:11px;font-weight:600;opacity:.75;max-width:110px;display:block;line-height:1.3}
.hero-art{position:relative}

/* ---------- video rows ---------- */
.vid-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.vid-row.rev .vid{order:-1}
.vid video{width:100%;border-radius:6px;background:#000;aspect-ratio:1}
.vid-copy h3{font-size:clamp(19px,2vw,25px);font-weight:800;color:var(--green);margin-bottom:14px}
.vid-copy.plain h4{font-size:17px;font-weight:800;margin-bottom:12px}

/* ---------- CFO panel ---------- */
.panel{background:var(--mint);border-radius:var(--r);padding:56px 40px}
.panel h2{text-align:center;max-width:640px;margin:0 auto 14px}
.panel .lede{text-align:center;max-width:600px;margin:0 auto 26px;font-size:12px}
.panel .cta-row{display:flex;gap:14px;justify-content:center;margin-top:30px}
.feat-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center;margin-top:10px}
.feat-col{display:flex;flex-direction:column;gap:40px}
.feat-col.r{text-align:left}
.feat-col.l{text-align:right}
.feat h4{font-size:14px;font-weight:800;margin-bottom:6px}
.feat p{font-size:11.5px;line-height:1.6;opacity:.85}
.feat .ico{width:26px;height:26px;margin-bottom:8px}
.feat-col.l .ico{margin-left:auto}
.phone{max-width:230px}

/* ---------- scorecard ---------- */
.score-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.tiles{display:grid;grid-template-columns:1fr 1fr 1fr;grid-auto-rows:180px;gap:12px}
.tile{border-radius:14px;padding:18px;font-size:11px;line-height:1.5;overflow:hidden;position:relative}
.tile h4{font-size:13.5px;font-weight:800;margin-bottom:8px}
.tile.img{padding:0}
.tile.img img{width:100%;height:100%;object-fit:cover}
.tile.lime{background:var(--lime);color:var(--teal)}
.tile.dark{background:#023239;color:#fff}
.tile.green{background:var(--green);color:var(--teal)}

/* ---------- testimonials ---------- */
.tst-grid{display:grid;grid-template-columns:1fr 1fr .8fr;gap:26px;align-items:start}
.tst{border:1px solid rgba(255,255,255,.35);border-radius:12px;padding:26px;font-size:11.5px;line-height:1.7}
.tst .stars{color:#F5B301;letter-spacing:2px;margin-bottom:14px;font-size:13px}
.tst .who{margin-top:22px;font-weight:800;font-size:11px}
.tst-side h3{color:var(--green);font-size:22px;font-weight:800;text-align:right;margin-bottom:12px}
.tst-side p{font-size:11px;text-align:right;opacity:.9;line-height:1.7}
.tst-side .pct{font-size:40px;font-weight:800;text-align:right;margin-top:14px}

/* ---------- overwhelmed ---------- */
.mid{text-align:center;max-width:620px;margin:0 auto}
.mid h2{font-weight:400;font-size:clamp(28px,3.4vw,42px)}
.mid h3{font-weight:700;font-size:20px;margin:6px 0 16px}
.mid p{font-size:12px;line-height:1.8;opacity:.85}
.mid .cta-row{display:flex;gap:14px;justify-content:center;margin-top:28px}

/* ---------- why choose ---------- */
.why{background:var(--teal);border-radius:var(--r);padding:44px;color:#fff;position:relative;overflow:hidden}
.why-grid{display:grid;grid-template-columns:1fr .8fr;gap:34px;align-items:center}
.why h2{font-weight:400;font-size:clamp(24px,3vw,34px)}
.why h2 b{color:var(--green);display:block;font-weight:800}
.why blockquote{font-size:11.5px;font-style:italic;line-height:1.8;margin:18px 0;opacity:.95}
.why .name{font-weight:800;font-size:13px;text-align:right}
.why .role{font-size:10px;text-align:right;opacity:.8;max-width:190px;margin-left:auto;line-height:1.4}
.why img{border-radius:8px}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.faq h2{margin-bottom:24px}
details{border-top:1px solid rgba(1,67,75,.25)}
details:last-of-type{border-bottom:1px solid rgba(1,67,75,.25)}
summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;font-size:13.5px;font-weight:600;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:15px;font-size:20px;font-weight:400}
details[open] summary::after{content:"–"}
details p{padding:0 20px 20px 0;font-size:12px;line-height:1.8;opacity:.88}
details a{color:#0a6b62;font-weight:700}
.aside h3{font-size:19px;font-weight:800;margin-bottom:12px}
.aside p{font-size:12px;line-height:1.8;opacity:.88;margin-bottom:20px}

/* ---------- footer ---------- */
.foot{background:var(--mint-2);padding:56px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.foot p{font-size:10.5px;line-height:1.7;opacity:.85;margin:14px 0}
.foot a{font-size:11.5px;text-decoration:underline}
.foot h5{font-size:11.5px;font-weight:800;margin-bottom:12px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot .brand{margin-bottom:0}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .navlinks{display:none}
  .navlinks.open{display:flex;position:absolute;top:64px;left:0;right:0;background:var(--cream);
    flex-direction:column;padding:20px 28px;gap:18px;border-bottom:1px solid rgba(1,67,75,.1)}
  .navtoggle{display:block}
  .hero-grid,.vid-row,.score-grid,.faq-grid,.why-grid,.feat-grid{grid-template-columns:1fr;gap:32px}
  .vid-row.rev .vid{order:0}
  .feat-col.l{text-align:left}.feat-col.l .ico{margin-left:0}
  .phone{max-width:200px;margin:0 auto}
  .tst-grid{grid-template-columns:1fr}
  .tst-side h3,.tst-side p,.tst-side .pct{text-align:left}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stats{gap:28px}
  .sec{padding:56px 0}
  .why .name,.why .role{text-align:left;margin-left:0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* ==================================================================
   LARGE-SCREEN WIDTHS  (added 2026-09-03)
   The site was built to a fixed 1200px column. On a 2560px monitor that
   left ~675px of dead margin on EACH side - 53% of the screen empty -
   and 14px body copy read as tiny. These two breakpoints widen the
   column and step the type up on big displays only.

   Nothing below 1500px is affected, so phone and laptop layouts are
   untouched. Blog reading width (.post, 760px) is deliberately NOT
   widened - that one is already at the right measure for reading.

   The !important on .hero .lede overrides a hardcoded inline
   max-width:430px in the page HTML.
   ================================================================== */
/* --- 1500-2199px: just widen the column and ease the body copy. -------- */
@media(min-width:1500px){
  :root{--maxw:1400px}
  .lede{font-size:15px;line-height:1.8;max-width:min(100%,78ch)}
  /* 62ch keeps the hero paragraph at a readable measure however wide the
     column gets, and overrides a hardcoded inline max-width:430px. */
  .hero .lede{max-width:62ch!important}
}

/* --- 2200px and up: scale the WHOLE page. -----------------------------
   Widening the column alone was not enough. This site sets type in fixed
   px everywhere - 11px stat labels, 13.5px pillar copy, 11.5px cards,
   14px nav - so scaling .lede and the headings left almost every word on
   the page still tiny on a 4K monitor.

   `zoom` scales all of it at once, exactly as if the reader had hit
   Ctrl+= a few times, and it keeps every proportion the designer chose.
   Supported in Chrome, Edge, Safari and Firefox 126+; browsers that
   ignore it simply get the 1500px layout above, which is still fine.

   --maxw is reduced at each step because zoom multiplies it. Do NOT put
   vw units in these blocks: vw is measured against the unzoomed viewport
   and then gets multiplied again, which blows the layout out.

   Net effect, measured:
     2560px viewport -> 1742px visual column (68%), body copy ~20px
     3200px          -> 2139px visual column (67%), body copy ~23px
     3840px          -> 2380px visual column (62%), body copy ~26px,
                        nav 24px, stat labels 19px                     */
@media(min-width:2200px){ :root{--maxw:1340px} body{zoom:1.30} }
@media(min-width:2900px){ :root{--maxw:1380px} body{zoom:1.55} }
@media(min-width:3500px){ :root{--maxw:1400px} body{zoom:1.70} }

/* ==================================================================
   KIWI-BLOG-STYLES v1  — appended by kiwi-blog-pipeline (build_blog.py)
   These classes were used by the blog HTML but missing from site.css.
   Safe to leave; the pipeline checks for this sentinel and won't dupe.
   ================================================================== */
.post{max-width:760px;margin:0 auto}
.post h1{font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:-.01em}
.post .meta{font-size:12px;font-weight:700;opacity:.55;margin:14px 0 32px;text-transform:uppercase;letter-spacing:.05em}
.post h2{font-size:clamp(20px,2.4vw,27px);font-weight:800;margin:40px 0 12px}
.post h3{font-size:18px;font-weight:800;margin:28px 0 10px}
.post p{font-size:15px;line-height:1.8;margin:0 0 18px}
.post ul,.post ol{margin:0 0 20px;padding-left:22px}
.post li{font-size:15px;line-height:1.75;margin-bottom:10px}
.post li b,.post strong,.post b{font-weight:800}
.post a{color:#0a6b62;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.post a:hover{color:var(--teal)}
.post em,.post i{font-style:italic}
.callout{background:var(--mint);border-radius:var(--r);padding:22px 26px;margin:26px 0}
.callout p{margin:0;font-size:14px;line-height:1.7}
.postnotes{margin-top:44px;padding-top:20px;border-top:1px solid rgba(1,67,75,.15);font-size:12px;line-height:1.7;opacity:.68}
.postnotes p{font-size:12px;margin:0 0 8px}
.endcta{background:var(--teal);color:#fff;border-radius:var(--r);padding:34px;margin:46px 0 8px}
.endcta h3{color:#fff;font-size:21px;font-weight:800;margin-bottom:10px}
.endcta p{color:#fff;opacity:.92;font-size:14px;line-height:1.7;margin:0 0 20px}
.endcta .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:0}
.backlink{display:inline-block;margin-top:28px;font-size:13px;font-weight:700;color:#0a6b62;text-decoration:none}
.backlink:hover{color:var(--teal)}

/* blog hub cards */
.postlist{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:0 auto}
.postcard{display:block;background:#fff;border:1px solid rgba(1,67,75,.1);border-radius:var(--r);
  padding:28px 28px 24px;text-decoration:none;color:var(--ink);transition:.15s;box-shadow:0 1px 0 rgba(1,67,75,.04)}
.postcard:hover{border-color:var(--green);box-shadow:0 10px 30px rgba(1,67,75,.10);transform:translateY(-2px)}
.postcard .meta{font-size:11px;font-weight:700;opacity:.55;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.postcard h2{font-size:19px;font-weight:800;line-height:1.25;margin-bottom:10px}
.postcard p{font-size:13px;line-height:1.65;opacity:.85;margin:0}
.postcard .more{margin-top:16px;font-size:12px;font-weight:800;color:#0a6b62}
@media(max-width:760px){.postlist{grid-template-columns:1fr}}