/* Business insights: light section, four tabs, one card per tab (copy on the left, photo with a finding diagram on the right) */
.ins{--ins-bg:#F7F7F5;--ins-card:#FBFBFA;--ins-line:#ECEDEB;--ins-ink:#121614;--ins-mute:#6B7079;--ins-soft:#B8BBB7;--ins-tab-on:#E1F3E6;--ins-green:#00683C;--ins-wire:#037F48;
  background:var(--ins-bg);color:var(--ins-ink);padding:var(--section-y) var(--gutter);position:relative;z-index:2}
.ins-wrap{max-width:var(--container);margin:0 auto}
.ins-head{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start;margin-bottom:var(--head-gap)}
.ins-head h2{font-size:var(--h2);line-height:1.06;letter-spacing:-.03em;font-weight:500;text-wrap:balance}
.ins-head p{font-size:var(--lead);line-height:1.6;color:var(--ins-mute);max-width:36em;padding-top:8px}

/* tabs */
.ins-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:var(--block-gap)}
.ins-tab{all:unset;cursor:pointer;display:block;background:#fff;border:1px solid var(--ins-line);border-radius:var(--r-md);padding:24px;transition:background .3s,border-color .3s}
.ins-tab b{display:block;font-size:var(--lead);font-weight:500;letter-spacing:-.01em}
.ins-tab small{display:block;margin-top:8px;font-size:var(--label);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ins-mute)}
.ins-tab:hover{border-color:#9FD7B1}
.ins-tab[aria-selected="true"]{background:var(--ins-tab-on);border-color:rgba(0,104,60,.08)}
.ins-tab[aria-selected="true"] b{color:var(--ins-green)}
.ins-tab:focus-visible{outline:2px solid var(--ins-wire);outline-offset:2px}

/* card */
.ins-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,3vw,40px);background:var(--ins-card);border:1px solid var(--ins-line);border-radius:var(--r-lg);padding:clamp(16px,1.6vw,24px)}
.ins-copy{padding:clamp(16px,2.2vw,32px) clamp(8px,1.6vw,24px);display:flex;flex-direction:column;min-width:0}
.ins-label{font-size:var(--label);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ins-mute)}
.ins-copy h3{font-size:var(--h3-lg);line-height:1.1;letter-spacing:-.025em;font-weight:500;margin-top:16px;text-wrap:balance}
.ins-body{font-size:var(--lead);line-height:1.6;color:var(--ins-mute);margin-top:16px;max-width:34em}
.ins-copy hr{border:0;border-top:1px solid var(--ins-line);margin:clamp(24px,2.6vw,32px) 0}
.ins-stat{display:flex;align-items:center;gap:clamp(20px,2.4vw,40px)}
.ins-num{font-size:var(--stat);font-weight:500;letter-spacing:-.04em;line-height:.9;white-space:nowrap;font-variant-numeric:tabular-nums}
.ins-num .a{color:var(--ins-green)}.ins-num .s{display:inline-block;position:relative;width:.3em;height:.7em;vertical-align:baseline;overflow:hidden;color:transparent;margin:0 .1em}
/* the divider is a drawn slanted bar, as tall as the digits; insights.js sets its exact height and side margins */
.ins-num .s::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:.045em;background:var(--ins-soft);border-radius:1px;transform:translateX(-50%) skewX(-20deg)}.ins-num .u{color:var(--ins-soft);font-size:.55em;margin-left:.06em;letter-spacing:-.01em}
.ins-stat p{font-size:var(--lead);line-height:1.45;color:var(--ins-mute);max-width:16em}
.ins-quote{display:grid;grid-template-columns:auto auto 1fr;gap:clamp(16px,2vw,24px);align-items:center;margin-top:auto;padding-top:clamp(24px,3vw,40px)}
.ins-quote img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.ins-quote i{display:block;width:1px;align-self:stretch;background:var(--ins-line)}
.ins-quote p{font-size:var(--lead);line-height:1.45}
.ins-quote small{display:block;margin-top:8px;font-size:var(--label);letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ins-mute)}

