/* Shared template for product, partner, resources and blog pages */

/* ---------- product page template ---------- */
.f-hero{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink);
  grid-template-areas:"fh fh fh fh fh fh fh fb fb fb fb fb" "fh fh fh fh fh fh fh fb fb fb fb fb" "fh fh fh fh fh fh fh z1 z1 z1 z2 z3";}
.f-head{grid-area:fh;background:#fff;padding:52px 44px 44px;display:flex;flex-direction:column;justify-content:center}
.f-head h1{font-size:clamp(2.1rem,3.8vw,3.4rem);max-width:15ch}
.f-head .lede{max-width:50ch}
.crumb{font-size:.86rem;color:var(--ink-soft);margin:0 0 16px}
.crumb a{text-decoration:none;color:var(--ink);font-weight:600;border-bottom:2px solid var(--green)}
.stagetag{font-family:var(--fut);font-weight:600;font-size:.84rem;margin:0 0 14px;display:flex;align-items:center;gap:9px;color:var(--green)}
.stagetag i{width:12px;height:12px;display:block;background:var(--pink)}
.f-big{grid-area:fb;padding:36px 32px;display:flex;flex-direction:column}
.f-big.navy{background:var(--ink);color:#B9CEDE}
.f-big.green{background:var(--green);color:#DBF3EB}
.f-big h2{color:#fff;font-size:clamp(1.5rem,2.2vw,2rem);max-width:17ch}
.f-big > p{margin:14px 0 0;font-size:.98rem;max-width:44ch}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:rgba(255,255,255,.22);margin-top:auto}
.f-big .facts{margin-top:24px}
.facts div{padding:13px 14px}
.f-big.navy .facts div{background:var(--ink)}
.f-big.green .facts div{background:var(--green)}
.facts b{display:block;font-family:var(--fut);font-weight:600;color:#fff;font-size:1.05rem}
.facts span{display:block;font-size:.76rem;margin-top:3px;opacity:.85}
.z1{grid-area:z1;background:var(--mint);min-height:64px}.z2{grid-area:z2;background:var(--panel)}.z3{grid-area:z3;background:var(--pink)}

.fsec{padding:70px 0}
.fsec.alt{background:var(--panel);border-top:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink)}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink)}
.why div{background:#fff;padding:26px 24px 28px}
.why div:nth-child(2){border-top:6px solid var(--green)}
.why h3{font-size:1.14rem;max-width:22ch}
.why p{margin:10px 0 0;font-size:.95rem}

/* bands */
.tiles8{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink)}
.tiles8 div{background:#fff;padding:22px 20px;font-family:var(--fut);font-weight:600;color:var(--ink);font-size:1.15rem}
.tiles8 div:nth-child(1){background:var(--green);color:#fff}
.tiles8 div:nth-child(6){background:var(--ink);color:#fff}
.tiles8 div:nth-child(8){background:var(--mint)}
.steps{display:grid;gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink)}
.steps div{background:#fff;padding:24px 22px 26px}
.steps div:nth-child(1){background:var(--ink)}.steps div:nth-child(1) h3{color:#fff}.steps div:nth-child(1) p{color:#B9CEDE}
.steps div:last-child{background:var(--green)}.steps div:last-child h3{color:#fff}.steps div:last-child p{color:#DBF3EB}
.steps h3{font-size:1.12rem}
.steps p{margin:9px 0 0;font-size:.93rem}
.asks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink)}
.asks div{background:#fff;padding:22px 22px 24px;font-family:var(--fut);font-weight:500;color:var(--ink);font-size:1.02rem;line-height:1.35;border-left:6px solid var(--green)}
.asks div:nth-child(even){border-left-color:var(--mint)}
.asknote{margin-top:14px;font-size:.9rem;color:var(--ink-soft)}

.examples{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink)}
.examples div{background:#fff;padding:24px 22px}
.examples q{display:block;font-family:var(--fut);font-weight:500;color:var(--ink);font-size:1.02rem;line-height:1.35;quotes:none;min-height:3.9em}
.examples b{display:inline-block;margin-top:14px;font-family:var(--fut);font-size:.78rem;color:#fff;background:var(--ink);padding:5px 10px}
.examples div:nth-child(2) b{background:var(--green)}
.examples p{margin:10px 0 0;font-size:.92rem}

/* capabilities with screenshots */
.capgrid{display:grid;grid-template-columns:5fr 7fr;gap:44px;align-items:start}
.caps{display:grid;grid-template-columns:1fr 1fr;gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink)}
.caps div{background:#fff;padding:20px 20px 22px}
.caps h3{font-size:1rem}
.caps p{margin:7px 0 0;font-size:.9rem}
.shotstack{display:grid;gap:var(--rule)}
.caps3only{grid-template-columns:repeat(3,1fr)}
.laws{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--rule);background:var(--ink);border:var(--rule) solid var(--ink)}
.laws div{background:#fff;padding:22px 22px 24px;border-top:6px solid var(--ink)}
.laws div:nth-child(-n+3){border-top-color:var(--green)}
.laws h3{font-size:1.05rem}
.laws p{margin:8px 0 0;font-size:.92rem}
.lawnote{margin-top:14px;font-size:.84rem;color:var(--ink-soft)}
.frame{display:block;border:var(--rule) solid var(--ink);background:#fff;overflow:hidden}
.frame img{width:100%;height:auto;display:block}
.frame.big{max-height:460px}.frame.big img{object-fit:cover;object-position:top}
.frame.small{max-height:260px}.frame.small img{object-fit:cover;object-position:top}
.frame:hover{border-color:var(--green)}
.shotnote{font-size:.78rem;color:var(--ink-soft);margin-top:8px}

/* product family */
.family{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.family a{font-family:var(--fut);font-weight:600;font-size:.9rem;text-decoration:none;color:var(--ink);background:#fff;border:2px solid var(--line);padding:10px 14px}
.family a:hover{border-color:var(--green)}
.family a.here{background:var(--ink);color:#fff;border-color:var(--ink)}

.pclose{background:var(--ink);color:#B9CEDE;padding:70px 0}
.pclose h2{color:#fff;font-size:clamp(1.8rem,3vw,2.4rem);max-width:20ch}
.pcg{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}

@media (max-width:1080px){
  .f-hero{grid-template-columns:repeat(6,1fr);grid-template-areas:"fh fh fh fh fh fh" "fb fb fb fb fb fb" "z1 z1 z1 z1 z2 z3"}
  .why,.asks,.examples,.laws{grid-template-columns:1fr}
  .caps3only{grid-template-columns:1fr 1fr}
  .tiles8{grid-template-columns:repeat(2,1fr)}
  .capgrid,.pcg{grid-template-columns:1fr;gap:28px}
}
@media (max-width:760px){
  .f-hero{grid-template-columns:1fr;grid-template-areas:"fh" "fb"}.z1,.z2,.z3{display:none}
  .f-head{padding:36px 22px}
  .caps,.caps3only{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr!important}
}