/* tool-v2.css — extras for marketing/tool-v2.blade.php on top of home.css. */

/* home-v2.css (loaded for the logo strip + FAQ) sets overflow-x:hidden on
   html and body, which stops this layout's sticky header from sticking. */
html, body { overflow-x: visible; }

/* Tighter rhythm than the home page: these sections tell one continuous story. */
.tv { --hm-gap: 64px; --hm-head: 28px; }
.tv .pd-section { padding: 52px 0; }
/* Visible at rest: no block waits for a scroll observer to appear. */
.tv .hm-rv.is-pre { opacity: 1; transform: none; }

/* hero: this layout's header is sticky, not overlaid, so no negative pull-up */
.tv .tv-hero { margin-top: 0; padding: 32px 0 28px; }
.tv .tv-hero .hm-hero__grid { gap: 40px; }
.tv .tv-hero .hm-hero__copy { gap: 18px; }
.tv .tv-hero h1 { font-size: clamp(30px, 3.6vw, 46px); }
.tv .tv-hero .hm-hero__sub { font-size: 17px; line-height: 1.55; }
.tv .tv-hero .hm-form input { height: 46px; }
.tv .tv-hero .hm-btn { padding: 13px 20px; font-size: 15px; }
.tv .tv-hero .trust-strip { margin-top: 28px; }
.tv-crumb { font: 600 13px/1.4 var(--hm-fs); color: var(--hm-faint); }
.tv-crumb a { color: var(--hm-muted); text-decoration: none; }
.tv-crumb a:hover { color: var(--hm-orange-ink); }

