/* Creating Tomorrow: the clean look (the homepage's "v5") for every page except the homepage and the dashboard:
   Learn, Videos, Career Tools and the tools, articles, About and the trust pages.
   (The file keeps its old name because the pages and tests already point at it.)
   Loaded after style.css and home-v4.css; everything is scoped to body.pages-v4, so the homepage (body.home-v5)
   and the dashboard (body.dashboard-v4) are untouched.
   Same language as the homepage: white and pale-gray bands, hairline borders instead of shadows, one cobalt for
   actions, gold for emphasis, serif headlines (type tokens in style.css). Generic restyling uses body:where(.pages-v4)
   so each page's own component rules still win when they are more specific; deliberate overrides use plain body.pages-v4.
   Colours: the homepage's. Body gray and the small gold text are the readable (WCAG AA) versions; see home-v5.css. */

body.pages-v4 {
  --navy: #071c42;
  --ink: #071c42;
  --muted: #596b85;
  --blue: #0756ed;
  --blue-deep: #0646c8;
  --gold: #ffbc00;
  --gold-hover: #e8aa00;
  --gold-text: #a66b00;
  --pale: #f2f5f8;
  --line: #e2e8f0;
  --line-soft: #eceff4;
  --tint-blue: #eaf1ff;
  --tint-gold: #fff5dd;
  --radius: 14px;
  --radius-sm: 10px;
  --border: #e2e8f0;
  --wrap: 1180px;
  margin: 0;
  color: var(--ink);
  background: #ffffff;
}

