/* 818HI Document Tools — styles for /tools/ pages only (loaded after style.css).
   Kept separate so tool changes never require a site-wide style.css cache-bust. */

.tool{max-width:760px;margin:0 auto}
.tool h2{margin:34px 0 12px}
.tool .note{color:var(--muted);font-size:.92rem}

/* document form (mirrors .wiz-step form controls) */
.tool-form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;margin-top:18px}
.tool-form label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px}
.tool-form label:first-child{margin-top:0}
.tool-form input[type=text],.tool-form input[type=email],.tool-form input[type=tel],.tool-form input[type=date],
.tool-form select,.tool-form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff}
.tool-form input:focus,.tool-form select:focus,.tool-form textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,138,138,.15)}
.tool-form textarea{resize:vertical}
.tool-form .hint{font-size:.82rem;color:var(--muted);margin:4px 0 0;font-weight:400}
.tool-actions{margin-top:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* document preview — reads like paper */
.doc-preview{background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 30px rgba(15,44,77,.12);
 padding:56px 60px;margin-top:16px;font-family:"Times New Roman",Times,serif;font-size:15px;line-height:1.5;color:#111;
 max-height:560px;overflow-y:auto}
.doc-preview p{margin:0 0 12px;font-family:inherit}
.doc-preview p.tight{margin-bottom:2px}
.doc-preview p.pagebreak{border-top:2px dashed var(--line);padding-top:28px;margin-top:28px}
@media(max-width:560px){.doc-preview{padding:28px 20px}}

/* download gate */
.gate{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:26px 24px;margin-top:22px}
.gate h3{margin:0 0 6px}
.gate>p{color:var(--muted);font-size:.95rem;margin:0 0 8px}
.gate label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px}
.gate input[type=text],.gate input[type=email]{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff}
.gate input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,138,138,.15)}
#gate-status{margin-top:10px;font-size:.92rem}
#gate-status.err{color:#b3261e}

/* disclaimer + guidance boxes */
.tool-disclaimer{border-left:3px solid var(--gold);background:var(--soft);border-radius:0 12px 12px 0;
 padding:14px 18px;margin:30px 0 0;font-size:.88rem;color:var(--muted)}
.tool-steps{margin:12px 0 0;padding-left:0;list-style:none;counter-reset:ts}
.tool-steps li{counter-increment:ts;position:relative;padding:0 0 14px 44px}
.tool-steps li::before{content:counter(ts);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;
 background:var(--navy);color:#fff;font-weight:600;font-size:.85rem;display:flex;align-items:center;justify-content:center}

/* hub cards */
.tool-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.tool-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:16px;
 padding:22px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.tool-card:hover{border-color:var(--gold);box-shadow:0 8px 22px rgba(15,44,77,.10);transform:translateY(-2px)}
.tool-card i{color:var(--teal);font-size:1.3rem}
.tool-card h3{margin:0;font-size:1.05rem}
.tool-card p{margin:0;color:var(--muted);font-size:.92rem;flex:1}
.tool-card .go{color:var(--navy);font-weight:600;font-size:.9rem}
@media(max-width:640px){.tool-cards{grid-template-columns:1fr}}

/* related tools strip on doc pages */
.tool-related{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.tool-related a{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.88rem;font-weight:600;
 text-decoration:none;color:var(--navy);background:#fff}
.tool-related a:hover{border-color:var(--gold)}