/* Online Marketing illustrations, within the approved shared page layout. */
.om-points {
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:15px
}
.om-points li {
  padding-left:24px;
  position:relative;
  font-size:15px;
  line-height:1.55;
  color:var(--ink-2)
}
.om-points li::before {
  content:'';
  position:absolute;
  left:1px;
  top:7px;
  width:8px;
  height:8px;
  border:2px solid var(--teal);
  border-radius:50%
}
.om-points b {
  display:block;
  color:var(--ink);
  font-weight:600
}
.om-demo {
  min-width:0;
  font-size:15px;
  line-height:1.5
}
.om-demo * {
  box-sizing:border-box
}
.om-demo button {
  font:inherit;
  cursor:pointer
}
.om-demo button:focus-visible {
  outline:3px solid var(--teal);
  outline-offset:3px
}
.om-demo img {
  display:block;
  max-width:100%
}
.om-demo svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}
.om-caption {
  font-size:13px!important;
  line-height:1.5!important;
  color:var(--ink-3);
  margin:16px 5px 0;
  text-align:center
}
/* The top-level panels (Google card, OKO panel, social post) are cards like the interface cards elsewhere (vignettes.css .vg):
   white, 22px corners, the one shadow. The boxes inside them keep their 12px corners. */
.om-google {
  font-family:Arial,'PingFang SC',sans-serif;
  background:#fff;
  border:0;
  border-radius:22px;
  overflow:hidden;
  color:#202124;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 18px 40px -18px rgba(0,0,0,.45)
}
.om-google p {
  font-size:13px;
  margin:0;
  line-height:1.6;
  color:#3c4043
}
.om-gbrand {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#5f6368
}
.om-gbrand img {
  width:22px;
  height:22px
}
.om-search {
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #dadce0;
  border-radius:24px;
  margin:16px;
  padding:11px 15px;
  font-size:15px;
  box-shadow:0 1px 4px #20212416
}
.om-search svg {
  margin-left:auto;
  color:#5f6368
}
.om-gallery {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:3px;
  height:154px
}
.om-gallery img {
  width:100%;
  height:154px;
  object-fit:cover
}
.om-gbody {
  padding:20px
}
.om-gbody h3 {
  font:400 24px/1.25 Arial,'PingFang SC',sans-serif;
  letter-spacing:0;
  margin:0 0 7px
}
.om-rating {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:13px;
  color:#70757a
}
.om-stars {
  display:flex;
  gap:1px;
  color:#fbbc04
}
.om-stars svg {
  fill:currentColor;
  stroke:none;
  width:14px;
  height:14px
}
.om-gmeta {
  margin:6px 0!important;
  color:#70757a!important
}
.om-gopen {
  color:#188038
}
.om-gactions {
  display:flex;
  gap:7px;
  justify-content:space-between;
  margin:18px 0
}
.om-gaction {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#1a73e8;
  flex:1
}
.om-gaction svg {
  border:1px solid #dadce0;
  border-radius:50%;
  padding:8px;
  width:38px;
  height:38px
}
.om-gaction:first-child svg {
  background:#1a73e8;
  border-color:#1a73e8;
  color:#fff
}
.om-gtabs {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #dadce0;
  font-size:13px;
  padding:0 16px
}
.om-gtabs span {
  padding:12px 2px
}
.om-gtabs .selected {
  color:#1a73e8;
  border-bottom:3px solid #1a73e8
}
.om-grows {
  display:grid;
  gap:12px;
  padding:17px 20px
}
.om-grows>div {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px
}
.om-grows svg {
  width:18px;
  height:18px;
  color:#70757a
}
.om-keywords {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:12px
}
.om-keywords button {
  background:transparent;
  border:1px solid var(--line-strong);
  padding:7px 11px;
  border-radius:99px;
  font-size:13px;
  color:var(--ink-2)
}
.om-keywords button[aria-pressed=true] {
  background:var(--teal);
  color:white;
  border-color:var(--teal)
}
.om-panel {
  background:#fff;
  border:0;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 18px 40px -18px rgba(0,0,0,.45)
}
.om-panel-head {
  padding:17px 20px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  color:var(--ink-3)
}
.om-panel-head strong {
  font-size:15px;
  color:var(--ink)
}
.om-panel-head .om-gbrand {
  color:#5f6368
}
.om-maintain {
  padding:0 20px
}
.om-maintain>div {
  padding:15px 0;
  display:grid;
  grid-template-columns:90px 1fr auto;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line);
  font-size:13px
}
.om-maintain>div:last-child {
  border-bottom:0
}
.om-maintain b {
  font-weight:600;
  hyphens:auto;
  overflow-wrap:anywhere
}
.om-done {
  color:var(--teal);
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap
}
.om-done svg {
  width:16px;
  height:16px
}
.om-service {
  background:var(--teal-soft);
  margin-top:18px;
  padding:18px 20px;
  border-radius:12px;
  font-size:13px
}
.om-service strong {
  display:block;
  font-size:15px;
  margin-bottom:5px
}
.om-service p {
  margin:0;
  color:var(--ink-2);
  line-height:1.55
}
.om-switch {
  display:flex;
  border-bottom:1px solid var(--line);
  margin:0 0 16px;
  gap:20px
}
.om-switch button {
  min-width:0;
  hyphens:auto;
  overflow-wrap:anywhere;
  border:0;
  background:transparent;
  padding:10px 2px;
  color:var(--ink-3);
  font-size:15px;
  border-bottom:3px solid transparent;
  display:flex;
  gap:8px;
  align-items:center
}
.om-switch button[aria-selected=true] {
  color:var(--ink);
  border-color:var(--teal);
  font-weight:600
}
.om-switch button img {
  width:19px;
  height:19px
}
.om-brief {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:18px;
  font-size:13px
}
.om-brief svg {
  color:var(--teal)
}
.om-brief b {
  display:block;
  font-size:15px;
  margin-bottom:3px
}
.om-brief span {
  color:var(--ink-2)
}
.om-posthead {
  padding:16px;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px
}
.om-avatar {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e8f0fe;
  color:#1967d2;
  flex:none;
  font-family:Arial,sans-serif;
  font-size:15px
}
.om-posthead b {
  display:block;
  font-weight:600
}
.om-posthead small {
  font-size:13px;
  color:#70757a
}
.om-posthead>svg {
  margin-left:auto
}
.om-postphoto {
  height:245px;
  width:100%;
  object-fit:cover
}
.om-postcopy {
  padding:16px
}
.om-postcopy h3 {
  font-size:17px;
  margin:0 0 8px;
  font-weight:600
}
.om-postcopy .om-blueaction {
  display:block;
  text-align:center;
  margin-top:15px;
  padding:9px;
  border-top:1px solid #dadce0;
  font-size:13px;
  color:#1a73e8
}
.om-poster {
  position:relative;
  isolation:isolate;
  background:#153d32;
  color:#fff;
  padding:22px 22px 0;
  overflow:hidden
}
.om-poster p {
  font-size:13px;
  letter-spacing:2px;
  color:#f5e3bc
}
.om-poster h3 {
  font-size:28px;
  line-height:1.3;
  margin:10px 0 15px;
  font-weight:600;
  color:#fff
}
.om-poster img {
  width:calc(100% + 44px);
  max-width:none;
  margin:0 -22px;
  height:220px;
  object-fit:cover
}
.om-social {
  background:#fff;
  border:0;
  border-radius:22px;
  overflow:hidden;
  color:#262626;
  font-family:Arial,'PingFang SC',sans-serif;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 18px 40px -18px rgba(0,0,0,.45)
}
.om-socialactions {
  display:flex;
  gap:14px;
  padding:14px 16px 0
}
.om-socialactions svg:last-child {
  margin-left:auto
}
.om-social .om-postcopy {
  font-size:13px
}
.om-social .om-postcopy p {
  margin:0;
  line-height:1.55
}
.om-flowline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--ink-2);
  margin:17px 0 0
}
.om-flowline svg {
  width:16px;
  height:16px;
  color:var(--teal)
}
.om-content [data-om-panel][hidden] {
  display:none!important
}
.om-reviewbody {
  padding:18px 20px
}
.om-reviewbody blockquote {
  font-size:15px;
  line-height:1.6;
  margin:13px 0
}
.om-reviewbody mark {
  background:#fef7e0;
  color:inherit
}
.om-reply {
  margin-top:16px;
  padding:13px 0 0 14px;
  border-top:1px solid #dadce0;
  font-size:13px;
  color:#3c4043
}
.om-reply b {
  display:block;
  margin-bottom:6px
}
.om-analysis {
  margin-top:18px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--white)
}
.om-analysis>strong {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px
}
.om-analysis>strong svg {
  color:var(--teal)
}
.om-analysis dl {
  margin:14px 0 0;
  display:grid;
  grid-template-columns:70px 1fr;
  gap:10px 12px;
  font-size:13px
}
.om-analysis dt {
  font-weight:600;
  color:var(--teal);
  hyphens:auto;
  overflow-wrap:anywhere
}
.om-analysis dd {
  margin:0;
  color:var(--ink-2)
}
.om-reviewchoices {
  display:flex;
  gap:8px;
  margin-top:14px
}
.om-reviewchoices button {
  font-size:13px;
  border:1px solid var(--line-strong);
  border-radius:99px;
  background:none;
  padding:6px 10px;
  color:var(--ink-2)
}
.om-reviewchoices button[aria-pressed=true] {
  background:var(--teal);
  border-color:var(--teal);
  color:white
}
.om-crmbody {
  padding:18px 20px
}
.om-record {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:13px
}
.om-record .om-avatar {
  background:var(--teal-soft);
  color:var(--teal);
  width:40px;
  height:40px
}
.om-record strong {
  display:block;
  font-size:15px
}
.om-record span {
  color:var(--ink-3)
}
.om-recorddata {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-size:13px
}
.om-recorddata span {
  display:block;
  color:var(--ink-3);
  margin-bottom:3px
}
.om-tags {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:14px 0 0
}
.om-tags span {
  border:1px solid var(--line);
  border-radius:99px;
  padding:4px 9px;
  font-size:13px;
  color:var(--ink-2)
}
.om-mail {
  margin-top:16px;
  background:var(--ground);
  border-radius:12px;
  padding:16px;
  font-size:13px
}
.om-mail>small {
  display:block;
  color:var(--ink-3);
  font-size:13px;
  border-bottom:1px solid var(--line);
  padding-bottom:10px
}
.om-mail strong {
  display:block;
  font-size:17px;
  margin:12px 0 8px
}
.om-mail p {
  line-height:1.6;
  font-size:13px;
  margin:0
}
.om-mail .om-mailaction {
  display:inline-block;
  padding:8px 14px;
  border-radius:99px;
  background:var(--teal);
  color:#fff;
  margin-top:14px
}
.om-automation {
  padding:20px
}
.om-autostep {
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 0;
  font-size:13px
}
.om-autostep+.om-autostep {
  border-top:1px solid var(--line)
}
.om-autostep svg {
  color:var(--teal);
  width:24px;
  height:24px
}
.om-autostep b {
  display:block;
  font-size:15px;
  margin-bottom:3px
}
.om-autostep span {
  color:var(--ink-3)
}
.om-autonote {
  margin:14px 0 0;
  font-size:13px;
  color:var(--ink-3)
}
.om-demo .om-reviewtitle {
  font-size:17px;
  margin:0
}
.om-legend {
  font-size:13px;
  color:var(--ink-3);
  margin:0 0 12px
}
.om-ref {
  font-size:13px;
  color:var(--ink-3);
  text-align:center;
  padding:0 16px 24px
}
.om-ref a {
  color:inherit
}
.om-google .om-postphoto {
  height:250px
}
.om-maintain .om-gbrand {
  font-size:13px
}
@media(min-width:900px) {
  .om-content .kp {
    column-gap:64px
  }
  .om-content .kp-visual {
    min-width:0
  }
  .om-content .kp-text p {
    font-size:19px
  }
  .om-content .om-points {
    max-width:400px
  }
  .om-content .om-demo {
    max-width:530px;
    margin-inline:auto
  }
  .om-poster img {
    height:255px
  }
}
@media(max-width:430px) {
  .om-gbody {
    padding:17px
  }
  .om-gallery,.om-gallery img {
    height:125px
  }
  .om-maintain {
    padding:0 14px
  }
  .om-maintain>div {
    grid-template-columns:70px 1fr auto;
    gap:6px
  }
  .om-maintain .om-done {
    font-size:12px
  }
  .om-maintain .om-done svg {
    display:none
  }
  .om-flowline {
    gap:4px;
    font-size:12px
  }
  .om-flowline svg {
    width:12px
  }
  .om-switch {
    gap:16px
  }
  .om-switch button {
    font-size:13px
  }
  .om-postphoto,.om-google .om-postphoto {
    height:215px
  }
  .om-poster img {
    height:210px
  }
  .om-recorddata {
    gap:10px
  }
  .om-gbody h3 {
    font-size:22px
  }
}
.om-content .kp {
  scroll-margin-top:90px
}
/* On a photo (search, reviews): the demo fills the card width (module.css .kp-card) and the Google card is the object resting
   on the picture, so it comes first; the search prompt and its chips follow under it, like the review choices do. */
.om-card .om-demo {
  max-width:none;
  width:100%;
  display:flex;
  flex-direction:column
}
.om-card .om-legend,.om-card .om-keywords {
  order:1
}
.om-card .om-caption {
  order:2
}
.om-card .om-legend {
  margin:16px 0 10px
}
.om-card .om-keywords {
  margin-bottom:0
}
.om-content .kp-text .om-evidence {
  font-size:13px;
  line-height:1.6;
  color:var(--ink-3);
  margin-top:20px
}
.om-evidence a {
  color:inherit;
  text-underline-offset:3px
}
.om-reviewbody .om-review-source {
  font-size:13px;
  color:#70757a;
  border-top:1px solid #dadce0;
  padding-top:12px
}
.om-reviewbody .om-secondary-review {
  margin:8px 0 12px
}
.om-autonote a {
  color:var(--teal);
  text-underline-offset:3px
}