/* ==========================================================================
   NewsTrove landing page
   Page-scoped styles, loaded only by /software/newstrove.php via
   $page_styles in includes/header.php. Everything here is prefixed .nt-
   so it can never leak into the rest of the site.

   Colour comes from the site variables in style.css -- no new palette.
   Structure deliberately mirrors voicetrove.css so the two product pages
   stay one design rather than two.
   ========================================================================== */

.nt-page {
  --nt-accent: #4ba9e8;
  --nt-accent-soft: #8ed0ff;
  --nt-good: #2f9e6b;
  --nt-bad: #c0392b;
  --nt-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* --- shared bits ---------------------------------------------------------- */

.nt-page .nt-section { padding: 64px 0; }
.nt-page .nt-section.nt-tight { padding: 44px 0; }
.nt-page .nt-section.nt-soft { background: var(--soft-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nt-page .nt-section.nt-dark { background: var(--navy); color: #fff; }
.nt-page .nt-section.nt-dark h2,
.nt-page .nt-section.nt-dark h3 { color: #fff; }
.nt-page .nt-section.nt-dark .nt-lead { color: #c3d2e0; }

/* balance on the big type, pretty on the body copy: at 40px a heading that
   overruns by one word leaves that word alone on a line, which reads as a
   mistake. Both degrade to normal wrapping where unsupported. */
.nt-page h1,
.nt-page h2 { text-wrap: balance; }
.nt-page .nt-lead,
.nt-page .nt-cta p { text-wrap: pretty; }

.nt-page h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; color: var(--navy); margin: 0 0 14px; }
.nt-page h3 { font-size: 21px; color: var(--navy); margin: 0 0 8px; }
.nt-page .nt-lead { font-size: 19px; color: var(--muted); max-width: 760px; }
.nt-page .nt-center { text-align: center; }
.nt-page .nt-center .nt-lead { margin-left: auto; margin-right: auto; }

.nt-page .nt-kicker {
  text-transform: uppercase; letter-spacing: .13em; font-size: 12px;
  font-weight: 700; color: var(--blue); margin: 0 0 10px;
}
.nt-page .nt-dark .nt-kicker,
.nt-page .nt-hero .nt-kicker { color: var(--nt-accent-soft); }

/* --- hero ----------------------------------------------------------------- */

.nt-hero {
  background: linear-gradient(160deg, #0b1725 0%, var(--navy) 45%, #17324b 100%);
  color: #fff;
  padding: 72px 0 64px;
  border-bottom: 3px solid var(--blue);
}
.nt-hero h1 {
  font-size: clamp(38px, 5.6vw, 62px);
  line-height: 1.06;
  margin: 0 0 20px;
  color: #fff;
  max-width: 15ch;
}
.nt-hero h1 em { font-style: normal; color: var(--nt-accent-soft); }
.nt-hero-copy { font-size: 20px; color: #cfdce8; max-width: 660px; margin: 0 0 12px; }
.nt-hero-sub { font-size: 16px; color: #92a8bd; max-width: 620px; }

.nt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .95fr);
  gap: 52px;
  align-items: center;
}

.nt-hero .button { padding: 14px 26px; font-size: 16px; }
.nt-hero .button.nt-ghost {
  background: transparent; border-color: rgba(255,255,255,.4); color: #fff;
}
.nt-hero .button.nt-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }

.nt-status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 18px;
  background: rgba(75,169,232,.15); border: 1px solid rgba(142,208,255,.4);
  border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--nt-accent-soft);
}
.nt-status-pill:before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--nt-accent-soft);
}

/* --- dark screen panel ---------------------------------------------------- */

.nt-panel {
  background: #0d1a29;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.nt-panel-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: var(--nt-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: #7f95ab;
}
.nt-panel-bar .nt-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--nt-accent);
  box-shadow: 0 0 0 3px rgba(75,169,232,.22);
}
.nt-panel-body { padding: 14px 16px; }
.nt-panel-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px;
  background: rgba(255,255,255,.05);
  border-top: 1px solid rgba(255,255,255,.1);
}
.nt-fake-btn {
  padding: 7px 16px; border-radius: 4px;
  background: var(--nt-good); color: #fff;
  font-size: 13px; font-weight: 700;
}
.nt-foot-note {
  font-family: var(--nt-mono); font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase; color: #7f95ab;
}

/* --- candidate rows (hero visual) ----------------------------------------- */

