/* ═══════════════════════════════════════════════════════════════════════
   /tools/website-to-markdown — "Turn any page into LLM-ready Markdown."
   The hero IS the tool: a live HTML→Markdown/JSON engine with a token meter.
   Then: why raw HTML burns tokens, how the three steps map to Fetch/Extract,
   and a closer that scales it to one call. Widgets are hairline-on-transparent
   (never card fill). Chrome + band adaptation via _shared.
   ═══════════════════════════════════════════════════════════════════════ */
@import "../../_ds/fonts.css";
@import "../../_ds/theme.css";
@import "../../_shared/chrome.css";
@import "../../_shared/components.css";
@import "../../_shared/audience-switcher.css";

.wtm-main { position: relative; overflow-x: clip; }
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 640ms cubic-bezier(0.22,1,0.36,1), transform 640ms cubic-bezier(0.22,1,0.36,1); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ═══ ACT 1 — the tool ═══════════════════════════════════════════════════ */
.wtm-hero { padding: clamp(104px, 13vh, 150px) clamp(16px, 4vw, 64px) clamp(56px, 8vh, 96px); max-width: 1500px; margin-inline: auto; }
.wtm-h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 5vw, 74px); line-height: 0.98; letter-spacing: -0.03em; color: var(--text-primary); margin: 0; max-width: 16ch; }
.wtm-sub { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: var(--text-secondary); margin: 20px 0 0; max-width: 52ch; }

/* controls row */
.wtm-controls { margin-top: clamp(28px, 4vh, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.wtm-controls-label { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-quaternary); }
.wtm-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* the split stage */
.wtm-stage { margin-top: clamp(22px, 3vh, 34px); display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(14px, 1.6vw, 26px); align-items: stretch; }
.wtm-pane { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; }
.wtm-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--border-subtle); }
.wtm-pane-title { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.wtm-pane-title.raw::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-quaternary); margin-right: 8px; vertical-align: middle; }
.wtm-pane-title.clean::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #7ADAE6; margin-right: 8px; vertical-align: middle; }
.wtm-pane-hint { font-family: var(--font-code); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-quaternary); }
.wtm-code { margin: 0; padding: 16px 17px; font-family: var(--font-code); font-size: 12.5px; line-height: 1.62; white-space: pre-wrap; word-break: break-word; overflow-y: auto; height: clamp(320px, 46vh, 460px); color: var(--text-secondary); }
.wtm-code.out { color: var(--text-primary); }
/* left pane is an editable textarea — you paste straight into it */
textarea.wtm-code { display: block; width: 100%; box-sizing: border-box; border: none; background: transparent; resize: none; color: var(--text-secondary); }
textarea.wtm-code:focus { outline: none; }
textarea.wtm-code::placeholder { color: var(--text-quaternary); }

/* md/json toggle = DS .seg-control atom; Copy = DS .btn-marketing--secondary--sm. No overrides. */