/* today's movers card */
.tv-movers { background: #fff; border: 1px solid var(--hm-line); border-radius: 22px; box-shadow: var(--hm-shadow); padding: 16px; display: grid; gap: 10px; }
.tv-movers__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.tv-movers__label { font: 700 11px/1.3 var(--hm-fb); letter-spacing: 1.1px; text-transform: uppercase; color: var(--hm-faint); }
.tv-movers__when { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--hm-fs); color: var(--hm-green-ink); }
.tv-movers__when i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; animation: hmPulse 2s infinite; }
.tv-movers__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tv-movers__rows li { display: grid; grid-template-columns: 1fr 56px 56px; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid #eef0f5; border-radius: 12px; background: #fbfbfd; }
.tv-movers__kw { font: 600 14px/1.25 var(--hm-fs); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-movers__kw small { display: block; font: 500 11.5px/1.3 var(--hm-f); color: var(--hm-faint); }
.tv-movers__pos { font: 800 19px/1 var(--hm-fb); font-variant-numeric: tabular-nums; text-align: right; }
.tv-movers__chg { justify-self: end; font: 700 12px/1 var(--hm-fb); padding: 5px 8px; border-radius: 999px; background: #f1f3f8; color: var(--hm-faint); white-space: nowrap; }
.tv-movers__chg.is-up { background: var(--hm-green-bg); color: var(--hm-green-ink); }
.tv-movers__chg.is-down { background: #fdecec; color: #c2413a; }
.tv-movers__foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--hm-faint); }
.tv-movers__foot b { color: var(--hm-ink); }
.hm-js .tv-movers__rows li { animation: tvRow .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.15s + var(--i, 0) * .08s); }
@keyframes tvRow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- surfaces: one keyword, every place people search ---------- */
.tv-surf-sec { background: linear-gradient(180deg, #fff 0%, #fff7ea 100%); }
.tv-surf { position: relative; display: grid; gap: 16px; }
.tv-surf__kw { justify-self: center; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--hm-navy); color: #fff; font: 500 15px/1.2 var(--hm-fm); box-shadow: 0 16px 34px -18px rgba(11,21,38,.6); }
.tv-surf__kw b { font-family: var(--hm-fb); color: #ffb066; }
.tv-surf__kw i { width: 9px; height: 9px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 rgba(61,220,151,.6); animation: hmPulse 1.6s infinite; }
.tv-surf__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
.tv-card { --c: #4285f4; position: relative; background: #fff; border: 1px solid var(--hm-line); border-radius: 18px; padding: 16px; display: grid; gap: 12px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tv-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); }
.tv-card:hover { transform: translateY(-3px); box-shadow: var(--hm-shadow); border-color: color-mix(in srgb, var(--c) 35%, var(--hm-line)); }
.tv-card__head { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; }
.tv-card__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.tv-card__ic svg { width: 21px; height: 21px; }
.tv-card__name b { display: block; font: 700 15.5px/1.2 var(--hm-fb); }
.tv-card__name small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--hm-muted); }
.tv-card__rank { font: 800 20px/1 var(--hm-fb); color: var(--hm-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* mini pictures of each results page; "you" is always the orange element */
.tv-mini { position: relative; height: 74px; border-radius: 12px; background: #f6f7fb; border: 1px solid #eef0f5; padding: 10px 12px; }
.tv-mini b { font: 800 9.5px/1 var(--hm-fb); letter-spacing: .5px; text-transform: uppercase; color: #fff; }
.tv-mini--serp { display: grid; gap: 6px; align-content: center; }
.tv-mini--serp i { display: block; height: 8px; border-radius: 4px; background: #dfe3ea; }
.tv-mini--serp i:nth-child(1) { width: 92%; } .tv-mini--serp i:nth-child(2) { width: 78%; } .tv-mini--serp i:nth-child(4) { width: 64%; }
.tv-mini--serp i.is-you { height: 16px; width: 86%; display: flex; align-items: center; padding-left: 8px; background: linear-gradient(90deg, #ff8b1f, #ff6a00); box-shadow: 0 6px 14px -6px rgba(255,106,0,.7); }
.tv-mini--map { background: linear-gradient(115deg, #edf1ec 0%, #e3ebf3 55%, #eef0ea 100%); overflow: hidden; }
.tv-mini--map::before, .tv-mini--map::after { content: ""; position: absolute; background: rgba(255,255,255,.95); }
.tv-mini--map::before { left: -5%; right: -5%; top: 58%; height: 5px; transform: rotate(-5deg); }
.tv-mini--map::after { top: -5%; bottom: -5%; left: 52%; width: 4px; transform: rotate(8deg); }
.tv-mini--map .p { position: absolute; z-index: 1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #9aa3b5; border: 2px solid #fff; }
.tv-mini--map .p.is-you { width: auto; height: auto; margin: -11px 0 0 -18px; padding: 4px 7px; border-radius: 999px; background: #ff6a00; box-shadow: 0 4px 10px rgba(255,106,0,.45); }
.tv-mini--video { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: center; }
.tv-mini--video .v { position: relative; height: 46px; border-radius: 8px; background: #dfe3ea; display: grid; place-items: center; }
.tv-mini--video .v::after { content: ""; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 2px; }
.tv-mini--video .v.is-you { background: linear-gradient(135deg, #ff8b1f, #ff5d00); }
.tv-mini--video .v.is-you b { position: absolute; bottom: 4px; left: 6px; }
.tv-mini--device { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.tv-mini--device .d { position: relative; display: grid; place-items: center; border: 2.5px solid #c5ccd8; background: #fff; }
.tv-mini--device .d--phone { width: 30px; height: 52px; border-radius: 7px; border-color: #ff6a00; }
.tv-mini--device .d--desk { width: 78px; height: 48px; border-radius: 6px; }
.tv-mini--device .d b { color: var(--hm-ink); font-size: 11px; }
.tv-mini--device .d--phone b { color: #ff6a00; }
.tv-surf__loc { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.tv-surf__loclabel { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--hm-fb); color: var(--hm-muted); margin-right: 4px; }
.tv-surf__loclabel svg { width: 16px; height: 16px; color: #ff6a00; }
.tv-chip { padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--hm-line); font: 600 13px/1 var(--hm-fs); color: var(--hm-ink2); }
.tv-chip:last-child { border-style: dashed; color: var(--hm-muted); }
/* Visible at rest; when the board enters view the cards play a short rise once. */
.tv-surf.is-in .tv-card { animation: tvRise .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * .06s); }
@keyframes tvRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- spotlights: copy beside a real screenshot ---------- */
.tv-spot { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.tv-spot--flip > :first-child { order: 2; }
.tv-spot__lead { margin-top: 14px; font-size: 17px; color: var(--hm-muted); }
.tv-spot__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.tv-spot__list li { display: flex; gap: 10px; align-items: flex-start; font: 500 15px/1.45 var(--hm-fm); }
.tv-shot { margin: 0; border-radius: 22px; overflow: hidden; background: #f3f5fa; border: 1px solid var(--hm-line); box-shadow: var(--hm-shadow); }
.tv-shot img { display: block; width: 100%; height: auto; }

/* ---------- process flow: sign-up to first rankings ---------- */
.tv-flow { --line: 0%; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.tv-flow::before, .tv-flow::after { content: ""; position: absolute; top: 27px; left: calc(16.66% - 0px); height: 3px; border-radius: 3px; }
.tv-flow::before { right: 16.66%; background: repeating-linear-gradient(90deg, #e3e7ee 0 8px, transparent 8px 14px); }
.tv-flow::after { width: calc(66.66% * var(--fill, 1)); background: linear-gradient(90deg, #ff8b1f, #ff5d00); transition: width 1.4s cubic-bezier(.2,.8,.2,1) .2s; }
/* the orange line grows across once the flow is in view; dashed track always shows */
.hm-js .tv-flow:not(.is-in) { --fill: 0; }
.tv-flow__step { display: grid; gap: 14px; justify-items: center; text-align: center; }
.tv-flow__node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; }
.tv-flow__ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #fff; color: #ff6a00; border: 2px solid #ffd2a8; box-shadow: 0 12px 26px -16px rgba(255,106,0,.7); }
.tv-flow__ic svg { width: 26px; height: 26px; }
.tv-flow__node em { font: 700 11.5px/1 var(--hm-fb); font-style: normal; padding: 5px 10px; border-radius: 999px; background: var(--hm-navy); color: #fff; }
.tv-flow__card { width: 100%; background: #fff; border: 1px solid var(--hm-line); border-radius: 18px; padding: 18px; display: grid; gap: 6px; text-align: left; }
.tv-flow__n { font: 700 11px/1 var(--hm-fb); letter-spacing: 1.2px; text-transform: uppercase; color: var(--hm-orange-ink); }
.tv-flow__t { display: none; }
.tv-flow__card > b { font: 700 17px/1.3 var(--hm-fb); }
.tv-flow__p { color: var(--hm-muted); font-size: 14.5px; }
.tv-flow__vis { margin-top: 8px; padding: 12px; border-radius: 12px; background: var(--hm-soft); border: 1px solid #eef0f5; display: grid; gap: 8px; }
.tv-fake-input { padding: 9px 12px; border-radius: 9px; background: #fff; border: 1px solid #dfe3ea; font: 600 13px/1 var(--hm-fs); color: var(--hm-ink2); }
.tv-fake-input::after { content: "|"; margin-left: 2px; color: #ff6a00; animation: tvBlink 1s steps(1) infinite; }
@keyframes tvBlink { 50% { opacity: 0; } }
.tv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tv-chips i { font-style: normal; font: 600 11.5px/1 var(--hm-fs); padding: 5px 8px; border-radius: 999px; background: #fff; border: 1px solid #e3e7ee; color: var(--hm-ink2); }
.tv-ranks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tv-ranks i { font-style: normal; display: grid; gap: 4px; justify-items: center; padding: 8px 4px; border-radius: 10px; background: #fff; border: 1px solid #e3e7ee; }
.tv-ranks b { font: 800 17px/1 var(--hm-fb); }
.tv-ranks em { font-style: normal; font: 700 11px/1 var(--hm-fb); color: var(--hm-green); }
.tv-flow__note { font-size: 12px; color: var(--hm-faint); }
.tv-fixrow { display: flex; align-items: center; gap: 12px; }
.tv-fixrow b { display: block; font: 700 13.5px/1.25 var(--hm-fb); }
.tv-fixrow small { display: block; margin-top: 2px; font-size: 12px; color: var(--hm-muted); }
.tv-miniring { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#e8890c 0 62%, #eef0f5 62% 100%); }
.tv-miniring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.tv-miniring b { position: relative; font: 800 14px/1 var(--hm-fb); }
.tv-flow.is-in .tv-flow__step { animation: tvRise .45s ease both; animation-delay: calc(.1s + var(--i, 0) * .22s); }

@media (max-width: 980px) {
  .tv-spot { grid-template-columns: 1fr; gap: 26px; }
  .tv-spot--flip > :first-child { order: 0; }
  .tv-surf__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  /* the flow turns vertical: line runs down the left, cards beside it */
  .tv-flow { grid-template-columns: 1fr; gap: 16px; }
  .tv-flow::before, .tv-flow::after { top: 28px; left: 27px; width: 3px; right: auto; }
  .tv-flow::before { bottom: 28px; height: auto; background: repeating-linear-gradient(180deg, #e3e7ee 0 8px, transparent 8px 14px); }
  .tv-flow::after { width: 3px; height: calc((100% - 56px) * var(--fill, 1)); background: linear-gradient(180deg, #ff8b1f, #ff5d00); transition: height 1.4s cubic-bezier(.2,.8,.2,1) .2s; }
  .tv-flow__step { grid-template-columns: 56px 1fr; justify-items: stretch; align-items: start; text-align: left; gap: 14px; }
  .tv-flow__node em { display: none; }
  .tv-flow__t { display: inline; color: var(--hm-ink); }
}
@media (max-width: 600px) {
  .tv { --hm-gap: 48px; }
  .tv .pd-section { padding: 40px 0; }
  .tv .tv-hero { padding-top: 20px; }
  .tv .tv-hero h1 { font-size: 30px; }
  .tv .tv-hero .hm-hero__sub { font-size: 16px; }
  .tv-surf__kw { display: block; font-size: 13.5px; line-height: 1.45; padding: 9px 16px; text-align: center; border-radius: 16px; }
  .tv-surf__kw i { display: inline-block; vertical-align: 1px; margin-right: 6px; }
  .tv-surf__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tv-card { padding: 12px; gap: 10px; }
  .tv-card__head { grid-template-columns: 32px 1fr; gap: 8px; }
  .tv-card__ic { width: 32px; height: 32px; border-radius: 10px; }
  .tv-card__ic svg { width: 17px; height: 17px; }
  .tv-card__name b { font-size: 13.5px; }
  .tv-card__name small { display: none; }
  .tv-card__rank { grid-column: 1 / -1; font-size: 17px; }
  .tv-mini { height: 60px; padding: 8px; }
  .tv-mini--device .d--desk { width: 56px; height: 38px; } .tv-mini--device .d--phone { width: 24px; height: 42px; }
  .tv-movers__rows li { grid-template-columns: 1fr 48px 52px; padding: 8px 10px; }
  .tv-movers__pos { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-js .tv-movers__rows li { animation: none; }
  .tv-surf.is-in .tv-card, .tv-flow.is-in .tv-flow__step { animation: none; }
  .tv-flow::after { transition: none; }
}

/* explore more (internal links to sibling tools) */
.tv-explore { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; background: #fff; border: 1px solid var(--hm-line); border-radius: 24px; padding: 30px; }
.tv-explore p { margin-top: 10px; color: var(--hm-muted); }
.tv-explore p a { color: var(--hm-orange-ink); font-weight: 700; }
.tv .explore-tools-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tv .explore-tools-links a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--hm-line); background: var(--hm-soft); color: var(--hm-ink); font: 700 15px/1.2 var(--hm-fb); text-decoration: none; transition: border-color .2s, transform .2s; }
.tv .explore-tools-links a:hover { border-color: var(--hm-orange); transform: translateY(-1px); }
@media (max-width: 760px) { .tv-explore { grid-template-columns: 1fr; padding: 22px; } }