/* Generated editorial scenes — scoped additions to the existing design. */
.scene-image{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.pay-card.pay-card-illustrated,.pay-card.pay-card-illustrated:hover{
  padding:0;overflow:hidden;border:1px solid #dfebe0;border-radius:22px;
  background:linear-gradient(155deg,#f5fff1,#def5dc);
  box-shadow:0 12px 30px rgba(32,35,33,.045);
}
.pay-card-illustrated .pay-scene{margin:10px 10px 0;border-radius:15px;overflow:hidden;background:#f3f8f0}
.pay-card-illustrated .pay-copy{padding:22px 22px 26px}
.pay-card-illustrated .pay-copy h3{font-size:21px;line-height:1.25;margin-bottom:10px}
.pay-card-illustrated .pay-copy p{font-size:14px;line-height:1.6}
.article-head.scene-head{grid-template-columns:minmax(0,1fr) minmax(300px,36%);gap:40px}
.scene-head .article-art{width:100%;border-radius:28px;overflow:hidden;background:#f3f8f0;box-shadow:0 20px 55px -32px rgba(39,76,47,.3)}
.scene-head .article-art:before,.scene-head .head-dots{display:none}
.scene-head .scene-hero{width:100%;height:auto;aspect-ratio:3/2}
main.container .guide.guide-illustrated{
  grid-template-columns:170px minmax(0,1fr) 20px;gap:20px;padding:12px 18px 12px 12px;min-width:0;
  background:#fcfefb;border-radius:22px;overflow:hidden;
}
.guide-illustrated .guide-scene{border-radius:14px;overflow:hidden;background:#f3f8f0}
main.container .guide.guide-illustrated h3{font-size:20px}
main.container .guide.guide-illustrated p{font-size:13px;line-height:1.6}
main.container .guide.guide-illustrated:hover{background:#f1faee;border-color:#b8d9bc}
@media(max-width:1100px){
  main.container .guide.guide-illustrated{grid-template-columns:120px minmax(0,1fr) 16px;gap:14px}
  .article-head.scene-head{grid-template-columns:minmax(0,1fr) 34%;gap:28px}
}
@media(max-width:760px){
  main.container .guide.guide-illustrated{grid-template-columns:100px minmax(0,1fr) 16px;gap:12px}
}
@media(max-width:650px){
  .article-head.scene-head{display:flex;flex-direction:column;align-items:stretch;gap:24px;padding-bottom:32px}
  .scene-head .article-copy{display:block}
  main.container .scene-head .lead{font-size:16px}
  .scene-head .article-art{width:100%;max-width:440px;align-self:center;border-radius:22px}
  .scene-head .article-meta{margin-top:18px}
  .pay-card-illustrated .pay-copy{padding:18px 20px 24px}
  main.container .guide.guide-illustrated{grid-template-columns:112px minmax(0,1fr) 16px;gap:14px;padding:10px 14px 10px 10px}
  main.container .guide.guide-illustrated h3{font-size:18px}
  main.container .guide.guide-illustrated p{font-size:12px}
}
@media(max-width:370px){
  main.container .guide.guide-illustrated{grid-template-columns:88px minmax(0,1fr) 14px;gap:10px}
}
@media print{.pay-scene,.guide-scene{display:none}main.container .guide.guide-illustrated{display:block}}

/* Brand marks from the service catalog, beside each scenario. */
main.container .guide.guide-logo{
  grid-template-columns:96px minmax(0,1fr) 28px;
  gap:14px;
  align-items:center;
}
main.container .guide.guide-logo>span.guide-mark{
  padding:0;
  width:96px;
  font:inherit;
  color:inherit;
  line-height:0;
}
main.container .guide.guide-logo .guide-mark{
  display:grid;
  place-items:center;
  width:96px;
  height:47px;
  border-radius:12px;
  background:#f7faf6;
  border:1px solid #e3eee4;
  overflow:hidden;
}
main.container .guide.guide-logo .guide-mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
@media(max-width:900px){
  main.container .guide.guide-logo{grid-template-columns:84px minmax(0,1fr) 28px;gap:12px}
  main.container .guide.guide-logo>span.guide-mark,
  main.container .guide.guide-logo .guide-mark{width:84px;height:41px}
}
@media(max-width:650px){
  main.container .guide.guide-logo{grid-template-columns:96px minmax(0,1fr) 34px;gap:12px}
  main.container .guide.guide-logo>span.guide-mark,
  main.container .guide.guide-logo .guide-mark{width:96px;height:47px}
}

/* Character scenes continue the original Ice Age mascot artwork. */
.scene-image{object-fit:contain}
.pay-card-illustrated .pay-scene{background:transparent;border-radius:0;overflow:visible}
.scene-head .article-art{background:transparent;border-radius:0;overflow:visible;box-shadow:none}
.scene-head .article-art:before{display:block;width:90%;aspect-ratio:1;background:radial-gradient(ellipse,#effbf0 0%,#effbf080 42%,transparent 70%);z-index:-1}
.guide-illustrated .guide-scene{background:transparent;border-radius:0;overflow:visible}

/* Catalog lookup on the purchases page. */
.service-find{margin:0 0 18px;max-width:560px}
.service-find input{display:block;width:100%;min-height:52px;margin:0;padding:12px 16px;border:1px solid #e3e8e4;border-radius:16px;background:#fff;box-shadow:0 8px 18px rgba(32,35,33,.05);color:#171a18;font-family:Manrope,Arial,sans-serif;font-weight:560;font-size:16px;letter-spacing:-.014em}
.service-find input::placeholder{color:#8a918c}
.service-find input:focus{outline:3px solid #348645;outline-offset:3px}
.service-find-empty{margin:14px 0 0;color:#243028}
.service-find-empty[hidden]{display:none}
.service-find-empty p{margin:0}
.service-find-note{margin-top:12px;max-width:46ch;font-weight:560;line-height:1.55;color:#243028}
#vse > .eyebrow{margin:0 0 12px}
#vse .catalog-note{margin:28px 0 0;color:#3a423e}
#vse.is-empty .catalog-note{display:none}
#vse .guide.is-out{display:none}
#vse.is-empty .guide-grid{display:none}

/* Equal round brand badges: the mark sits on its own circle. */
#temy .guide.guide-illustrated{grid-template-columns:92px minmax(0,1fr) 16px}
main.container .guide-faces{
  display:flex;
  align-items:center;
  margin-top:8px;
}
main.container .guide-faces span{
  --face:54px;
  position:relative;
  display:block;
  flex:0 0 var(--face);
  width:var(--face);
  height:var(--face);
  margin-left:calc(var(--face) * -.22);
  border-radius:50%;
  overflow:hidden;
  background:transparent;
}
main.container .guide-faces span:first-child{margin-left:0;z-index:1}
main.container .guide-faces span:nth-child(2){z-index:2}
main.container .guide-faces span:nth-child(3){z-index:3}
main.container .guide-faces span:nth-child(4){z-index:4}
main.container .guide-faces img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
@media(max-width:650px){
  #temy .guide.guide-illustrated{grid-template-columns:84px minmax(0,1fr) 14px}
  main.container .guide-faces span{--face:48px}
}