/* Shared shell for the free tools — mobile-first, and deliberately narrow on desktop.
 *
 * Each tool page had grown its own <style> block (19-63 lines apiece) repeating the same
 * card, input row and offer patterns at three different max-widths. That is how five pages
 * end up feeling like five different sites, so the patterns live here once.
 *
 * The column is 600px, not the 860-1120px the rest of the site uses. A tool is operated,
 * not read: on a phone it is full width, and on a desktop it stays the same shape with the
 * page breathing around it. Stretching the same copy to 1120px turns a two-tap utility into
 * a wall of text — the "book" feel. 600px also lands running text near 65 characters, which
 * is where prose is comfortable anyway.
 *
 * Everything below is written mobile-first: the base rules ARE the phone, and the only
 * media query adds desktop breathing room. No max-width queries walking styles back.
 */

/* ---- column ------------------------------------------------------------------ */

.tool {
  --tool-col: 600px;
  --tool-gap: 1rem;
  width: 100%;
  max-width: var(--tool-col);
  margin: 0 auto;
  padding: 0 1rem;            /* phone: content never touches the edge */
}

/* Wider only for things that genuinely need it — a heat grid, a media gallery. Still
   centred, still bounded, so the page keeps its shape. */
.tool--wide { --tool-col: 760px; }

@media (min-width: 700px) {
  .tool {
    padding: 0 1.5rem;
    /* Visible margin either side so the column reads as a panel on the page rather than
       as text that ran out of room. */
  }
}

/* ---- header ------------------------------------------------------------------ */

.tool-head { text-align: center; padding: .5rem 0 0; }

.tool-head h1 {
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0 0 .5rem;
  text-wrap: balance;
}

@media (min-width: 700px) {
  .tool-head h1 { font-size: 2rem; }
}

.tool-sub {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 auto;
  max-width: 34rem;
}

@media (min-width: 700px) {
  .tool-sub { font-size: 1.06rem; }
}

/* ---- the input card ----------------------------------------------------------- */

.tool-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.1rem;
  background: var(--bg-alt);
  margin: 1.4rem 0;
}

@media (min-width: 700px) {
  .tool-card { padding: 1.4rem; }
}

.tool-label { font-weight: 700; display: block; margin-bottom: .5rem; font-size: .95rem; }

/* Stacks on a phone, sits inline once there is room. Stacked is the correct default:
   a 44px-tall button at full width is far easier to hit than one squeezed beside a field. */
.tool-row { display: flex; flex-direction: column; gap: .6rem; }

@media (min-width: 560px) {
  .tool-row { flex-direction: row; align-items: stretch; }
  .tool-row .btn { flex: 0 0 auto; }
}

.tool-input {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 .9rem;
  min-height: 48px;           /* comfortable touch target */
}

.tool-input .at { color: var(--text-secondary); font-weight: 700; margin-right: .15rem; }

.tool-input input {
  border: 0;
  outline: 0;
  width: 100%;
  background: transparent;
  padding: .8rem .2rem;
  font-size: 16px;            /* below 16px, iOS Safari zooms the page on focus */
  min-width: 0;               /* lets the field shrink inside a flex row */
}

.tool-note { margin: .85rem 0 0; font-size: .85rem; color: var(--text-secondary); }
.tool-msg  { margin: .85rem 0 0; font-size: .95rem; display: none; }
.tool-msg.err { color: #c0392b; }
.tool-msg.ok  { color: var(--text-secondary); }

/* ---- stat tiles --------------------------------------------------------------- */

.tool-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* two up on a phone, never one long list */
  gap: .6rem;
  margin: 1.1rem 0;
}

@media (min-width: 560px) {
  .tool-stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

.tool-stat {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .8rem .6rem;
  text-align: center;
  background: #fff;
}

.tool-stat .v {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.tool-stat .k {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-secondary);
  margin-top: .15rem;
}

.tool-stat.hot { border-color: rgba(232, 66, 91, .45); }
.tool-stat.hot .v { color: #e8425b; }

/* ---- the offer ---------------------------------------------------------------- */

.tool-offer {
  border: 1px solid rgba(232, 66, 91, .35);
  background: rgba(232, 66, 91, .05);
  border-radius: 16px;
  padding: 1.1rem;
  margin: 1.5rem 0;
}

@media (min-width: 700px) { .tool-offer { padding: 1.3rem; } }

.tool-offer h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.tool-offer p  { margin: 0 0 .9rem; color: var(--text-secondary); }

/* Full-width stacked buttons on a phone; inline once they fit. Three CTAs side by side on
   a 360px screen produces three unreadable slivers. */
.tool-ctas { display: flex; flex-direction: column; gap: .5rem; }
.tool-ctas .btn { width: 100%; justify-content: center; }

@media (min-width: 560px) {
  .tool-ctas { flex-direction: row; flex-wrap: wrap; }
  .tool-ctas .btn { width: auto; }
}

/* ---- prose -------------------------------------------------------------------- */

.tool-body h2 {
  font-size: 1.2rem;
  margin: 1.6rem 0 .4rem;
  text-wrap: balance;
}

.tool-body h3 { font-size: 1.02rem; margin: 1.1rem 0 .3rem; }

@media (min-width: 700px) {
  .tool-body h2 { font-size: 1.35rem; }
}

.tool-body p, .tool-body li { line-height: 1.65; }
.tool-body ul, .tool-body ol { padding-left: 1.15rem; }
.tool-body li { margin-bottom: .35rem; }

.tool-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin: .8rem 0;
}

.tool-body th, .tool-body td {
  text-align: left;
  padding: .5rem .4rem;
  border-bottom: 1px solid var(--border);
}

/* Anything that cannot shrink scrolls inside its own box rather than widening the page. */
.tool-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- notices ------------------------------------------------------------------ */

.tool-warn {
  border-left: 3px solid #e8a13a;
  background: rgba(232, 161, 58, .08);
  padding: .8rem 1rem;
  border-radius: 0 10px 10px 0;
  margin: 1rem 0;
  font-size: .92rem;
}

/* The closing offer. Slightly quieter than the post-result one so a page does not read as
   two identical pitches stacked on top of each other — this is the one every visitor sees,
   including the ones who never ran the tool. */
.tool-offer--footer {
  margin-top: 2rem;
  border-color: rgba(232, 66, 91, .28);
}