/* SCARAB HEART V58 — targeted visual corrections, preserves app functions and card frame ratios. */
:root{--v58-gold:#eac27c;--v58-cyan:#68dee6}

/* Feature gallery: visible, complete screenshots without the previous 96px crop. */
body.temple58 .feature-matrix{gap:19px;align-items:stretch}
body.temple58 .feature-card{
  box-sizing:border-box;display:flex!important;flex-direction:column!important;
  height:auto!important;min-height:478px!important;
  padding:22px 22px 20px!important;gap:10px!important;
  overflow:visible!important; isolation:isolate;
  border-radius:14px;
  background:radial-gradient(ellipse at 90% 95%,rgba(13,102,110,.12),transparent 65%),linear-gradient(157deg,#13232b 0%,#081219 60%,#060c11 100%);
  border:1px solid rgba(232,182,107,.62)!important;
  box-shadow:0 17px 30px rgba(0,0,0,.23),inset 0 0 0 1px rgba(250,216,156,.04);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
body.temple58 .feature-card::before{content:'';position:absolute;inset:5px;border-radius:9px;border:1px solid rgba(235,194,120,.10);z-index:-1;pointer-events:none}
body.temple58 .feature-card:hover,body.temple58 .feature-card:focus-within{
  transform:translateY(-4px);border-color:#ffdfa1!important;
  box-shadow:0 20px 37px rgba(0,0,0,.43),0 0 22px rgba(230,171,85,.13),inset 0 0 0 1px rgba(253,222,168,.12);
}
body.temple58 .feature-card > span{align-self:flex-end;color:#8fa6b2;letter-spacing:.1em;font-size:10px}
body.temple58 .feature-card .feature-icon{flex:0 0 65px!important;margin-top:-18px;position:relative}
body.temple58 .feature-card h3{font-size:19px!important;line-height:1.4!important;margin:2px 0 0!important;color:#ffe3af}
body.temple58 .feature-card p{font-size:13px!important;line-height:1.7!important;min-height:44px;max-width:none;color:#bbced3}
body.temple58 .feature-card > a{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;min-height:22px;margin:0;color:#80e6e6}
body.temple58 .v58-preview{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;flex:0 0 auto!important;margin-top:auto!important;
  width:100%;height:235px;min-height:235px;max-height:none;box-sizing:border-box;
  padding:14px 12px 31px;border:1px solid rgba(226,182,101,.33);
  border-radius:10px;background:radial-gradient(ellipse at 50% 43%,rgba(28,87,105,.2),transparent 70%),linear-gradient(160deg,#091b25,#041019 75%);
  cursor:zoom-in;transition:border-color .2s,box-shadow .2s;
}
body.temple58 .v58-preview:hover,body.temple58 .v58-preview:focus-visible{border-color:#edc078;box-shadow:inset 0 0 0 1px rgba(240,203,148,.13),0 0 19px rgba(40,216,218,.09)}
body.temple58 .v58-preview::before{content:'';position:absolute;inset:5px;border:1px solid rgba(237,196,118,.12);border-radius:6px;pointer-events:none}
body.temple58 .v58-preview>img{
  display:block!important;position:relative!important;
  width:100%!important;max-width:100%!important;height:184px!important;max-height:184px!important;
  object-fit:contain!important;object-position:center!important;
  flex:0 0 auto;aspect-ratio:auto!important;margin:0!important;
  border:0!important;box-shadow:none!important;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4));
  transform:none!important;
}
body.temple58 .v58-preview-caption{position:absolute;bottom:7px;left:0;right:0;text-align:center;color:#b9cfd3;font-size:11px;letter-spacing:.035em}

/* Exactly the existing four horizontal frames: no tall cards; background artwork belongs to the frame. */
body.temple58 .v51-steps{margin-top:29px;margin-bottom:31px}
body.temple58 .v51-step-items{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:13px!important;align-items:stretch!important}
body.temple58 .v51-step.v53-step.v58-step{
  box-sizing:border-box!important;position:relative!important;display:block!important;
  width:100%!important;height:116px!important;min-height:116px!important;max-height:116px!important;
  padding:0!important;margin:0!important;overflow:hidden!important;
  border:1px solid #c29350!important;border-radius:6px!important;
  background-color:#061115!important;
  background-image:linear-gradient(90deg,rgba(3,9,13,.99) 0%,rgba(3,9,13,.91) 37%,rgba(3,9,13,.48) 60%,rgba(3,9,13,.05) 88%),var(--step-bg)!important;
  background-size:100% 100%,auto 100%!important;
  background-position:center,right center!important;
  background-repeat:no-repeat!important;
  box-shadow:inset 0 0 0 3px rgba(2,7,10,.82),inset 0 0 0 4px rgba(243,200,125,.19),0 7px 21px rgba(0,0,0,.25);
  transition:border-color .2s,box-shadow .2s,filter .2s!important;
}
body.temple58 .v51-step.v53-step.v58-step.step-03{
  --step-bg:url('/images/egypt/seth-chibi-raw.png');
  background-image:linear-gradient(90deg,rgba(3,9,13,.99) 0%,rgba(3,9,13,.90) 36%,rgba(3,9,13,.34) 64%,rgba(3,9,13,.08) 89%),url('/images/egypt/seth-chibi-raw.png')!important;
  background-size:100% 100%,auto 100%!important;
}
body.temple58 .v51-step.v53-step.v58-step:hover,
body.temple58 .v51-step.v53-step.v58-step:focus-visible{filter:brightness(1.13);border-color:#ffe2ad!important;box-shadow:inset 0 0 0 3px #081115,inset 0 0 0 4px rgba(249,211,147,.32),0 0 18px rgba(224,174,87,.2)}
body.temple58 .v51-step.v53-step.v58-step::after{inset:5px!important;z-index:4;border-radius:2px!important;pointer-events:none}
body.temple58 .v51-step.v53-step.v58-step>strong{
  display:block!important;position:absolute!important;left:12px!important;top:30px!important;
  right:auto!important;bottom:auto!important;order:0!important;
  width:43px!important;height:auto!important;margin:0!important;padding:0!important;
  background:transparent!important;border:0!important;
  font:900 30px/1 Georgia,serif!important;color:#ffe0a2!important;
  text-align:left!important;text-shadow:0 2px 8px #000!important;
}
body.temple58 .v51-step.v53-step.v58-step>div{
  display:block!important;position:absolute!important;
  left:55px!important;top:50%!important;right:104px!important;bottom:auto!important;
  width:auto!important;min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;
  transform:translateY(-50%)!important;
  margin:0!important;padding:0!important;flex:none!important;align-self:auto!important;
  text-align:left!important;background:transparent!important;border:0!important;
}
body.temple58 .v51-step.v53-step.v58-step h3{
  display:block!important;white-space:nowrap!important;overflow:visible!important;
  font-size:15px!important;line-height:1.25!important;font-weight:900!important;
  margin:0 0 6px!important;color:#ffe9c0!important;text-shadow:0 2px 8px #000!important;
}
body.temple58 .v51-step.v53-step.v58-step p{
  display:block!important;white-space:normal!important;overflow:hidden!important;overflow-wrap:normal!important;
  font-size:11px!important;line-height:1.35!important;margin:0!important;
  color:#d5d7d5!important;text-shadow:0 2px 7px #000!important;
  display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
body.temple58 .v51-step.v53-step.v58-step>img{display:none!important}
/* Guarantee text doesn't collapse into 1-character vertical columns as the grid shrinks. */
@media(min-width:761px) and (max-width:1100px){
  body.temple58 .v51-step.v53-step.v58-step>div{left:45px!important;right:80px!important}
  body.temple58 .v51-step.v53-step.v58-step>strong{left:9px!important;font-size:26px!important}
  body.temple58 .v51-step.v53-step.v58-step h3{font-size:13px!important}
  body.temple58 .v51-step.v53-step.v58-step p{font-size:10px!important}
}
@media(max-width:760px){
  body.temple58 .v51-step-items{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body.temple58 .v51-step.v53-step.v58-step{height:115px!important;min-height:115px!important;max-height:115px!important}
  body.temple58 .v51-step.v53-step.v58-step>strong{left:10px!important;top:26px!important;font-size:26px!important;width:37px!important}
  body.temple58 .v51-step.v53-step.v58-step>div{left:42px!important;right:52px!important;top:52%!important}
  body.temple58 .v51-step.v53-step.v58-step h3{font-size:13px!important;margin-bottom:5px!important}
  body.temple58 .v51-step.v53-step.v58-step p{font-size:10px!important;line-height:1.35!important}
  body.temple58 .feature-card{min-height:432px!important;padding:18px 18px 18px!important}
  body.temple58 .feature-card .feature-icon{margin-top:-15px}
  body.temple58 .v58-preview{height:213px;min-height:213px;padding:10px 10px 28px}
  body.temple58 .v58-preview>img{height:171px!important;max-height:171px!important}
}
@media(max-width:370px){
  body.temple58 .v51-step.v53-step.v58-step>div{left:38px!important;right:37px!important}
  body.temple58 .v51-step.v53-step.v58-step h3{font-size:12px!important}
  body.temple58 .v51-step.v53-step.v58-step p{font-size:9px!important}
}
/* Modal: actual screenshot at natural aspect ratio, never cropped. */
body.temple58 .v58-lightbox{background:linear-gradient(140deg,#0c1d26,#050b10);border:1px solid #eac27c;border-radius:16px;padding:0;color:#ffe1af;box-shadow:0 18px 60px #000;max-width:min(94vw,1000px);width:max-content;max-height:94vh}
body.temple58 .v58-lightbox::backdrop{background:rgba(0,4,8,.89);backdrop-filter:blur(7px)}
body.temple58 .v58-lightbox-inner{padding:18px 19px;display:grid;gap:11px;position:relative;justify-items:center}
body.temple58 .v58-lightbox-inner h2{font-size:20px;color:#ffdd9c;margin:0 35px 0 0;justify-self:start}
body.temple58 .v58-lightbox-inner>img{display:block;max-width:min(88vw,930px);max-height:72vh;width:auto;height:auto;object-fit:contain;border:1px solid rgba(225,182,117,.32);border-radius:9px}
body.temple58 .v58-lightbox-inner>p{margin:0;font-size:12px;color:#a9bdc5}
body.temple58 .v58-lightbox-close{position:absolute;top:10px;right:11px;display:grid;place-items:center;width:37px;height:37px;font-size:26px;background:#14252e;color:#ffe2ac;border:1px solid rgba(244,201,128,.55);border-radius:9px;cursor:pointer}
body.temple58 .v58-lightbox-close:hover{background:#1c3843}
@media(prefers-reduced-motion:reduce){body.temple58 .feature-card,body.temple58 .v51-step.v53-step.v58-step,body.temple58 .v58-preview{transition:none!important}}
/* Precise number/text spacing at two-column mobile widths. */
@media(max-width:760px){body.temple58 .v51-step.v53-step.v58-step>div{left:48px!important;right:46px!important}}
@media(max-width:370px){body.temple58 .v51-step.v53-step.v58-step>div{left:46px!important;right:32px!important}}
@media(min-width:761px) and (max-width:1100px){body.temple58 .v51-step-items{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(min-width:761px) and (max-width:1100px){body.temple58 .v51-step.v53-step.v58-step>div{left:57px!important;right:90px!important}}