/* ============================================================
   REVENUE GOAL PLANNER PAGE - page-specific layer (shared tokens above)
   ============================================================ */
.sec{padding:72px 0}

.sec-tight{padding:56px 0}

.hero-page{min-height:0;padding:66px 0 50px}

.hero-solo{max-width:56rem}

.hero-page h1{max-width:20ch;font-size:clamp(2rem,4vw,3.05rem)}

.hero-page .hero-sub{max-width:58ch;margin-bottom:0}

.toolband{padding:44px 0 68px}

/* -- cross-link to the other tool + the call line ------------- */
.after-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}

.after-grid > *{min-width:0}

.xcard{display:flex;flex-direction:column;color:var(--body);
  background:linear-gradient(180deg,var(--white) 0%,#fafcfb 100%);border:1px solid var(--hairline);
  border-radius:var(--r);padding:26px 24px;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(6,28,20,.045)}

.xcard:hover{color:var(--body)}

.xcard h2{font-size:1.12rem;margin:14px 0 .4em}

.xcard p{margin:0 0 16px;color:var(--muted);font-size:.94rem;line-height:1.6}

.xcard .tlink{margin-top:auto}

.xcta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  background:linear-gradient(180deg,var(--tint-soft) 0%,#dff7ec 100%);border:1px solid #a9e8cf;
  border-radius:var(--r);padding:28px 26px;
  box-shadow:0 2px 4px rgba(6,28,20,.05),0 20px 46px rgba(5,150,105,.13)}

.xcta h2{font-size:1.12rem;margin:0 0 .4em}

.xcta p{margin:0 0 18px;font-size:.94rem;color:var(--body);line-height:1.6;max-width:44ch}

.xcta .cta-micro{margin:12px 0 0}

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

/* ============================================================
   THE TOOL - scoped under .tool-planner so it cannot bleed into
   the shell and the shell cannot break it. Every rule below is the
   source tool's own rule, re-tokenised to the MAC palette and to
   Libre Baskerville / Lora; class names, ids and the JavaScript are
   the tool's, untouched. The three price-point cards used sage /
   leaf / gold in the source - gold is not a MAC colour, so the
   tiers now step through hairline, mint and Forest instead.
   Deliberately NO reveal hooks inside .tool-planner.
   ============================================================ */
.tool-planner{
  --tq-ink:#061c14; --sage:#059669; --leaf:#34d399;
  --tq-tint:#d1fae5; --tq-tint-lt:#e9fbf3;
  --body:#374151; --muted:#6b7280;
  --tq-line:#d7e3de; --tq-surface:#fff;
  font-family:var(--sans);color:var(--forest);font-size:15px;line-height:1.65}

.tool-planner *,.tool-planner *::before,.tool-planner *::after{margin:0;padding:0}

.tool-planner .main{max-width:800px;margin:0 auto;padding:0}

.tool-planner .card{background:var(--tq-surface);border:1px solid var(--tq-line);border-radius:14px;
  padding:28px 32px;margin-bottom:24px;box-shadow:0 1px 2px rgba(6,28,20,.045)}

.tool-planner .card h2{font-family:var(--serif);font-size:1.18rem;font-weight:700;color:var(--forest);
  margin-bottom:4px;line-height:1.3;letter-spacing:-.012em}

.tool-planner .card-sub{font-size:13px;color:var(--muted);margin-bottom:22px;line-height:1.55}

/* inputs */
.tool-planner .fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}

.tool-planner .field{min-width:0}

.tool-planner .field label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-bottom:6px}

.tool-planner .input-wrap{position:relative}

.tool-planner .input-wrap .pre{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-size:15px;color:var(--muted);pointer-events:none}

.tool-planner .input-wrap input[type="number"]{width:100%;font-family:var(--sans);font-size:15px;
  color:var(--forest);background:var(--tq-tint-lt);border:1px solid var(--tq-line);border-radius:9px;
  padding:11px 12px 11px 28px;outline:none;transition:border-color .18s;-moz-appearance:textfield}

