/* tool-amz.css — Amazon Keyword Tool page (marketing/tool-amz.blade.php).
   Sits on home.css (hm-) and tool-v2.css (tv-). Every block is fully visible at
   rest; animations only replay it. */

.amz { --amz: #ff8a00; --amz-ink: #b35a00; --amz-bg: #fff4e5; --navy: #131a2a; }

/* ================= HERO: shopper search box ================= */
.amz-box { margin: 0; padding: 16px; border-radius: 24px; background: #fff; border: 1px solid var(--hm-line); box-shadow: var(--hm-shadow); display: grid; gap: 10px; }
.amz-box__bar { display: flex; align-items: stretch; border-radius: 12px; overflow: hidden; border: 2px solid var(--amz); box-shadow: 0 0 0 4px rgba(255,138,0,.14); }
.amz-box__mk { display: grid; place-items: center; padding: 0 12px; background: #f2f3f5; font: 700 12px/1 var(--hm-fb); color: var(--hm-muted); border-right: 1px solid #e3e5ea; white-space: nowrap; }
.amz-box__q { flex: 1; display: flex; align-items: center; gap: 2px; padding: 12px 12px; font: 600 16px/1 var(--hm-fs); color: var(--hm-ink); min-width: 0; }
.amz-type { font-weight: 600; display: inline-block; overflow: hidden; white-space: nowrap; animation: amzType 1s steps(12) .2s both; }
@keyframes amzType { from { max-width: 0; } to { max-width: 14ch; } }
.amz-caret { width: 2px; height: 18px; background: var(--amz); animation: amzCaret 1s steps(1) infinite; }
@keyframes amzCaret { 50% { opacity: 0; } }
.amz-box__go { display: grid; place-items: center; width: 52px; background: linear-gradient(#ffb547, #ff9900); color: var(--navy); }
.amz-box__go svg { width: 20px; height: 20px; }
.amz-box__seed { font-size: 13px; color: var(--hm-muted); }
.amz-box__seed b { font: 800 15px/1 var(--hm-fb); color: var(--hm-ink); }
.amz-box__seed span { color: var(--hm-faint); }
.amz-sug { list-style: none; margin: 0; padding: 4px 0; border-radius: 12px; border: 1px solid #eceef2; background: #fff; display: grid; }
.amz-sug li { display: grid; grid-template-columns: 1fr 80px 56px 108px; gap: 10px; align-items: center; padding: 8px 12px; font-size: 14px; color: var(--hm-ink2); animation: amzRow .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.9s + var(--i) * .08s); }
.amz-sug li:first-child { background: #fff8ef; }
.amz-sug__k { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amz-sug__k svg { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; color: var(--hm-faint); }
.amz-sug__k b { font-weight: 700; color: var(--hm-ink); }
.amz-sug__bar { display: block; height: 7px; border-radius: 4px; background: #eef0f5; overflow: hidden; }
.amz-sug__bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--c); animation: amzGrow .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(1s + var(--i) * .08s); transform-origin: left; }
.amz-sug__v { text-align: right; font: 800 13px/1 var(--hm-fb); font-variant-numeric: tabular-nums; }
.amz-sug__g { justify-self: start; font: 700 10.5px/1 var(--hm-fb); padding: 5px 8px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); white-space: nowrap; }
.amz-box figcaption { font: 700 10px/1 var(--hm-fb); letter-spacing: 1.1px; text-transform: uppercase; color: var(--hm-faint); text-align: right; }
@keyframes amzRow { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes amzGrow { from { transform: scaleX(0); } to { transform: none; } }

/* ================= EXPLAINER ================= */
.amz-explain__top { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: start; }
.amz-explain__top h2 { margin-top: 14px; }
.amz .amz-answer { margin: 0; padding-top: 34px; font: 500 19px/1.6 var(--hm-fm); color: var(--hm-ink2); max-width: 64ch; }
.amz .amz-h3 { margin: 40px 0 18px; font: 700 21px/1.3 var(--hm-fb); color: var(--hm-ink); }
.amz-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.amz-vs__col { display: grid; gap: 12px; padding: 20px; border-radius: 20px; border: 1px solid var(--hm-line); background: var(--hm-soft); }
.amz-vs__col.is-a { background: linear-gradient(160deg, #fff6ea, #fff); border-color: #ffd7a3; }
.amz-vs__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.amz-vs__h b { font: 800 19px/1.1 var(--hm-fb); }
.amz-vs__h span { font: 700 11px/1 var(--hm-fb); letter-spacing: 1px; text-transform: uppercase; color: var(--hm-faint); }
.amz-vs__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.amz-vs__col li { padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--hm-line); font: 600 14px/1.2 var(--hm-fs); color: var(--hm-ink2); }
.amz-vs__col.is-g li::before { content: "?  "; color: #2f5fe0; font-weight: 800; }
.amz-vs__col.is-a li::before { content: "▸  "; color: var(--amz); font-weight: 800; }
.amz-vs__col p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--hm-muted); }
.amz-vs__mid { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--hm-ink); color: #fff; font: 800 14px/1 var(--hm-fb); }
.amz .amz-note { margin: 18px 0 0; font-size: 15.5px; color: var(--hm-muted); text-align: center; }
.amz-vs.is-in .amz-vs__col li { animation: amzRow .4s ease both; }
.amz-vs.is-in .amz-vs__col li:nth-child(2) { animation-delay: .08s; } .amz-vs.is-in .amz-vs__col li:nth-child(3) { animation-delay: .16s; } .amz-vs.is-in .amz-vs__col li:nth-child(4) { animation-delay: .24s; }

/* ================= BUYER INTENT ================= */
.amz-intent__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.amz-intent__grid h2 { margin-top: 14px; }
.amz .amz-lead { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--hm-muted); }
.amz-lead a { color: var(--hm-orange-ink); font-weight: 600; }
.amz .amz-honest { margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px dashed #ffc173; font-size: 14.5px; line-height: 1.55; color: var(--hm-ink2); }
.amz-donut { margin: 0; display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--hm-line); box-shadow: var(--hm-shadow); }
.amz-donut__ring { position: relative; width: 200px; height: 200px; }
.amz-donut__ring svg { width: 200px; height: 200px; display: block; }
.amz-donut__ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.amz-donut__ring b { font: 800 34px/1 var(--hm-fb); }
.amz-donut__ring span { font-size: 12.5px; color: var(--hm-faint); }
.amz-donut.is-in circle { animation: amzFade .5s ease both; animation-delay: calc(var(--i) * .12s); }
@keyframes amzFade { from { opacity: 0; } to { opacity: 1; } }
.amz-groups { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.amz-groups li { display: grid; gap: 4px; padding-left: 12px; border-left: 3px solid var(--c); }
.amz-groups__h { display: flex; align-items: center; gap: 8px; }
.amz-groups__h i { display: none; }
.amz-groups__h b { font: 700 15px/1.2 var(--hm-fb); }
.amz-groups__h em { font-style: normal; font: 800 12px/1 var(--hm-fb); padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); }
.amz-groups small { font-size: 12.5px; color: var(--hm-faint); }
.amz-groups__eg { display: flex; flex-wrap: wrap; gap: 5px; }
.amz-groups__eg span { font: 600 12px/1 var(--hm-fs); padding: 5px 8px; border-radius: 8px; background: var(--hm-soft); color: var(--hm-ink2); }

/* ================= PAGE-ONE SHELF (dark) ================= */
.amz-shelf-sec { padding-block: var(--hm-gap); background: radial-gradient(60% 80% at 80% 10%, #2b2f4a 0%, transparent 60%), var(--navy); color: #fff; }
.amz-shelf-sec .hm-head h2 { color: #fff; } .amz-shelf-sec .hm-head p { color: #b3b9cc; } .amz-shelf-sec .hm-eb { color: #ffb05a; }
.amz-shelf { display: grid; gap: 16px; }
.amz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.amz-stats > div { padding: 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: grid; gap: 6px; }
.amz-stats small { font: 700 10.5px/1 var(--hm-fb); letter-spacing: 1px; text-transform: uppercase; color: #9aa3bd; }
.amz-stats b { font: 800 26px/1 var(--hm-fb); font-variant-numeric: tabular-nums; }
.amz-sat.is-high b { color: #ff8f8f; } .amz-sat.is-medium b { color: #ffc46b; } .amz-sat.is-low b { color: #6ee7a8; }
.amz-sat__meter { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; height: 8px; margin-top: 4px; }
.amz-sat__meter i { border-radius: 4px; } .amz-sat__meter .lo { background: #2fbf71; } .amz-sat__meter .md { background: #f0a630; } .amz-sat__meter .hi { background: #e35d5d; }
.amz-sat__meter em { position: absolute; top: -4px; width: 4px; height: 16px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px var(--navy); left: 50%; transition: left .9s cubic-bezier(.2,.8,.2,1); }
.amz-sat.is-high .amz-sat__meter em { left: 84%; } .amz-sat.is-low .amz-sat__meter em { left: 14%; }
.amz-products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.amz-products li { position: relative; display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 16px; background: #fff; color: var(--hm-ink); }
.amz-pack { position: relative; display: block; height: 104px; border-radius: 10px; background: #f4f5f7; overflow: hidden; }
.amz-pack i { position: absolute; left: 50%; bottom: 10px; width: 46%; height: 78%; transform: translateX(-50%); border-radius: 10px 10px 8px 8px; background: linear-gradient(160deg, var(--c2), var(--c1)); box-shadow: inset 0 10px 0 rgba(255,255,255,.18), 0 8px 14px -6px rgba(0,0,0,.4); }
.amz-pack i::after { content: ""; position: absolute; left: 18%; right: 18%; top: 36%; height: 26%; border-radius: 4px; background: rgba(255,255,255,.85); }
.amz-badge { position: absolute; top: 18px; left: 18px; z-index: 1; font: 800 9.5px/1 var(--hm-fb); padding: 4px 6px; border-radius: 4px; }
.amz-badge.best { background: #e47911; color: #fff; } .amz-badge.choice { background: #232f3e; color: #fff; } .amz-badge.spon { background: #fff; color: #565959; border: 1px solid #d5d9d9; }
.amz-products__t { font: 600 12.5px/1.35 var(--hm-fs); color: #1a3d8f; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 50px; }
.amz-stars { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--hm-muted); }
.amz-stars i { width: 64px; height: 12px; background: linear-gradient(90deg, #ffa41c calc(var(--r) / 5 * 100%), #e3e6e6 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M6 0l1.8 3.9 4.2.4-3.2 2.8 1 4.1L6 9 2.2 11.2l1-4.1L0 4.3l4.2-.4z'/%3E%3Cuse href='%23s' x='12'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='48'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M6 0l1.8 3.9 4.2.4-3.2 2.8 1 4.1L6 9 2.2 11.2l1-4.1L0 4.3l4.2-.4z'/%3E%3Cuse href='%23s' x='12'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='36'/%3E%3Cuse href='%23s' x='48'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.amz-stars em { font-style: normal; font-weight: 700; color: var(--hm-ink2); }
.amz-price { font: 800 17px/1 var(--hm-fb); }
.amz .amz-shelf__cap { margin: 0; font-size: 12.5px; color: #8f98b3; }
.amz-shelf.is-in .amz-products li { animation: amzRow .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .08s); }

/* ================= LISTING ================= */
.amz-listing__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.amz-listing__grid h2 { margin-top: 14px; }
.amz-listing { margin: 0; display: grid; grid-template-columns: 170px 1fr; gap: 18px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--hm-line); box-shadow: var(--hm-shadow); }
.amz-pack--lg { height: 190px; --c1: #6b3e1f; --c2: #c98b4b; }
.amz-listing__body { display: grid; gap: 12px; align-content: start; }
.amz-listing__title { font: 600 17px/1.4 var(--hm-fs); color: var(--hm-ink); }
.amz-listing ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--hm-ink2); }
.amz-listing mark { padding: 0 1px; border-radius: 3px; color: inherit; }
.amz-listing mark.k1, .amz-key .k1 { background: #ffe0b3; } .amz-listing mark.k2 { background: #ffe0b3; } .amz-listing mark.k3 { background: #ffe0b3; }
.amz-listing mark.k4, .amz-key .k4 { background: #d8f3e4; } .amz-listing mark.k5 { background: #d8f3e4; }
.amz-key .k6 { background: #e3e7fb; }
.amz-listing__backend { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #eef1fb; font: 500 13px/1.4 ui-monospace, Consolas, monospace; color: #3b4a7a; }
.amz-listing__backend small { font: 700 10px/1 var(--hm-fb); letter-spacing: 1px; text-transform: uppercase; color: var(--hm-faint); }
.amz-listing.is-in mark { animation: amzMark .6s ease both; }
.amz-listing.is-in mark.k2 { animation-delay: .15s; } .amz-listing.is-in mark.k3 { animation-delay: .3s; } .amz-listing.is-in mark.k4 { animation-delay: .45s; } .amz-listing.is-in mark.k5 { animation-delay: .6s; }
@keyframes amzMark { from { background-size: 0 100%; box-shadow: none; } to { box-shadow: 0 0 0 2px rgba(255,138,0,.15); } }
.amz-key { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.amz-key li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--hm-ink2); }
.amz-key i { width: 26px; height: 14px; border-radius: 4px; flex: none; }

/* ================= PLANS ================= */
.amz-plans__box { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; padding: 30px; border-radius: 24px; background: #fff; border: 1px solid var(--hm-line); }
.amz-plans__box h2 { margin: 14px 0 10px; font-size: clamp(24px, 2.8vw, 32px); }
.amz-plans__box p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--hm-muted); }
.amz-plans__box p a { color: var(--hm-orange-ink); font-weight: 600; }
.amz-plans__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.amz-plans__list li { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--hm-soft); border: 1px solid var(--hm-line); }
.amz-plans__list li.is-pop { background: var(--amz-bg); border-color: #ffd29a; }
.amz-plans__list b { font: 800 16px/1 var(--hm-fb); }
.amz-plans__list span { font-size: 14px; color: var(--hm-ink2); }
.amz-plans__list em { font-style: normal; font: 700 14px/1 var(--hm-fb); color: var(--hm-muted); }
.amz-plans .hm-price-foot { margin-top: 18px; }

/* ================= smaller screens ================= */
@media (max-width: 1100px) { .amz-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) {
  .amz-explain__top, .amz-intent__grid, .amz-listing__grid, .amz-plans__box { grid-template-columns: 1fr; gap: 26px; }
  .amz .amz-answer { padding-top: 0; }
  .amz-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .amz-sug li { grid-template-columns: 1fr 52px; gap: 6px 10px; }
  .amz-sug__bar { grid-column: 1 / -1; grid-row: 2; }
  .amz-sug__g { display: none; }
  .amz-box__mk { display: none; }
  .amz .amz-answer { font-size: 17px; }
  .amz-vs { grid-template-columns: 1fr; }
  .amz-vs__mid { justify-self: center; }
  .amz-donut { grid-template-columns: 1fr; justify-items: center; padding: 16px; }
  .amz-donut__ring, .amz-donut__ring svg { width: 170px; height: 170px; }
  .amz-groups { width: 100%; }
  .amz-products { grid-template-columns: 1fr 1fr; }
  .amz-stats b { font-size: 21px; }
  .amz-listing { grid-template-columns: 1fr; }
  .amz-pack--lg { height: 150px; }
  .amz-plans__box { padding: 20px; }
  .amz-plans__list li { grid-template-columns: 1fr auto; } .amz-plans__list span { grid-column: 1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .amz *, .amz *::before, .amz *::after { animation: none !important; transition: none !important; }
}