/* photo with the finding diagram */
/* dot grid panel */
.ins-visual{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:clamp(420px,34vw,520px);background:#EEEEEC}
/* dots are spaced evenly so the outer rows sit the same small distance from every edge */
.ins-visual::before{content:"";position:absolute;inset:2px;pointer-events:none;background-image:radial-gradient(rgba(18,22,20,.16) 1px,transparent 1.2px);background-size:12px 12px;background-repeat:space}
.ins-dia{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(16px,.24fr) minmax(120px,.7fr) minmax(16px,.24fr) minmax(0,1.2fr);align-items:center;padding:clamp(16px,1.8vw,32px)}
.ins-wires{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.ins-wires path{fill:none;stroke-width:1.8}
.ins-wires .in{stroke:#A3DAB4}
.ins-wires .out{stroke:var(--ins-green)}
.ins-wires circle,.ins-wires polygon{fill:var(--ins-green)}
.ins-in{display:flex;flex-direction:column;gap:12px;position:relative;z-index:2}
.ins-q{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r-sm);padding:8px 16px 8px 8px;box-shadow:0 1px 2px rgba(18,22,20,.06);font-size:clamp(12.5px,.95vw,14px);line-height:1.4;color:#2E3330}
.ins-q img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.ins-node{grid-column:3;position:relative;z-index:2;background:#D9F4E1;border-radius:12px;padding:24px 16px;text-align:center;font-size:clamp(14px,1.05vw,16px);font-weight:500;line-height:1.3;color:#14492D;text-wrap:balance}
.ins-node svg{display:block;width:36px;height:36px;margin:0 auto 12px;color:var(--ins-green)}
.ins-out{grid-column:5;display:flex;flex-direction:column;gap:16px;position:relative;z-index:2}
.ins-e{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r-sm);padding:16px 14px;box-shadow:0 1px 2px rgba(18,22,20,.06)}
.ins-e svg{width:32px;height:32px;flex:none;color:var(--ins-green)}
.ins-e b{display:block;font-size:clamp(12.5px,.95vw,14px);font-weight:500;white-space:nowrap}
.ins-e small{display:block;margin-top:4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ins-mute)}
.ins-tag{position:absolute;right:16px;bottom:12px;z-index:3;font-size:12px;color:var(--ins-mute);background:#fff;border-radius:999px;padding:4px 10px}

/* tab change: copy and diagram ease in */
@keyframes ins-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ins-draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.ins-card.in .ins-copy>*{animation:ins-up .6s cubic-bezier(.22,1,.36,1) both}
.ins-card.in .ins-copy>*:nth-child(2){animation-delay:.05s}.ins-card.in .ins-copy>*:nth-child(3){animation-delay:.1s}.ins-card.in .ins-copy>*:nth-child(5){animation-delay:.15s}.ins-card.in .ins-copy>*:nth-child(6){animation-delay:.2s}
.ins-card.in .ins-q,.ins-card.in .ins-node,.ins-card.in .ins-e{animation:ins-up .55s cubic-bezier(.22,1,.36,1) both}
.ins-card.in .ins-wires path{stroke-dasharray:var(--len);animation:ins-draw .7s cubic-bezier(.65,0,.35,1) both}
@media (prefers-reduced-motion:reduce){.ins-card.in *{animation:none!important}}

/* tablet: tabs in two rows of two, card stacks */
@media(max-width:1100px){.ins-card{grid-template-columns:1fr}.ins-head{grid-template-columns:1fr;gap:16px}}
@media(max-width:900px){.ins-tabs{grid-template-columns:repeat(2,1fr)}}
/* phones: the diagram stacks over the photo, without wires */
@media(max-width:760px){
  .ins-tab{padding:16px}.ins-tab small{font-size:11px}
  .ins-visual{min-height:0}
  .ins-dia{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:16px 16px 48px}
  .ins-wires{display:none}
  .ins-node{display:flex;align-items:center;gap:10px;text-align:left;padding:12px 14px}.ins-node svg{margin:0;width:24px;height:24px}
  .ins-quote{grid-template-columns:auto 1fr}.ins-quote i{display:none}.ins-quote img{width:52px;height:52px}
}