/* What is TABCOTE: a continuous text column beside the small cutaway. */
body.home-page.brand-identity.type-system .home-tablet-intro {
  padding:36px 24px 24px;
  scroll-margin-top:100px;
}
body.home-page.brand-identity.type-system .home-tablet-panel {
  --tablet-panel-surface:#f3f6ef;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,320px);
  align-items:center;
  gap:48px;
  width:100%;
  max-width:1120px;
  padding:32px 48px;
  border-radius:16px;
  background:var(--tablet-panel-surface);
}
body.home-page.brand-identity.type-system .home-tablet-content {
  display:grid;
  gap:24px;
  min-width:0;
  max-width:56ch;
}
body.home-page.brand-identity.type-system .home-tablet-heading {
  min-width:0;
}
body.home-page.brand-identity.type-system .home-tablet-heading h2 {
  margin:0 0 8px;
  color:var(--forest);
}
body.home-page.brand-identity.type-system .home-tablet-heading p {
  max-width:55ch;
  margin:0;
  color:var(--body);
  font:400 14px/1.65 var(--site-font-body);
  letter-spacing:normal;
}
body.home-page.brand-identity.type-system .home-tablet-visual {
  width:100%;
  max-width:240px;
  margin:0;
  justify-self:center;
}
body.home-page.brand-identity.type-system .home-tablet-image {
  position:relative;
  isolation:isolate;
  background:var(--tablet-panel-surface);
}
body.home-page.brand-identity.type-system .home-tablet-image img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2816/1536;
  object-fit:contain;
  mix-blend-mode:multiply;
  filter:brightness(1.065) saturate(.85);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(180deg,transparent,#000 15%,#000 86%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(180deg,transparent,#000 15%,#000 86%,transparent);
  mask-composite:intersect;
}
body.home-page.brand-identity.type-system .home-tablet-key {
  display:grid;
  place-items:center;
  flex:none;
  width:24px;
  height:24px;
  border:0;
  border-radius:50%;
  background:var(--forest);
  color:#fff;
  font:500 13px/1 var(--site-font-body);
  letter-spacing:0;
}
body.home-page.brand-identity.type-system .home-tablet-callout {
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
body.home-page.brand-identity.type-system .home-tablet-callout-core { left:37%; top:57%; }
body.home-page.brand-identity.type-system .home-tablet-callout-coating { left:71%; top:62%; }
body.home-page.brand-identity.type-system .home-tablet-callout .home-tablet-key { width:22px; height:22px; }
body.home-page.brand-identity.type-system .home-tablet-copy {
  min-width:0;
}
body.home-page.brand-identity.type-system .home-tablet-definitions {
  display:grid;
  gap:20px;
  margin:0;
  padding:0;
  list-style:none;
}
body.home-page.brand-identity.type-system .home-tablet-definitions li {
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  align-items:start;
  gap:12px;
}
body.home-page.brand-identity.type-system .home-tablet-definitions .home-tablet-key { margin-top:0; }
body.home-page.brand-identity.type-system .home-tablet-definitions p {
  max-width:55ch;
  margin:0;
  color:var(--body);
  font:400 14px/1.65 var(--site-font-body);
  letter-spacing:normal;
}
body.home-page.brand-identity.type-system .home-tablet-intro + #formulas { padding-top:40px; }
@media(min-width:801px) and (max-width:1100px) {
  body.home-page.brand-identity.type-system .home-tablet-panel { padding:32px; column-gap:32px; grid-template-columns:minmax(0,1fr) 260px; }
}
@media(max-width:800px) {
  body.home-page.brand-identity.type-system .home-tablet-intro { padding:28px 20px 20px; }
  body.home-page.brand-identity.type-system .home-tablet-panel {
    grid-template-columns:minmax(0,1fr);
    gap:24px;
    padding:28px;
    border-radius:12px;
  }
  body.home-page.brand-identity.type-system .home-tablet-content { width:100%; max-width:55ch; justify-self:center; gap:20px; }
  body.home-page.brand-identity.type-system .home-tablet-visual { max-width:220px; }
  body.home-page.brand-identity.type-system .home-tablet-definitions { gap:20px; }
  body.home-page.brand-identity.type-system .home-tablet-intro + #formulas { padding-top:32px; }
}
@media(max-width:380px) {
  body.home-page.brand-identity.type-system .home-tablet-panel { padding:24px 20px; }
}