@font-face {
  font-family:"Archivo Black";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/archivo-black.ttf') format('truetype');
}
/* Compact light product explainer. White reuses the existing site surface. */
body.home-page.brand-identity.type-system .home-tablet-intro {
  padding:32px 24px;
  background:#fff;
  scroll-margin-top:100px;
}
body.home-page.brand-identity.type-system .home-tablet-panel {
  --tablet-panel-surface:#FAF8F2;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  grid-template-areas:"visual copy" "visual legend";
  align-items:center;
  gap:24px 56px;
  box-sizing:border-box;
  width:100%;
  max-width:1120px;
  margin-inline:auto;
  padding:32px 40px;
  border:0;
  border-radius:12px;
  background:#FAF8F2;
  color:#1F3D2E;
  box-shadow:none;
}
body.home-page.brand-identity.type-system .home-tablet-panel ::selection { background:#1F3D2E; color:#FAF8F2; }
body.home-page.brand-identity.type-system .home-tablet-heading {
  grid-area:copy;
  min-width:0;
  width:100%;
  max-width:none;
}
body.home-page.brand-identity.type-system .home-tablet-heading h2 {
  max-width:24ch;
  margin:0 0 16px;
  color:#1F3D2E;
  font:400 36px/1.2 "Archivo Black",sans-serif!important;
  letter-spacing:-.02em;
  text-transform:none;
  text-wrap:balance;
}
body.home-page.brand-identity.type-system .home-tablet-heading p {
  max-width:62ch;
  margin:0;
  color:#1F3D2E;
  font:400 16px/1.55 Archivo,sans-serif!important;
  letter-spacing:normal;
  text-wrap:pretty;
}
body.home-page.brand-identity.type-system .home-tablet-heading p + p { margin-top:10px; font-size:16px!important; line-height:1.55!important; }
body.home-page.brand-identity.type-system .home-tablet-heading strong { color:#1F3D2E; font-weight:600; }
body.home-page.brand-identity.type-system .home-tablet-visual {
  grid-area:visual;
  width:100%;
  max-width:280px;
  margin:0;
  justify-self:center;
  align-self:center;
}
body.home-page.brand-identity.type-system .home-tablet-image { position:relative; background:transparent; }
body.home-page.brand-identity.type-system .home-tablet-image img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1698/926;
  object-fit:contain;
  opacity:1;
  visibility:visible;
  mix-blend-mode:normal;
  filter:none;
  -webkit-mask-image:none;
  mask-image:none;
}
body.home-page.brand-identity.type-system .home-tablet-key {
  display:grid;
  place-items:center;
  flex:none;
  box-sizing:border-box;
  width:22px;
  height:22px;
  border:0;
  border-radius:50%;
  background:#1F3D2E;
  color:#FAF8F2;
  font:600 12px/1 Archivo,sans-serif;
  letter-spacing:0;
  box-shadow:none;
}
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;
  border:1px solid #FAF8F2;
  background:#1F3D2E;
  color:#FAF8F2;
  font-size:12px;
  box-shadow:none;
}
body.home-page.brand-identity.type-system .home-tablet-definitions {
  grid-area:legend;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-self:start;
  justify-self:center;
  width:100%;
  max-width:none;
  gap:16px;
  margin:0;
  padding:0;
  border:0;
  list-style:none;
}
body.home-page.brand-identity.type-system .home-tablet-definitions li {
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  border:0;
}
body.home-page.brand-identity.type-system .home-tablet-definitions p {
  margin:0;
  color:#1F3D2E;
  font:600 15px/1.4 Archivo,sans-serif!important;
  letter-spacing:normal;
}
@media (min-width:801px) and (max-width:1100px) {
  body.home-page.brand-identity.type-system .home-tablet-panel { grid-template-columns:220px minmax(0,1fr); column-gap:32px; padding:32px; }
}
@media (max-width:800px) {
  body.home-page.brand-identity.type-system .home-tablet-intro { padding:24px 20px; }
  body.home-page.brand-identity.type-system .home-tablet-panel {
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"copy" "visual" "legend";
    max-width:560px;
    gap:24px;
    padding:24px;
  }
  body.home-page.brand-identity.type-system .home-tablet-heading h2 { max-width:none; font-size:28px!important; margin-bottom:12px; }
  body.home-page.brand-identity.type-system .home-tablet-visual { max-width:240px; }
  body.home-page.brand-identity.type-system .home-tablet-definitions { grid-template-columns:minmax(0,1fr); max-width:260px; gap:12px; }
}
@media (max-width:380px) {
  body.home-page.brand-identity.type-system .home-tablet-intro { padding-inline:16px; }
  body.home-page.brand-identity.type-system .home-tablet-panel { padding:24px 20px; }
}

body.home-page.brand-identity.type-system .home-tablet-title-term { white-space:nowrap; }
@media (max-width:380px) {
  body.home-page.brand-identity.type-system .home-tablet-heading h2 { font-size:24px!important; }
}