/* esimgomobile /tools/ — tool page styles: demos, param tables, gates, hub grid. */
.crumb{display:flex;gap:8px;align-items:center;max-width:1120px;margin:0 auto;padding:18px 24px 0;font-size:13px;color:#8fa1b8}
/* the crumb is the first element inside <main> on tool pages: clear the fixed
   70px translucent nav so it never slides underneath it as ghost text */
main > nav.crumb:first-child{padding-top:92px}
.crumb a{color:#8fa1b8;text-decoration:none}
.crumb a:hover{color:#00E5CC}
.tool-hero{padding-bottom:24px}
.word-reveal .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.word-reveal .wi{display:inline-block;transform:translateY(110%);transition:transform .6s cubic-bezier(0.22,1,0.36,1)}
.word-reveal.in .wi{transform:translateY(0)}
.demo-block{padding-top:8px}
.demo{background:rgba(255,255,255,.03);border:1px solid rgba(0,229,204,.18);border-radius:18px;padding:28px;transition:border-color .5s cubic-bezier(0.22,1,0.36,1),box-shadow .5s cubic-bezier(0.22,1,0.36,1),transform .5s cubic-bezier(0.22,1,0.36,1)}
.demo:hover{border-color:rgba(0,229,204,.45);box-shadow:0 8px 40px rgba(0,179,255,.12);transform:translateY(-3px)}
.demo-form{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px;align-items:flex-end}
.demo-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#8fa1b8;min-width:180px}
.demo-form input,.demo-form select{background:#0e1c33;border:1px solid rgba(255,255,255,.14);color:#F7FAFC;border-radius:10px;padding:11px 14px;font-size:15px;font-family:inherit;transition:border-color .3s}
.demo-form input:focus,.demo-form select:focus{outline:none;border-color:#00E5CC;box-shadow:0 0 0 3px rgba(0,229,204,.15)}
.demo-form .btn{margin:0}
.demo-form .seg{opacity:.65}
.demo-form .seg.active{opacity:1;border-color:#00E5CC;color:#F7FAFC}
.demo-out{background:#0B1526;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:18px 20px}
.demo-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:15px}
.demo-row:last-child{border-bottom:none}
.demo-row.total{font-size:18px;font-weight:700}
.demo-note{font-size:13px;color:#8fa1b8;margin-top:14px}
.demo-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.demo-steps li{background:#0B1526;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 16px;font-size:15px;line-height:1.55}
.demo-steps li strong{color:#00E5CC}
.demo-steps a{color:#00B3FF}
.kv{display:grid;grid-template-columns:170px 1fr;gap:8px 16px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:15px}
.kv:last-child{border-bottom:none}
.kv dt{color:#8fa1b8}
.kv dd{margin:0;color:#F7FAFC}
.verdict{font-size:18px;font-weight:700;margin:4px 0 12px}
.verdict.bad{color:#ff7a7a}
.verdict.good{color:#00E5CC}
.param-table{overflow-x:auto;margin-top:24px}
.param-table table{width:100%;border-collapse:collapse;font-size:15px}
.param-table th{text-align:left;padding:12px 14px;color:#8fa1b8;font-weight:600;border-bottom:1px solid rgba(0,229,204,.25);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.param-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top}
.param-table code{background:rgba(0,229,204,.1);color:#00E5CC;padding:3px 8px;border-radius:6px;font-size:13.5px}
.how-steps{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.how-steps li{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px 20px;transition:transform .5s cubic-bezier(0.22,1,0.36,1),border-color .5s cubic-bezier(0.22,1,0.36,1)}
.how-steps li:hover{transform:translateY(-3px);border-color:rgba(0,179,255,.4)}
.how-steps .num{flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#00E5CC,#00B3FF);color:#0B1526;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:16px}
.honest-panel{background:rgba(0,179,255,.07);border:1px solid rgba(0,179,255,.3);border-radius:16px;padding:26px 28px}
.honest-panel p{margin:12px 0 0;font-size:15.5px;line-height:1.7;color:#c9d5e4}
.honest-panel a{color:#00B3FF}
.gate-panel{display:flex;gap:22px;background:rgba(255,255,255,.03);border:1px dashed rgba(0,229,204,.4);border-radius:18px;padding:30px}
.gate-icon{font-size:40px;flex:none}
.gate-panel h3{margin:0 0 10px;font-size:22px}
.gate-panel p{color:#aeb9cc;line-height:1.7;margin:0 0 18px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:32px}
.hub-cat{margin-top:56px}
.hub-cat:first-of-type{margin-top:32px}
/* 2026-10-03: dark glass card theme applies ONLY inside dark bands. On light
   sections (e.g. the /tools/ hub) the light .tool-card/.pill theme from style.css
   applies — previously the dark rules leaked globally and made white titles
   invisible on the light photographic hub background. */
.block.dark .tool-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px;transition:transform .6s cubic-bezier(0.22,1,0.36,1),border-color .6s cubic-bezier(0.22,1,0.36,1),box-shadow .6s cubic-bezier(0.22,1,0.36,1);text-decoration:none;color:inherit}
.block.dark .tool-card:hover{transform:translateY(-6px);border-color:rgba(0,229,204,.55);box-shadow:0 14px 44px rgba(0,179,255,.16)}
.block.dark .tool-card h3{margin:0;font-size:18px;color:#F7FAFC}
.block.dark .tool-card p{margin:0;font-size:14.5px;color:#9fb0c6;line-height:1.6;flex:1}
.block.dark .tool-card .tagrow{display:flex;gap:8px;align-items:center}
.block.dark .pill{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.block.dark .pill.live{background:rgba(0,229,204,.14);color:#00E5CC;border:1px solid rgba(0,229,204,.35)}
.block.dark .pill.soon{background:rgba(255,255,255,.06);color:#8fa1b8;border:1px solid rgba(255,255,255,.14)}
.block.dark .tool-card .more{margin-top:4px}
@media (max-width:640px){.gate-panel{flex-direction:column}.kv{grid-template-columns:1fr}}