/* Shared building blocks for individual tool landing pages.
   Used with /assets/tool-page.js. Each page supplies its own walkthrough markup. */

/* ---------- Trust strip ---------- */
.trust { padding: 6px 0 4px; }
.trust ul { list-style: none; margin: 0; padding: 14px 20px; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; border-radius: 18px; background: var(--surface-2); font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 16px; height: 16px; border-radius: 5px; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; flex: none; }

/* ---------- Sticky in-page bar ---------- */
.subnav { position: sticky; top: 72px; z-index: 40; height: 0; overflow: visible; }
.subnav-inner {
  display: flex; align-items: center; gap: 22px; height: 54px; padding: 0 10px 0 20px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 10px 30px rgba(23,19,15,.08);
  transform: translateY(-14px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.subnav.show .subnav-inner { transform: translateY(8px); opacity: 1; pointer-events: auto; }
.subnav-name { font: 700 16px var(--block); letter-spacing: -0.01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.subnav-links { display: flex; gap: 4px; }
.subnav-links a { text-decoration: none; font-size: 14.5px; font-weight: 600; color: var(--text-2); padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.subnav-links a:hover { color: var(--text); }
.subnav-links a.active { background: var(--accent-dim); color: var(--accent-ink); }
.subnav .btn { margin-left: auto; height: 40px; }
@media (max-width: 900px) { .subnav-links { display: none; } .subnav-inner { gap: 12px; } }

/* ---------- Animated walkthrough ---------- */
.walk { display: grid; gap: 12px; }
.walk-stage {
  position: relative; aspect-ratio: 16 / 11.5; border-radius: 22px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--border-2); box-shadow: 0 30px 60px rgba(31,79,209,.18); font-size: 13px; isolation: isolate;
}
.walk-bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.walk-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-3); }
.walk-url { margin-left: 8px; flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-2); background: var(--surface); border-radius: 7px; padding: 4px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; height: 22px; }
.walk-url span { position: absolute; left: 10px; top: 4px; transition: opacity .35s ease; }
.walk-clip { aspect-ratio: auto; }
.walk-clip video { display: block; width: 100%; height: auto; background: var(--surface-2); }
.walk-clip .walk-url span { transition: none; }
.walk-screen { position: absolute; inset: 36px 0 0 0; transition: opacity .5s ease, transform .5s ease; }
.walk-foot { display: flex; align-items: center; gap: 12px; }
.walk-steps { display: flex; gap: 6px; flex: 1; }
.walk-steps button { flex: 1; height: 5px; border: 0; padding: 0; border-radius: 5px; background: var(--surface-3); cursor: pointer; position: relative; overflow: hidden; }
.walk-steps button i { position: absolute; inset: 0; width: 0; background: var(--accent); border-radius: 5px; }
.walk-steps button.done i { width: 100%; }
.walk-cap { font-size: 14.5px; font-weight: 600; min-height: 22px; }
.walk-cap b { color: var(--accent-ink); margin-right: 6px; }
.walk-toggle { border: 1.5px solid var(--border-2); background: var(--surface); border-radius: 999px; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; flex: none; }
.walk-toggle svg { width: 14px; height: 14px; }
.walk-cursor { position: absolute; z-index: 5; width: 18px; height: 18px; pointer-events: none; transition: left .7s cubic-bezier(.4,0,.2,1), top .7s cubic-bezier(.4,0,.2,1), transform .15s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.walk-cursor.click { transform: scale(.82); }
.walk-toast { position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translate(-50%, 20px); opacity: 0; background: var(--text); color: #fff; font-size: 12.5px; font-weight: 600; padding: 9px 14px; border-radius: 999px; transition: .35s ease; white-space: nowrap; }
.walk-stage .w-hide { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
@media (prefers-reduced-motion: reduce) { .walk-stage * { transition: none !important; } }

/* ---------- How it works (compact) ---------- */
.how3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.how3 .step { background: var(--surface); border: 1.5px solid var(--border); border-radius: 24px; padding: 24px; display: grid; gap: 10px; align-content: start; }
.how3 .num { width: 38px; height: 38px; border-radius: 11px; background: var(--accent); color: #fff; display: grid; place-items: center; font: 700 17px var(--block); }
.how3 h3 { font: 700 21px/1.15 var(--block); letter-spacing: -0.01em; }
.how3 p { margin: 0; color: var(--text-2); font-size: 15.5px; }
.how3 .who { font-size: 12.5px; font-weight: 700; color: var(--accent-ink); }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.chips-row .label { font-size: 14px; font-weight: 600; color: var(--text-2); margin-right: 4px; }
@media (max-width: 860px) { .how3 { grid-template-columns: 1fr; } }

/* ---------- ROI calculator ---------- */
.roi { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; border-radius: 30px; overflow: hidden; border: 1.5px solid var(--border); background: var(--surface); }
.roi-in { padding: 32px; display: grid; gap: 22px; align-content: start; }
.roi-in h2 { font: 700 clamp(28px, 3.2vw, 40px)/1.02 var(--block); letter-spacing: -0.025em; }
.roi-field { display: grid; gap: 8px; }
.roi-field .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 600; font-size: 15px; }
.roi-field output { font: 700 18px var(--block); color: var(--accent-ink); }
.roi-field input[type=range] { width: 100%; accent-color: var(--accent); }
.roi-field .hint { font-size: 13px; color: var(--text-3); }
.roi-out { background: var(--accent); color: #fff; padding: 32px; display: grid; gap: 14px; align-content: center; }
.roi-big { font: 700 clamp(44px, 5vw, 64px)/1 var(--block); letter-spacing: -0.03em; }
.roi-out small { font-size: 15px; color: rgba(255,255,255,.8); }
.roi-rows { display: grid; gap: 6px; border-top: 1px solid rgba(255,255,255,.25); padding-top: 14px; font-size: 15px; }
.roi-rows div { display: flex; justify-content: space-between; gap: 10px; }
.roi-rows b { font-weight: 700; }
.roi-note { font-size: 12.5px; color: rgba(255,255,255,.72); }
@media (max-width: 860px) { .roi { grid-template-columns: 1fr; border-radius: 24px; } .roi-in, .roi-out { padding: 24px 20px; } }

/* ---------- Security ---------- */
.sec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sec-item { border-radius: 20px; padding: 20px; background: var(--v-accounting-t); display: grid; gap: 8px; align-content: start; }
.sec-item svg { width: 26px; height: 26px; color: var(--accent-ink); }
.sec-item b { font: 700 17px/1.2 var(--block); }
.sec-item span { font-size: 14.5px; color: #2B3550; }
@media (max-width: 960px) { .sec-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sec-grid { grid-template-columns: 1fr; } }

/* ---------- Founder note & reviews ---------- */
.founder { display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: start; padding: 32px; border-radius: 30px; background: var(--surface-2); }
.founder-photo { width: 120px; height: 120px; border-radius: 28px; background: var(--accent); color: #fff; display: grid; place-items: center; font: 400 44px 'Archivo Black', var(--block); overflow: hidden; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder blockquote { margin: 0; font: 600 clamp(19px, 2vw, 23px)/1.45 var(--block); letter-spacing: -0.01em; }
.founder cite { display: block; margin-top: 14px; font-style: normal; font-size: 15px; color: var(--text-2); }
@media (max-width: 640px) { .founder { grid-template-columns: 1fr; padding: 24px 20px; } .founder-photo { width: 80px; height: 80px; font-size: 30px; border-radius: 20px; } }
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.review { border-radius: 22px; padding: 22px; background: var(--surface); border: 1.5px solid var(--border); display: grid; gap: 12px; }
.review p { margin: 0; font-size: 16px; }
.review footer { all: unset; font-size: 14px; color: var(--text-2); }
@media (max-width: 860px) { .reviews { grid-template-columns: 1fr; } }

/* ---------- Walkthrough screens (generic; brand via --wb / --wa / --wf on .walk-stage) ---------- */
.walk-stage { --wb: #15233F; --wa: #C9A24B; --wf: Georgia, serif; }
.scr-admin, .scr-client { display: grid; grid-template-columns: 24% 1fr; }
.wa-side { background: var(--wb); color: rgba(255,255,255,.7); padding: 12px 8px; display: grid; gap: 2px; align-content: start; font-size: 11.5px; }
.wa-brand { display: flex; align-items: center; gap: 6px; color: #fff; font: 700 12px/1.15 var(--wf); margin-bottom: 10px; padding: 0 4px; }
.wa-brand i { width: 18px; height: 18px; border-radius: 5px; background: var(--wa); color: var(--wb); display: grid; place-items: center; font-style: normal; font-size: 10px; flex: none; }
.wa-side span { padding: 5px 6px; border-radius: 5px; } .wa-side span.on { background: rgba(255,255,255,.12); color: #fff; }
.wa-main { position: relative; padding: 12px 14px; min-width: 0; }
.wa-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.wa-head b { display: block; font: 700 13.5px var(--block); } .wa-head small { color: var(--text-2); font-size: 11px; }
.wa-pub { font-size: 11px; font-weight: 700; color: #fff; background: var(--wb); padding: 6px 10px; border-radius: 7px; transition: background .3s; white-space: nowrap; }
.wa-pub .p2, .on-5 .wa-pub .p1 { display: none; } .on-5 .wa-pub .p2 { display: inline; } .on-5 .wa-pub { background: var(--green); }
.wa-p1, .wa-p2 { position: absolute; left: 14px; right: 14px; top: 52px; transition: opacity .45s ease, transform .45s ease; }
.on-3 .wa-p1 { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.wa-p2 { opacity: 0; transform: translateY(8px); } .on-3 .wa-p2 { opacity: 1; transform: none; }
.wa-drop { border: 1.5px dashed var(--border-3); border-radius: 10px; padding: 10px; display: grid; gap: 7px; font-size: 11px; color: var(--text-2); }
.on-1 .wa-drop { border-color: var(--accent); background: #F7F9FF; }
.wa-files { display: flex; gap: 6px; flex-wrap: wrap; }
.wa-file { background: #fff; border: 1px solid var(--border-2); border-radius: 6px; padding: 4px 7px; font-size: 11px; color: var(--text); opacity: 0; transform: translateY(6px); transition: .35s ease; }
.on-1 .wa-file { opacity: 1; transform: none; } .on-1 .wa-file + .wa-file { transition-delay: .35s; }
.wa-prog { height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.wa-prog i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 1.6s ease .5s; } .on-1 .wa-prog i { width: 100%; }
.wa-map { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.wa-map-h { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; background: var(--surface-2); font-size: 11px; font-weight: 700; }
.wa-ok { color: var(--green); opacity: 0; transition: opacity .3s ease 1.3s; white-space: nowrap; } .on-2 .wa-ok { opacity: 1; }
.wa-row { display: grid; grid-template-columns: 1fr auto 14px; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--border); font-size: 11px; opacity: .25; transition: opacity .3s ease; }
.wa-row em { font-style: normal; color: var(--text-2); } .wa-row b { color: var(--green); opacity: 0; transition: opacity .3s; }
.on-2 .wa-row, .on-2 .wa-row b { opacity: 1; }
.on-2 .wa-row:nth-child(3), .on-2 .wa-row:nth-child(3) b { transition-delay: .3s; }
.on-2 .wa-row:nth-child(4), .on-2 .wa-row:nth-child(4) b { transition-delay: .6s; }
.on-2 .wa-row:nth-child(5), .on-2 .wa-row:nth-child(5) b { transition-delay: .9s; }
.wa-tbl { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; font-size: 11px; }
.wa-tr { display: grid; grid-template-columns: 1fr 70px 76px 16px; gap: 6px; padding: 5px 10px; border-top: 1px solid var(--border); align-items: center; transition: background .4s ease; }
.wa-tr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-tr:first-child { border-top: 0; background: var(--surface-2); font-weight: 700; color: var(--text-2); }
.wa-tr span:nth-child(2), .wa-tr span:nth-child(3) { text-align: right; }
.wa-tr i { font-style: normal; color: var(--amber); opacity: 0; transition: opacity .3s; }
.on-3 .wa-tr.fl { background: var(--amber-dim); } .on-3 .wa-tr.fl i { opacity: 1; }
.on-3 .wa-tr.fl:nth-child(n+4), .on-3 .wa-tr.fl:nth-child(n+4) i { transition-delay: .3s; }
.on-3 .wa-tr.fl:nth-child(n+6), .on-3 .wa-tr.fl:nth-child(n+6) i { transition-delay: .6s; }
.wa-note { margin-top: 8px; border-left: 3px solid var(--wa); background: var(--surface-2); border-radius: 0 8px 8px 0; padding: 7px 10px; opacity: 0; transition: opacity .3s; }
.on-4 .wa-note { opacity: 1; }
.wa-note small { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-2); margin-bottom: 2px; }
.wa-note p { margin: 0; font-size: 11.5px; min-height: 2.6em; }
.on-4:not(.on-5) .wa-note p::after { content: "|"; animation: walkblink 1s steps(1) infinite; color: var(--accent); }
@keyframes walkblink { 50% { opacity: 0; } }
.on-5 .walk-toast { opacity: 1; transform: translate(-50%, 0); } .on-6 .walk-toast { opacity: 0; transform: translate(-50%, 20px); }
.on-6 .scr-admin { opacity: 0; transform: scale(.98); }
.scr-client { opacity: 0; transform: scale(1.02); } .on-6 .scr-client { opacity: 1; transform: none; }
.wc-main { padding: 12px 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.wc-main h4 { margin: 0; font: 700 15px var(--wf); color: var(--wb); } .wc-main small { color: var(--text-2); font-size: 10.5px; }
.wc-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wc-k div { border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; min-width: 0; } .wc-k small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-k b { font-size: 14px; } .wc-k em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--text-2); }
.wc-k em.up { color: var(--green); } .wc-k em.dn { color: var(--red); }
.wc-bars { display: flex; align-items: flex-end; gap: 3px; height: 52px; }
.wc-bars i { flex: 1; background: var(--wb); opacity: .35; border-radius: 3px 3px 0 0; } .wc-bars i:last-child { opacity: 1; }
.wc-flag { background: var(--amber-dim); border-radius: 8px; padding: 6px 8px; font-size: 11px; display: grid; gap: 3px; }
.wc-flag.ok { background: var(--green-dim); }
.wc-flag span { color: var(--text-2); border-left: 2px solid var(--wa); padding-left: 6px; }
.on-6 .wc-k div, .on-6 .wc-flag { animation: walkrise .5s ease both; }
.on-6 .wc-k div:nth-child(2) { animation-delay: .1s; } .on-6 .wc-k div:nth-child(3) { animation-delay: .2s; } .on-6 .wc-flag { animation-delay: .4s; }
@keyframes walkrise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Standard page rhythm for tool pages ---------- */
.tool-page main section { padding-top: 72px; padding-bottom: 72px; }
.tool-page main section.trust { padding: 6px 0 0; }
@media (max-width: 640px) { .tool-page main section { padding-top: 52px; padding-bottom: 52px; } }

/* ---------- Pricing cards (standard) ---------- */
.plan .plan-tag { margin: -6px 0 0; font-size: 14.5px; font-weight: 600; color: var(--text-2); }
.plan-custom { background: var(--surface-2); border-style: dashed; }
.plan-custom .price { font-size: 34px; }