/* =========================================================
   Awdiz Growth Labs — homepage-only styles (index.css)
   Loaded after css/site.css on index.html only.
   ========================================================= */

/* ---------- Scorecard: example image per metric ---------- */
.report-layout{position:relative}
.scorecard .score-row{cursor:default;position:relative;transition:background .3s,box-shadow .3s}
.scorecard .score-row:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.scorecard .score-row.is-peek{background:#fff;box-shadow:inset 3px 0 0 var(--blue)}
.scorecard .score-row>b{transition:transform .35s var(--ease)}
.scorecard .score-row.is-peek>b{transform:translate(2px,-2px)}

/* Hint line under the blue header */
.report-layout .scorecard>.score-hint{margin:0;max-width:none;width:100%}
.score-hint{display:flex;align-items:center;gap:10px;margin:0;padding:12px 26px;border-bottom:1px solid var(--line);background:#EEF2FF;color:var(--royal);font-size:12.5px;font-weight:500;letter-spacing:.02em}
.score-hint i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(102,187,70,.55);animation:scoreHintPing 2s infinite}
@keyframes scoreHintPing{80%,100%{box-shadow:0 0 0 8px rgba(102,187,70,0)}}
.score-hint-tap{display:none}
@media not all and (hover:hover) and (pointer:fine) and (min-width:1021px){
 .score-hint-hover{display:none}
 .score-hint-tap{display:inline}
}

/* Desktop floating preview (placed beside the hovered row by index.js) */
.score-peek{position:absolute;z-index:85;width:min(475px,40vw);padding:10px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(13,15,28,.45);pointer-events:none;opacity:0;visibility:hidden;transform:translate(14px,-50%) scale(.96);transform-origin:100% 50%;transition:opacity .25s,transform .35s var(--ease),visibility .25s,top .3s var(--ease)}
.score-peek.is-on{opacity:1;visibility:visible;transform:translate(0,-50%) scale(1)}
.score-peek::after{content:"";position:absolute;right:-7px;top:var(--peek-arrow,50%);width:14px;height:14px;background:#fff;border-right:1px solid var(--line);border-top:1px solid var(--line);transform:translateY(-50%) rotate(45deg)}
.score-peek img{display:block;width:100%;height:auto;border-radius:12px;background:#F2F4FA}
.score-peek p{display:none}
@media not all and (hover:hover) and (pointer:fine) and (min-width:1021px){.score-peek{display:none}}

/* Next-row highlight after "Check next metric" */
.scorecard .score-row.is-glow{animation:scoreGlow 1.3s var(--ease)}
@keyframes scoreGlow{0%{background:#DCE4FF;box-shadow:inset 0 0 0 2px var(--blue)}70%{background:#E9EEFF;box-shadow:inset 0 0 0 2px var(--blue)}100%{background:transparent;box-shadow:inset 0 0 0 0 transparent}}

/* Touch popup */
.score-pop{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:16px;background:rgba(13,15,28,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .22s}
.score-pop.is-open{opacity:1}
.score-pop[hidden]{display:none}
.score-pop-card{width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:16px 16px 14px;border-radius:22px;background:#fff;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);transform:translateY(14px) scale(.98);transition:transform .3s var(--ease)}
.score-pop.is-open .score-pop-card{transform:none}
.score-pop-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.score-pop-count{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--royal)}
.score-pop-x{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:22px;line-height:1;color:var(--ink);cursor:pointer}
.score-pop-card h3{font-size:22px;letter-spacing:-.03em;margin:0 0 4px}
.score-pop-text{font-size:14px;color:var(--ink-2);margin:0 0 12px;line-height:1.5}
.score-pop-card img{display:block;width:100%;height:auto;border-radius:14px;background:#F2F4FA}
.score-pop-next{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:13px 16px;border:0;border-radius:999px;background:var(--royal);color:#fff;font:600 14.5px/1 var(--body);cursor:pointer}
.score-pop-next span{transition:transform .25s var(--ease)}
.score-pop-next:active span{transform:translateX(3px)}
.score-pop-fine{margin:10px 0 0;text-align:center;font-size:11.5px;color:var(--mute)}
html.score-pop-lock{overflow:hidden}

@media(max-width:640px){.score-hint{padding:11px 18px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.score-hint i,.scorecard .score-row.is-glow{animation:none}.score-peek,.score-pop,.score-pop-card{transition:none}}