/* ── words-to-pages.css ────────────────────────────────────────────
   Words → pages estimator. Shared component: <div data-words-pages>
   builds itself via words-to-pages.js (quick-quote/book-builder
   convention). Self-contained card — dark input panel + light result —
   so it sits correctly on the tool page, article pages and blog posts.
   No scroll/pointer effects; instant value updates only.            */

.wtp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px;margin:32px 0;
  border:.5px solid var(--rule-lt,#e2ddd0);background:var(--rule-lt,#e2ddd0)}

/* input panel (ink) */
.wtp-in{background:var(--ink,#16140f);padding:34px 32px;position:relative;overflow:hidden}
.wtp-in::before{content:'';position:absolute;top:0;left:0;width:40px;height:.5px;background:var(--red,#a7012a)}
.wtp-in h3{font-family:var(--fd);font-size:21px;font-weight:400;color:#fff;letter-spacing:-.2px;
  margin:0 0 20px;padding-bottom:12px;border-bottom:.5px solid rgba(255,255,255,.1)}
.wtp-field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.wtp-field:last-child{margin-bottom:0}
.wtp-field>label{font-family:var(--fb);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:500}
.wtp-field input[type="number"],.wtp-field select{
  background:rgba(0,0,0,.2);border:.5px solid rgba(255,255,255,.12);color:#fff;
  font-family:var(--fb);font-size:14.5px;padding:12px 14px;width:100%;border-radius:0;
  -webkit-appearance:none;appearance:none}
.wtp-field input:focus,.wtp-field select:focus{outline:none;border-color:var(--red-lt,#c4183a)}
.wtp-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' fill='none' opacity='.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.wtp-field select option{background:var(--ink,#16140f);color:#fff}
.wtp-check{display:flex;align-items:center;gap:10px;font-family:var(--fb);font-size:13px;color:rgba(255,255,255,.7);cursor:pointer}
.wtp-check input{accent-color:var(--red,#a7012a);width:15px;height:15px}

/* result panel (white) */
.wtp-out{background:var(--white,#fff);padding:34px 32px;display:flex;flex-direction:column;position:relative}
.wtp-out::before{content:'';position:absolute;top:0;left:0;width:40px;height:.5px;background:var(--red,#a7012a)}
.wtp-out-label{font-family:var(--fb);font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--mute,#8a8578);font-weight:500;margin-bottom:10px}
.wtp-range{font-family:var(--fd);font-size:clamp(40px,5vw,58px);font-weight:300;line-height:1;
  color:var(--ink,#16140f);letter-spacing:-1.5px;font-variant-numeric:tabular-nums}
.wtp-range em{font-style:normal;font-size:.4em;color:var(--mute,#8a8578);letter-spacing:0;font-weight:400}
.wtp-plan{font-family:var(--fb);font-size:14.5px;color:#3a3a3a;margin:12px 0 0;line-height:1.6}
.wtp-plan strong{color:var(--ink,#16140f)}
.wtp-meta{font-family:var(--fb);font-size:12.5px;color:var(--mute,#8a8578);line-height:1.7;margin:14px 0 0;
  padding-top:14px;border-top:.5px solid var(--rule-lt,#e2ddd0)}
.wtp-meta a{color:var(--red,#a7012a);text-decoration:underline;text-underline-offset:2px}
.wtp-actions{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.wtp-cta{display:inline-flex;align-items:center;gap:8px;background:var(--red,#a7012a);color:#fff;
  text-decoration:none;font-family:var(--fb);font-size:13.5px;font-weight:600;padding:12px 22px;
  border-radius:3px;transition:background .15s}
.wtp-cta:hover{background:#8c0123}
.wtp-cta svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wtp-alt{font-family:var(--fb);font-size:13px;color:var(--mute,#8a8578)}
.wtp-alt a{color:var(--red,#a7012a);text-decoration:underline;text-underline-offset:2px}

@media(max-width:760px){
  .wtp{grid-template-columns:1fr}
}