/* center meter (the jaw-drop) */
.wtm-meter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: clamp(120px, 12vw, 190px); padding: 8px; }
.wtm-meter-save { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-hero); line-height: 0.9; letter-spacing: -0.03em; color: #7C4FE8; }
.wtm-meter-save::before { content: "−"; }
.wtm-meter-save::after { content: "%"; font-size: 0.5em; vertical-align: super; margin-left: 1px; }
.wtm-meter-caption { font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-quaternary); text-align: center; }
.wtm-meter-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; width: 100%; }
.wtm-meter-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--font-code); font-size: 12px; }
.wtm-meter-row .k { color: var(--text-quaternary); }
.wtm-meter-row .v { font-variant-numeric: tabular-nums; }
.wtm-meter-row.raw .v { color: var(--text-secondary); }
.wtm-meter-row.clean .v { color: #7ADAE6; }
.wtm-meter-arrow { color: var(--text-quaternary); font-size: 18px; line-height: 1; }

/* paste-your-own */
.wtm-action { margin-top: clamp(18px, 2.6vh, 30px); display: flex; align-items: center; gap: 16px 26px; flex-wrap: wrap; }
.wtm-note { font-family: var(--font-code); font-size: 11px; line-height: 1.5; color: var(--text-quaternary); margin: 0; max-width: 48ch; }
.wtm-note b { color: var(--text-tertiary); font-weight: 400; }

/* ═══ ACT 2 — why raw HTML burns tokens (SOLID teal band) ═══ */
.wtm-why { position: relative; background: #7ADAE6; padding: clamp(88px, 14vh, 170px) clamp(20px, 5vw, 80px); }
.wtm-why-inner { max-width: 1080px; margin-inline: auto; }
.wtm-why-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h2); line-height: 1.0; letter-spacing: -0.024em; color: #1D1612; margin: 0; max-width: 16ch; }
.wtm-why-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: rgba(29,22,18,0.82); margin: 20px 0 0; max-width: 54ch; }
.wtm-why-grid { margin-top: clamp(44px, 6vh, 72px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(29,22,18,0.18); border: 1px solid rgba(29,22,18,0.18); border-radius: 14px; overflow: hidden; }
.wtm-why-cell { background: #7ADAE6; padding: clamp(22px, 3vw, 34px); }
.wtm-why-cell h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h3); line-height: 1; letter-spacing: -0.02em; color: #1D1612; margin: 0; }
.wtm-why-cell p { font-family: var(--font-base); font-size: 14.5px; line-height: 1.5; color: rgba(29,22,18,0.78); margin: 12px 0 0; }

/* ═══ ACT 3 — how it works, mapped to the primitives ═══ */
.wtm-how { padding: clamp(96px, 15vh, 190px) clamp(20px, 5vw, 80px); max-width: 1180px; margin-inline: auto; }
.wtm-how-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h2); line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); margin: 0; max-width: 14ch; }
.wtm-how-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.55; color: var(--text-secondary); margin: 18px 0 0; max-width: 52ch; }
.wtm-steps { margin-top: clamp(48px, 7vh, 84px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
.wtm-step { border-top: 1px solid var(--border-subtle); padding-top: 20px; }
.wtm-step-n { font-family: var(--font-code); font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.08em; }
.wtm-step h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h4); line-height: 1.1; letter-spacing: -0.01em; color: var(--text-primary); margin: 14px 0 0; }
.wtm-step p { font-family: var(--font-base); font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); margin: 10px 0 0; }
.wtm-step p code { font-family: var(--font-code); font-size: 0.92em; color: var(--text-primary); }

/* ═══ ACT 4 — closer: one call at scale (SOLID purple band) ═══ */
.wtm-closer { position: relative; background: #7C4FE8; padding: clamp(96px, 15vh, 200px) clamp(20px, 5vw, 80px); text-align: center; }
.wtm-closer-inner { max-width: 760px; margin-inline: auto; }
.wtm-closer-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h2); line-height: 1.0; letter-spacing: -0.026em; color: #fff; margin: 0; }
.wtm-closer-lead { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: rgba(255,255,255,0.9); margin: 20px auto 0; max-width: 48ch; }
.wtm-snippet { margin: clamp(30px, 4vh, 44px) auto 0; max-width: 620px; text-align: left; border: 1px solid rgba(255,255,255,0.34); border-radius: 12px; padding: 16px 18px; font-family: var(--font-code); font-size: 13px; line-height: 1.7; color: #fff; overflow-x: auto; }
.wtm-snippet .c { color: rgba(255,255,255,0.62); }
.wtm-snippet .s { color: #1D1612; }
.wtm-closer-cta { margin-top: clamp(30px, 4vh, 44px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wtm-closer-tagline { font-family: var(--font-code); font-size: 12.5px; color: rgba(255,255,255,0.82); }

/* ═══ responsive ═══ */
@media (max-width: 900px) {
  .wtm-stage { grid-template-columns: 1fr; }
  .wtm-meter { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 22px; padding: 4px; }
  .wtm-meter-rows { flex-direction: row; width: auto; gap: 18px; }
  .wtm-meter-arrow { display: none; }
  .wtm-why-grid { grid-template-columns: 1fr; }
  .wtm-steps { grid-template-columns: 1fr; gap: 30px; }
}
@media (min-width: 1600px) {
  .wtm-h1 { font-size: clamp(70px, 4.6vw, 92px); }
  .wtm-code { font-size: 13px; }
}