.tool-planner .input-wrap input[type="number"]:focus{border-color:var(--sage);background:var(--tq-surface)}

.tool-planner .input-wrap input[type="number"]::-webkit-outer-spin-button,
.tool-planner .input-wrap input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none}

.tool-planner .field-hint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}

.tool-planner .calc-row{display:flex;justify-content:flex-end}

.tool-planner .calc-btn{display:inline-flex;align-items:center;gap:9px;background:var(--mint);
  color:var(--forest);font-family:var(--serif);font-size:.94rem;font-weight:700;
  border:1.5px solid var(--mint);border-radius:var(--r-btn);padding:14px 30px;cursor:pointer;
  transition:background .18s,border-color .18s}

.tool-planner .calc-btn:hover{background:#2bc78d;border-color:#2bc78d}

/* results */
.tool-planner .results{display:none}

.tool-planner .results.show{display:block}

.tool-planner .gap-banner{border-radius:12px;padding:22px 26px;margin-bottom:24px;display:flex;
  align-items:center;gap:22px;flex-wrap:wrap}

/* the two state class names are set from the tool's JS, so they stay -
   only the colours behind them change */
.tool-planner .gap-banner.gold{background:var(--tq-tint-lt);border:1px solid #a9e8cf}

.tool-planner .gap-banner.green{background:rgba(52,211,153,.13);border:1px solid rgba(52,211,153,.4)}

.tool-planner .gap-big{font-family:var(--serif);font-size:clamp(30px,5vw,40px);font-weight:700;
  line-height:1.05;white-space:nowrap}

.tool-planner .gap-banner.gold .gap-big{color:var(--emerald-ink)}

.tool-planner .gap-banner.green .gap-big{color:var(--emerald-ink)}

.tool-planner .gap-lbl{font-size:12px;color:var(--muted);margin-top:3px}

.tool-planner .gap-text{font-size:14px;color:var(--body);line-height:1.75;min-width:0}

.tool-planner .gap-text strong{color:var(--forest);font-weight:600}

/* price-point cards */
.tool-planner .pp-head{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--forest);
  margin-bottom:4px;line-height:1.3;letter-spacing:-.012em}

.tool-planner .pp-sub{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.55}

.tool-planner .pp-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

.tool-planner .pp-card{border:2px solid var(--tq-line);border-radius:13px;padding:22px 18px;
  text-align:center;min-width:0}

.tool-planner .pp-card.c1{border-color:var(--tq-line);background:#fbfdfc}

.tool-planner .pp-card.c2{border-color:#a9e8cf;background:var(--tq-tint-lt)}

.tool-planner .pp-card.c3{border-color:var(--sage);background:rgba(52,211,153,.10)}

.tool-planner .pp-tier-lbl{font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-bottom:10px}

.tool-planner .pp-rate-wrap{position:relative;margin-bottom:4px}

.tool-planner .pp-rate-wrap .rpre{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  font-size:14px;color:var(--muted);pointer-events:none;font-weight:500}

.tool-planner .pp-rate-wrap input{width:100%;font-family:var(--serif);font-size:21px;font-weight:700;
  color:var(--forest);background:rgba(255,255,255,.85);border:1.5px solid var(--tq-line);
  border-radius:9px;padding:9px 9px 9px 26px;outline:none;transition:border-color .18s;
  -moz-appearance:textfield;text-align:center}

.tool-planner .pp-rate-wrap input::-webkit-outer-spin-button,
.tool-planner .pp-rate-wrap input::-webkit-inner-spin-button{-webkit-appearance:none}

.tool-planner .pp-rate-wrap input:focus{border-color:var(--sage)}

.tool-planner .pp-mo{font-size:11px;color:var(--muted);margin-bottom:16px;text-align:left;padding-left:2px}

.tool-planner .pp-divider{height:1px;background:var(--tq-line);margin-bottom:14px}

.tool-planner .pp-count{font-family:var(--serif);font-size:clamp(38px,6vw,50px);font-weight:700;
  line-height:1;color:var(--emerald-ink)}

.tool-planner .pp-count-lbl{font-size:12px;color:var(--muted);margin-bottom:14px}

.tool-planner .pp-info{font-size:12px;color:var(--body);background:rgba(255,255,255,.75);
  border-radius:8px;padding:9px 11px;text-align:left;line-height:1.6}

.tool-planner .pp-info strong{color:var(--forest);font-weight:600}

/* timeline table */
.tool-planner .tl-head{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--forest);
  margin-bottom:4px;line-height:1.3;letter-spacing:-.012em}

.tool-planner .tl-sub{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.55}

.tool-planner .tbl-scroll{overflow-x:auto}

.tool-planner table{width:100%;min-width:430px;border-collapse:collapse}

.tool-planner thead th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:10px 14px;text-align:left;border-bottom:2px solid var(--tq-tint);
  white-space:nowrap}

.tool-planner tbody td{padding:11px 14px;border-bottom:1px solid var(--tq-line);font-size:14px;
  color:var(--body);white-space:nowrap}

.tool-planner tbody tr:last-child td{border-bottom:none}

.tool-planner tbody td:first-child{font-weight:600;color:var(--forest)}

.tool-planner .tv{font-weight:600;color:var(--emerald-ink)}

.tool-planner .tv.now{color:var(--emerald)}

/* the tool's own free-training card, carried over */
.tool-planner .cta-card{background:var(--tq-ink);border-radius:14px;padding:36px 40px;text-align:center;
  margin-top:0}

.tool-planner .cta-card h3{font-family:var(--serif);font-size:1.3rem;font-weight:700;color:#fff;
  margin-bottom:10px;line-height:1.3}

.tool-planner .cta-card p{font-size:14px;color:rgba(255,255,255,.72);margin:0 auto 24px;max-width:44ch;
  line-height:1.7}

.tool-planner .cta-btn{display:inline-block;background:var(--mint);color:var(--forest);
  font-family:var(--serif);font-size:.94rem;font-weight:700;border:1.5px solid var(--mint);
  border-radius:var(--r-btn);padding:14px 30px;cursor:pointer;text-decoration:none;
  transition:background .18s,border-color .18s}

.tool-planner .cta-btn:hover{background:#2bc78d;border-color:#2bc78d;color:var(--forest)}

/* the source set outline:none on its inputs; the site's focus ring is restored
   here so every control stays keyboard-visible (WCAG 2.4.7) */
.tool-planner input[type="number"]:focus-visible,.tool-planner button:focus-visible,
.tool-planner a:focus-visible{
  outline:3px solid var(--emerald);outline-offset:2px;border-radius:6px}

/* -- tool responsive ------------------------------------------ */
@media (max-width:700px){
  .tool-planner .fields{grid-template-columns:1fr}
  .tool-planner .pp-cards{grid-template-columns:1fr}
  .tool-planner .card{padding:22px 18px}
  .tool-planner .cta-card{padding:28px 20px}
  .tool-planner .calc-row{justify-content:stretch}
  .tool-planner .calc-btn{width:100%;justify-content:center}
}

/* -- print ---------------------------------------------------- */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .site-head,.site-foot,.hero,.skip,.afterband,.orb-field,.tex,
  .tool-planner .calc-row,.tool-planner .cta-card{display:none !important}
  body{background:#fff;color:#000;font-size:9pt;margin:0}
  .toolband{padding:0;background:#fff}
  .toolband .wrap{padding:0;max-width:100%}
  .tool-planner .main{padding:0;max-width:100%}
  .tool-planner .card{page-break-inside:avoid;border:1px solid #d7e3de;border-radius:0;margin-bottom:12px}
  @page{margin:.65in;size:letter}
}