body.pages-v4 a:focus-visible,
body.pages-v4 button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---------- Header: thin, white, quiet (same as the homepage) ---------- */
body.pages-v4 .site-nav {
  max-width: none;
  margin: 0;
  padding: 1rem max(1.5rem, calc((100% - var(--wrap)) / 2 + 1.5rem));
  gap: 0.5rem 1rem;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
body.pages-v4 .nav-logo img { height: 40px; }
body.pages-v4 .nav-wordmark-title { color: var(--navy); }
body.pages-v4 .nav-links { gap: 0.1rem 0.5rem; align-items: center; }
body.pages-v4 .nav-links a { color: var(--navy); font-size: 0.95rem; font-weight: 600; padding: 0.6rem 0.8rem; border-bottom: 2px solid transparent; border-radius: 0; background: none; }
body.pages-v4 .nav-links a:hover { color: var(--blue); background: none; }
body.pages-v4 .nav-links a.nav-active { color: var(--navy); border-bottom-color: var(--gold); }
body.pages-v4 .nav-links a.nav-cta { background: none; color: var(--navy); border-radius: 0; padding: 0.6rem 0.8rem; font-weight: 600; opacity: 1; }
body.pages-v4 .nav-links a.nav-cta:hover { color: var(--blue); text-decoration: none; opacity: 1; }
body.pages-v4 .nav-links a.nav-account { margin-left: 0.75rem; padding: 0.6rem 1.5rem; border: 2px solid var(--navy); border-radius: 10px; font-weight: 700; background: var(--navy); color: #ffffff; }
body.pages-v4 .nav-links a.nav-account:hover { background: var(--blue); border-color: var(--blue); color: #ffffff; }
body.pages-v4 .nav-wordmark-gold { color: var(--gold-text); }
@media (max-width: 640px) {
  body.pages-v4 .site-nav { padding: 0.75rem 1rem; }
  body.pages-v4 .nav-links { justify-content: flex-start; gap: 0.05rem 0.15rem; }
  body.pages-v4 .nav-links a { padding: 0.55rem 0.5rem; font-size: 0.9rem; }
  body.pages-v4 .nav-links a.nav-account { margin-left: 0; }
}

/* ---------- Page title: a pale band, a serif headline ---------- */
body:where(.pages-v4) .page-header { padding: 3.25rem 1.25rem 2.5rem; background: var(--pale); text-align: center; }
body:where(.pages-v4) .page-header h1 { margin: 0 0 0.6rem; font-family: var(--font-serif); font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; color: var(--navy); }
body:where(.pages-v4) .page-header .tagline { margin: 0.2rem auto 0; max-width: 46rem; font-size: var(--fs-lg); color: var(--muted); }
body.pages-v4 .guide-eyebrow, body.pages-v4 .page-header .guide-eyebrow { color: var(--blue); }

/* ---------- Pages built as one panel (Learn, Career Tools hub, Videos): a pale head, then white bands ---------- */
body.pages-v4 main.pv-main { max-width: none; padding: 0; margin: 0; }
body.pages-v4 .pv-panel { max-width: none; width: 100%; margin: 0; overflow: visible; background: none; border: 0; box-shadow: none; border-radius: 0; }
body:where(.pages-v4) main > .card.pv-panel { padding: 0; }
body.pages-v4 .pv-panel > .pv-band { max-width: var(--wrap); margin: 0 auto; padding: 3.25rem 1.5rem; }
body.pages-v4 .pv-panel > .pv-band + .pv-band { border-top: 1px solid var(--line); }
body.pages-v4 .pv-head { text-align: center; padding: 3.25rem 1.5rem 2.5rem; background: var(--pale); }
body.pages-v4 .pv-head h1 { margin: 0 0 0.6rem; font-family: var(--font-serif); font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; color: var(--navy); }
body.pages-v4 .pv-head p { margin: 0 auto; max-width: 40rem; font-size: var(--fs-lg); color: var(--muted); }
body.pages-v4 .pv-sub { margin: 0.1rem 0 1.5rem; color: var(--muted); font-size: 1.05rem; }
body.pages-v4 .pv-band .hv-h2, body.pages-v4 .pv-band h2 { margin: 0 0 0.4rem; font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 700; color: var(--navy); }
body.pages-v4 .pv-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; display: grid; }
body.pages-v4 .pv-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; display: grid; flex-direction: initial; }
@media (max-width: 900px) { body.pages-v4 .pv-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.pages-v4 .pv-panel > .pv-band { padding: 2.5rem 1.25rem; } }
@media (max-width: 700px) { body.pages-v4 .pv-guides { grid-template-columns: 1fr; } }
@media (max-width: 480px) { body.pages-v4 .pv-tools { grid-template-columns: 1fr; } }

/* ---------- Cards: white, a hairline, no shadow (guide tiles, tool tiles, the Career Tools buttons) ---------- */
body.pages-v4 .hv-guide, body.pages-v4 .hv-tool, body.pages-v4 .mode-btn.hv-tool {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 1.5rem 1.4rem 1.3rem;
  text-align: left;
  font-family: inherit;
  font-weight: 400;
  color: var(--muted);
  background: #ffffff;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  opacity: 1;
  transform: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.pages-v4 .hv-guide:hover, body.pages-v4 .hv-tool:hover, body.pages-v4 .mode-btn.hv-tool:hover {
  border-color: #b9cdf7;
  border-top-color: #b9cdf7;
  box-shadow: 0 10px 28px -12px rgba(11, 36, 84, 0.2);
  transform: none;
  background: #ffffff;
  opacity: 1;
}
body.pages-v4 .hv-vtop { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
body.pages-v4 .hv-vicon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--tint-blue); color: var(--blue); box-shadow: none; border: 0; }
body.pages-v4 .hv-vicon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.pages-v4 .hv-t-butter .hv-vicon, body.pages-v4 .hv-t-mint .hv-vicon { background: var(--tint-gold); color: var(--gold-text); }
body.pages-v4 span.hv-vtype { color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
body.pages-v4 .hv-guide b, body.pages-v4 .hv-tool b, body.pages-v4 .mode-btn.hv-tool b { color: var(--navy); font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
body.pages-v4 span.hv-vdesc { color: var(--muted); font-size: 1rem; line-height: 1.55; }
body.pages-v4 span.hv-vfoot { margin-top: auto; padding-top: 0.8rem; color: var(--blue); font-size: 0.98rem; font-weight: 600; }
body.pages-v4 .hv-guide:hover .hv-vfoot, body.pages-v4 .mode-btn.hv-tool:hover .hv-vfoot { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Content cards on the builder pages (forms, results) ---------- */
body:where(.pages-v4) main > .card { padding: 1.9rem 1.9rem; background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
body.pages-v4 main { padding-top: 2rem; }
body.pages-v4 main.pv-main { padding-top: 0; }
body:where(.pages-v4) h2, body:where(.pages-v4) .card h2 { font-family: var(--font-serif); letter-spacing: -0.005em; color: var(--navy); }

/* ---------- Forms ---------- */
body:where(.pages-v4) .field input[type="file"],
body:where(.pages-v4) .field input[type="text"],
body:where(.pages-v4) .field input[type="email"],
body:where(.pages-v4) .field input[type="password"],
body:where(.pages-v4) .field input[type="tel"],
body:where(.pages-v4) .field textarea,
body:where(.pages-v4) .field select {
  border: 1px solid #c9d3e3;
  border-radius: var(--radius-sm);
  background: #ffffff;
  padding: 0.7rem 0.8rem;
  color: var(--navy);
}
body:where(.pages-v4) .field input:focus,
body:where(.pages-v4) .field textarea:focus,
body:where(.pages-v4) .field select:focus { outline: 3px solid rgba(7, 95, 234, 0.2); outline-offset: 0; border-color: var(--blue); }
body:where(.pages-v4) select { font-family: inherit; }

/* ---------- Buttons: flat cobalt for actions, outline for the quieter choice, gold for the headline call to action ---------- */
body:where(.pages-v4) button {
  min-height: 44px;
  background: var(--blue);
  color: #ffffff;
  border: 0;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 600;
  box-shadow: none;
  transition: background 0.15s ease;
}
body:where(.pages-v4) button:hover { opacity: 1; transform: none; background: var(--blue-deep); }
body:where(.pages-v4) button:disabled { opacity: 0.5; background: var(--blue); cursor: not-allowed; }
body.pages-v4 .btn-secondary { background: #ffffff; color: var(--blue); border: 2px solid var(--blue); border-radius: var(--radius-sm); box-shadow: none; }
body.pages-v4 .btn-secondary:hover { background: var(--tint-blue); border-color: var(--blue); opacity: 1; }
body.pages-v4 .btn-primary { background: var(--blue); border-radius: var(--radius-sm); }
body.pages-v4 .btn-gold { background: var(--gold); color: var(--navy); border: 0; box-shadow: none; }
body.pages-v4 .btn-gold:hover { background: var(--gold-hover); }
body.pages-v4 .btn-green { background: #1f7a3f; color: #ffffff; border: 0; box-shadow: none; }
body.pages-v4 .btn-green:hover { background: #16602f; opacity: 1; }
body.pages-v4 .btn-crimson { background: #c8102e; color: #ffffff; border: 0; box-shadow: none; }
body.pages-v4 .btn-crimson:hover { background: #8f0b22; opacity: 1; }

/* steps along the top of the builder tools */
body:where(.pages-v4) .wizard-progress { gap: 0.4rem 1rem; }
body.pages-v4 .wizard-step-label.active { color: var(--blue); }

/* ---------- Videos ---------- */
body.pages-v4 #video-list { display: grid; gap: 1rem; }
body.pages-v4 .video-card { position: relative; padding: 1.15rem 1.2rem 1.15rem 4.4rem; background: #ffffff; border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
body.pages-v4 .video-card:hover { border-color: #b9cdf7; border-top-color: #b9cdf7; }
body.pages-v4 .video-card::before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 1.15rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tint-blue) url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%230756ed%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 5.5v13l11-6.5z%22/%3E%3C/svg%3E") center / 52% no-repeat;
  box-shadow: none;
}
body.pages-v4 .video-card strong { font-size: 1.05rem; color: var(--navy); }
body.pages-v4 .coming-soon { background: var(--tint-gold); border-color: #f1dca0; color: #7a5200; }

/* ---------- Spotlight's dropdown sections: white, hairline, no colored edges ---------- */
body.pages-v4.spotlight-page .input-options { display: grid; gap: 0.9rem; }
body.pages-v4.spotlight-page .input-option { --opt: var(--blue); border: 1px solid var(--line); border-left-width: 1px; border-radius: var(--radius); background: #ffffff; box-shadow: none; }
body.pages-v4.spotlight-page .input-option:nth-of-type(n) { background: #ffffff; }
body.pages-v4.spotlight-page .input-option:has(.input-option-toggle[aria-expanded="true"]):nth-of-type(n) { border-color: #b9cdf7; }
body.pages-v4.spotlight-page .input-option:hover { transform: none; box-shadow: none; border-color: #b9cdf7; }
body.pages-v4.spotlight-page .input-option .input-option-toggle { background: transparent; box-shadow: none; border: 0; border-radius: var(--radius); color: var(--navy); min-height: 0; }
body.pages-v4.spotlight-page .input-option .input-option-toggle:hover { transform: none; background: transparent; }
body.pages-v4.spotlight-page .input-option .input-option-toggle strong { color: var(--navy); font-family: var(--font-serif); font-size: 1.1rem; }
body.pages-v4.spotlight-page .page-header h1 { font-size: var(--fs-h2); }

/* ---------- Plain document pages (privacy, terms, ...) ---------- */
body.pages-v4 .doc-hero { max-width: none; width: 100%; margin: 0; padding: 3.25rem 1.25rem 2.5rem; background: var(--pale); }
body.pages-v4 .doc-hero h1 { color: var(--navy); letter-spacing: -0.01em; }
body.pages-v4 .doc-lead { color: var(--muted); }
body.pages-v4 .doc-main { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; margin: 2.25rem auto 3rem; padding: 2rem 2rem 3rem; width: calc(100% - 2.5rem); max-width: 46rem; box-sizing: border-box; }
body.pages-v4 .doc-main h2 { color: var(--navy); }
@media (max-width: 560px) { body.pages-v4 .doc-main { padding: 1.4rem 1.2rem 2rem; width: calc(100% - 1.5rem); } }

/* ---------- About ---------- */
body.pages-v4 .about-hero { padding: 3.25rem 1.25rem 2.5rem; background: var(--pale); }
body.pages-v4 .about-hero h1 { color: var(--navy); letter-spacing: -0.01em; }
body.pages-v4 .about-hero-primary { color: var(--muted); font-weight: 500; }
body.pages-v4 .about-main { background: #ffffff; }
body.pages-v4 .about-main .about-section { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; max-width: 46rem; width: calc(100% - 2.5rem); margin: 2.25rem auto 3rem; padding: 2rem 0; box-sizing: border-box; }
body.pages-v4 .page-header:has(.guide-eyebrow) h1,
body.pages-v4 .about-hero h1 { font-size: var(--fs-h2); max-width: 24em; margin-left: auto; margin-right: auto; text-wrap: balance; }

/* ---------- The Career Tools hub is wider than the narrow form column the rest of the page uses ---------- */
/* 100vw counts the scrollbar, so the centred panel could be wider than the page; the body clips that overhang (the panel keeps its own side padding, so nothing visible is lost) */
body.pages-v4 { overflow-x: clip; }
body.pages-v4 #step-mode.pv-panel { position: relative; left: 50%; transform: translateX(-50%); width: min(var(--wrap), 100vw); max-width: none; background: none; border: 0; padding: 0; margin-top: 0; }
body.pages-v4 #step-mode.pv-panel > .mode-choices, body.pages-v4 #step-mode .pv-tools { padding: 0 1.5rem; box-sizing: border-box; }
body.pages-v4 #step-mode.pv-panel .pv-tools { margin-top: 0.5rem; }

/* the small icon chip beside a section heading belongs to the old homepage look */
body.pages-v4 .hv-h2::before { display: none; }

/* ---------- Spotlight: the same plain pale head as every other page ---------- */
body.pages-v4.spotlight-page .page-header { max-width: none; margin: 0; padding: 3.25rem 1.25rem 2.5rem; background: var(--pale); border: 0; border-top: 0; border-radius: 0; }
body.pages-v4.spotlight-page .page-header .guide-eyebrow { color: var(--blue); }
body.pages-v4.spotlight-page .page-header .tagline { color: var(--muted); }
body.pages-v4.spotlight-page .input-option-toggle strong { color: var(--navy); }

/* ---------- Footer: the homepage's ---------- */
body.pages-v4 .h5-wrap { width: 100%; max-width: calc(var(--wrap) + 3rem); margin: 0 auto; padding: 0 1.5rem; }
body.pages-v4 footer.h5-footer { margin-top: 3rem; padding: 3rem 0 2.25rem; background: #ffffff; border-top: 1px solid var(--line); text-align: left; color: var(--muted); }
body.pages-v4 .h5-footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
body.pages-v4 .h5-footer-brand p { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--muted); text-align: left; max-width: none; }
body.pages-v4 .h5-footer .nav-logo img { height: 36px; }
body.pages-v4 .h5-footer .nav-wordmark-title { color: var(--navy); }
body.pages-v4 .h5-footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
body.pages-v4 .h5-footer-nav a, body.pages-v4 .h5-footer .footer-links a { color: var(--navy); font-size: 0.95rem; font-weight: 600; text-decoration: none; }
body.pages-v4 .h5-footer-nav a:hover, body.pages-v4 .h5-footer .footer-links a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
body.pages-v4 .h5-footer .footer-links { margin: 0; color: var(--muted); max-width: none; font-size: 0.95rem; }
body.pages-v4 .h5-footer-privacy { margin: 1.75rem 0 0; max-width: 54rem; font-size: 0.88rem; line-height: 1.55; color: var(--muted); text-align: left; }
body.pages-v4 .h5-footer-copy { margin: 0.6rem 0 0; max-width: none; font-size: 0.88rem; color: var(--muted); text-align: left; }
@media (max-width: 1000px) { body.pages-v4 .h5-footer-row { flex-direction: column; align-items: flex-start; } }
@media (max-width: 620px) { body.pages-v4 .h5-wrap { padding: 0 1.1rem; } }

/* ---------- Guide articles (article.html rich templates): v5 colours ---------- */
body.pages-v4 .ats-back-link, body.pages-v4 .ats-category, body.pages-v4 .ats-compare-clear .ats-compare-label { color: var(--blue); }
body.pages-v4 .ats-header-accent { background: var(--gold); }
body.pages-v4 .ats-header h1, body.pages-v4 .ats-body h2 { color: var(--navy); }
body.pages-v4 .ats-subtitle, body.pages-v4 .ats-readtime { color: var(--muted); }
body.pages-v4 .ats-callout { background: var(--pale); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
body.pages-v4 .ats-callout-summary { background: var(--tint-blue); border-color: #cfe0fb; }
body.pages-v4 .ats-compare-unclear { background: var(--pale); }
body.pages-v4 .ats-compare-clear { background: var(--tint-gold); }

@media (prefers-reduced-motion: reduce) {
  body:where(.pages-v4) button, body.pages-v4 .hv-guide, body.pages-v4 .hv-tool { transition: none; }
}