.nt-cand {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 11px;
  padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.09);
  align-items: center;
}
.nt-cand:last-child { border-bottom: 0; }
.nt-cand .nt-tick {
  width: 17px; height: 17px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,.28);
  font-size: 12px; line-height: 15px; text-align: center; color: transparent;
}
.nt-cand.nt-picked .nt-tick { background: var(--nt-accent); border-color: var(--nt-accent); color: #08131f; font-weight: 700; }
.nt-cand .nt-chead { font-size: 14px; color: #9fb4c8; line-height: 1.4; }
.nt-cand.nt-picked .nt-chead { color: #fff; font-weight: 700; }
.nt-cand .nt-chead small {
  display: block; margin-top: 2px; font-weight: 400;
  color: #6f869c; font-size: 11.5px;
}

.nt-badge {
  font-family: var(--nt-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 3px; white-space: nowrap;
}
.nt-badge.nt-b-full { background: rgba(47,158,107,.2); color: #6ee2a8; border: 1px solid rgba(110,226,168,.35); }
.nt-badge.nt-b-sum  { background: rgba(255,255,255,.08); color: #a8bccf; border: 1px solid rgba(255,255,255,.16); }
.nt-badge.nt-b-head { background: rgba(233,69,96,.18); color: #ff8fa0; border: 1px solid rgba(255,143,160,.35); }

/* --- step list ------------------------------------------------------------ */

.nt-step {
  display: grid; grid-template-columns: 26px 1fr; gap: 13px;
  padding: 11px 0; border-bottom: 1px dashed rgba(255,255,255,.09);
  align-items: baseline;
}
.nt-step:last-child { border-bottom: 0; }
.nt-step .nt-stepnum {
  font-family: var(--nt-mono); font-size: 12px; font-weight: 700;
  color: #6f869c; text-align: center;
}
.nt-step .nt-what { font-size: 14px; color: #cbd9e6; }
.nt-step .nt-what small { display: block; color: #7f95ab; font-size: 12px; margin-top: 2px; }
.nt-step.nt-gate { background: rgba(75,169,232,.1); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.nt-step.nt-gate .nt-what { color: #fff; font-weight: 700; }
.nt-step.nt-gate .nt-stepnum { color: var(--nt-accent-soft); }
.nt-step .nt-tag {
  font-family: var(--nt-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--nt-accent-soft); font-weight: 400;
}

/* --- statement block ------------------------------------------------------ */

.nt-statement { text-align: center; max-width: 820px; margin: 0 auto; }
.nt-statement p { font-size: clamp(22px, 2.8vw, 32px); line-height: 1.35; color: var(--navy); margin: 0 0 18px; font-weight: 700; }
.nt-statement p.nt-plain { font-size: 19px; font-weight: 400; color: var(--muted); }
.nt-statement .nt-hl { color: var(--blue); }

/* Each sentence of the statement is its own block so it wraps on its own
   terms. A <br> between them did not do this: at 32px in an 820px measure the
   first sentence overruns by one word and drops "mattering." onto a line of
   its own, which no hard break can prevent. Balancing splits it evenly
   instead. Direct children only -- .nt-hl is nested and must stay inline. */
.nt-statement .nt-say > span { display: block; text-wrap: balance; }

/* --- the four costs ------------------------------------------------------- */

.nt-costs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.nt-cost { padding-top: 16px; border-top: 3px solid var(--line); }
.nt-cost h3 { font-size: 17px; margin: 0 0 6px; }
.nt-cost p { margin: 0; font-size: 15px; color: var(--muted); }

/* --- big alternating feature blocks --------------------------------------- */

.nt-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.nt-feature:last-of-type { border-bottom: 0; }
.nt-feature.nt-plain-feature { padding: 0; border-bottom: 0; }
.nt-feature.nt-flip .nt-feature-copy { order: 2; }
.nt-feature h2 { font-size: clamp(26px, 3vw, 34px); }
.nt-feature .nt-tagline { font-size: 20px; font-weight: 700; color: var(--blue); margin: 0 0 14px; }
.nt-feature p { color: var(--ink); }
.nt-feature .nt-note {
  margin-top: 18px; padding: 12px 16px;
  background: var(--soft); border-left: 3px solid var(--blue);
  font-size: 15px; color: var(--muted);
}
.nt-dark .nt-feature { border-bottom-color: rgba(255,255,255,.12); }
.nt-dark .nt-feature p { color: #c3d2e0; }
.nt-dark .nt-feature .nt-tagline { color: var(--nt-accent-soft); }
.nt-dark .nt-feature .nt-note { background: rgba(255,255,255,.06); border-left-color: var(--nt-accent); color: #b6c7d8; }
.nt-dark .nt-feature .nt-note strong { color: #fff; }

/* --- the four written versions -------------------------------------------- */

.nt-versions {
  background: #0d1a29; border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px; padding: 6px 0 2px; box-shadow: 0 18px 44px rgba(16,28,43,.28);
}
.nt-ver { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.nt-ver:last-of-type { border-bottom: 0; }
.nt-ver .nt-ver-tag {
  display: block; margin-bottom: 6px;
  font-family: var(--nt-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #7f95ab;
}
.nt-ver p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #cbd9e6; }
.nt-ver.nt-ver-air { background: rgba(75,169,232,.1); }
.nt-ver.nt-ver-air .nt-ver-tag { color: var(--nt-accent-soft); }
.nt-ver.nt-ver-air p { color: #fff; }
.nt-ver .nt-ver-meta {
  display: block; margin-top: 7px;
  font-family: var(--nt-mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--nt-accent-soft);
}
.nt-illus {
  margin: 14px 18px 12px; font-size: 12.5px; color: #7f95ab; font-style: italic;
}

/* --- guard demo ----------------------------------------------------------- */

.nt-guards {
  background: #0d1a29; border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px; padding: 6px 0; box-shadow: 0 18px 44px rgba(16,28,43,.28);
}
.nt-guard {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.nt-guard:last-child { border-bottom: 0; }
.nt-guard .nt-mark { font-weight: 700; font-size: 15px; line-height: 1.5; }
.nt-guard.nt-rejected .nt-mark { color: #ff7b6b; }
.nt-guard.nt-flagged .nt-mark { color: #ffc36b; }
.nt-guard.nt-passed .nt-mark { color: #6ee2a8; }
.nt-guard .nt-script { font-size: 15px; color: #dbe6f0; font-style: italic; }
.nt-guard.nt-rejected .nt-script { text-decoration: line-through; text-decoration-color: rgba(255,123,107,.6); color: #93a7ba; }
/* inline-block, not block, and that is load-bearing. text-decoration
   propagates from .nt-script to its descendants and a child cannot cancel it
   with text-decoration:none -- but it does NOT propagate into an atomic
   inline. Without this the red reason line is struck through along with the
   rejected quote above it. (voicetrove.css has the same construct and the
   same artefact.) */
.nt-guard .nt-why {
  display: inline-block; margin-top: 4px; font-family: var(--nt-mono);
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  font-style: normal;
}
.nt-guard.nt-rejected .nt-why { color: #ff7b6b; }
.nt-guard.nt-flagged .nt-why { color: #ffc36b; }
.nt-guard.nt-passed .nt-why { color: #6ee2a8; }

/* --- the drawn cards ------------------------------------------------------ */

.nt-cards-demo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.nt-card-wide,
.nt-card-sq {
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px;
  padding: 18px;
  background: linear-gradient(155deg, #123c5c 0%, var(--navy) 70%);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: 0 12px 32px rgba(16,28,43,.16);
  color: #fff;
}
/* Three children, pinned apart: eyebrow at the top, headline and station bar
   at the foot. Same shape as the drawn card the system actually renders. */
.nt-card-wide { aspect-ratio: 1200 / 630; justify-content: space-between; }
.nt-card-sq { aspect-ratio: 1 / 1; }
.nt-card-wide .nt-card-eyebrow {
  font-family: var(--nt-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--nt-accent-soft);
}
.nt-card-wide .nt-card-head { margin-top: auto; }
/* Headline sizes are held down deliberately. aspect-ratio yields to content,
   so an over-large headline wrapping to four lines stretches the card off the
   1200x630 shape the copy right next to it claims. */
.nt-card-wide .nt-card-head { font-size: clamp(14px, 1.55vw, 21px); font-weight: 700; line-height: 1.18; }
.nt-card-sq   .nt-card-head { font-size: clamp(13px, 1.25vw, 17px); font-weight: 700; line-height: 1.2; }
.nt-card-wide .nt-card-foot,
.nt-card-sq   .nt-card-foot {
  margin-top: 10px; padding-top: 9px;
  border-top: 2px solid var(--nt-accent);
  font-family: var(--nt-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: #a8bccf;
}
.nt-cards-demo .nt-illus { grid-column: 1 / -1; margin: 0; }

/* --- two-column honest split ---------------------------------------------- */

.nt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.nt-why-not {
  padding: 26px 28px; border-radius: 5px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
}
.nt-why-not h3 { color: #fff; font-size: 20px; margin: 0 0 12px; }
.nt-why-not p { color: #b6c7d8; font-size: 15.5px; }
.nt-why-not p:last-child { margin-bottom: 0; }
.nt-why-not strong { color: #fff; }
.nt-why-not .fine-print { color: #8ba1b7; font-size: 14px; }
.nt-why-not.nt-instead { background: rgba(75,169,232,.1); border-color: rgba(142,208,255,.35); }

/* --- feature grid --------------------------------------------------------- */

.nt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.nt-grid .nt-cell {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 22px; box-shadow: 0 4px 14px rgba(16,28,43,.04);
}
.nt-grid .nt-cell h3 { font-size: 17px; margin-bottom: 6px; }
.nt-grid .nt-cell p { margin: 0; font-size: 15px; color: var(--muted); }
.nt-grid .nt-cell code { font-family: var(--nt-mono); font-size: 13.5px; }

/* --- the three honest cards ----------------------------------------------- */

.nt-honest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.nt-hcard {
  padding: 24px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--soft); border-top: 3px solid var(--muted);
}
.nt-hcard h3 { font-size: 18px; margin-bottom: 8px; }
.nt-hcard p { margin: 0; font-size: 15px; color: var(--muted); }

/* --- proof stats ---------------------------------------------------------- */

.nt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.nt-stat { text-align: center; padding: 24px 14px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 4px; }
.nt-stat .nt-num { display: block; font-size: 34px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.nt-stat .nt-cap { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }

/* --- pricing -------------------------------------------------------------- */

.nt-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 34px; align-items: stretch; max-width: 780px; margin-left: auto; margin-right: auto; }
.nt-price {
  display: flex; flex-direction: column;
  background: var(--navy-2); border: 1px solid rgba(255,255,255,.14);
  border-radius: 5px; padding: 28px;
}
.nt-price h3 { color: #fff; font-size: 19px; }
.nt-price .nt-amount { font-size: 30px; font-weight: 700; color: #fff; margin: 10px 0 4px; }
.nt-price .nt-amount.nt-unset { color: #5d738a; }
.nt-price .nt-per { font-size: 14px; color: #90a6bb; margin-bottom: 18px; }
.nt-price ul { list-style: none; margin: 0 0 20px; padding: 0; }
.nt-price li { padding: 6px 0 6px 24px; position: relative; font-size: 15px; color: #b6c7d8; }
.nt-price li:before { content: '·'; position: absolute; left: 6px; color: #6f869c; font-weight: 700; }
.nt-price li.nt-yes:before { content: '✓'; color: #6ee2a8; }
.nt-price .button { margin-top: auto; text-align: center; }
.nt-price.nt-ours { position: relative; background: linear-gradient(165deg, #12405f 0%, #0d2c45 100%); border-color: var(--nt-accent); border-top: 4px solid var(--nt-accent); }
.nt-price .nt-blurb { margin: 0 0 16px; font-size: 15px; color: #9fb5ca; }
.nt-price .nt-badge-tier {
  position: absolute; top: -12px; right: 20px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--nt-accent); color: #08131f;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.nt-placeholder-note {
  max-width: 780px; margin: 22px auto 0; padding: 14px 18px; border-radius: 4px;
  background: rgba(255,195,107,.12); border: 1px dashed rgba(255,195,107,.5);
  color: #ffd79a; font-size: 14px;
}
.nt-placeholder-note code { font-family: var(--nt-mono); font-size: 13px; }

/* --- faq ------------------------------------------------------------------ */

.nt-faq { max-width: 820px; margin: 30px auto 0; }
.nt-faq details {
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
  margin-bottom: 12px; padding: 0 20px;
}
.nt-faq summary {
  cursor: pointer; padding: 17px 0; font-weight: 700; color: var(--navy);
  font-size: 17px; list-style: none;
}
.nt-faq summary::-webkit-details-marker { display: none; }
.nt-faq summary:before { content: '+ '; color: var(--blue); font-weight: 700; }
.nt-faq details[open] summary:before { content: '− '; }
.nt-faq details p { margin: 0 0 18px; color: var(--muted); }

/* --- final cta ------------------------------------------------------------ */

.nt-cta { text-align: center; padding: 72px 0; background: linear-gradient(160deg, #0b1725 0%, var(--navy) 60%, #17324b 100%); color: #fff; }
.nt-cta h2 { color: #fff; font-size: clamp(30px, 4vw, 44px); max-width: 18ch; margin: 0 auto 18px; }
.nt-cta p { font-size: 19px; color: #c3d2e0; max-width: 620px; margin: 0 auto 28px; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .nt-hero-grid,
  .nt-feature { grid-template-columns: 1fr; gap: 34px; }
  .nt-feature.nt-flip .nt-feature-copy { order: 0; }
  .nt-costs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nt-grid,
  .nt-honest,
  .nt-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nt-honest { grid-template-columns: 1fr; }
  .nt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .nt-hero { padding: 52px 0 46px; }
  .nt-section { padding: 46px 0; }
  .nt-feature { padding: 40px 0; }
  .nt-costs,
  .nt-grid,
  .nt-two,
  .nt-price-grid,
  .nt-cards-demo,
  .nt-stats { grid-template-columns: 1fr; }
  .nt-price.nt-ours { margin-top: 14px; }
  .nt-hero .button-row { display: grid; grid-template-columns: 1fr; }
  .nt-cand { grid-template-columns: 22px 1fr; }
  .nt-cand .nt-badge { grid-column: 2; justify-self: start; margin-top: 4px; }
}