/* =========================================================================
   FREE REVIEW BLOCK  (.rv-*)
   The homepage review section: copy left, three-step upload card right,
   with the arrival cue the hero CTA fires. Copied from the homepage
   stylesheet (css/index.css) with its `.home-v2` scope stripped, by way of
   the resume-template copy, so article pages can use the same block.

   Behaviour: /js/landing/review-flow.js (initialises every form.rv-flow
   on the page) and
   /js/shared/article-review-cta.js (the hero CTA scroll + cue).

   If the homepage version changes, re-copy: these are copies of one
   design, not a shared source.

   The --hv-* tokens are declared here because they live in the homepage
   stylesheet's .home-v2 scope, which nothing else loads. They sit on the
   form as well as the section: a form.rv-flow can be used on its own (the
   compact rail widget), and without the tokens its buttons paint with an
   invalid background and a white label on white.
   ========================================================================= */
.rv-section,
.rv-flow {
  --hv-brand-blue: #2563eb;
  --hv-brand-blue-hover: #1d4ed8;
  --hv-ink: #0f172a;
  --hv-line: #e8eaed;
}

/* =========================================================================
   Free resume review block (.rv-*)
   Copied from the homepage stylesheet (css/index.css), with its `.home-v2`
   scope stripped so it works on template pages. Same markup, same
   behaviour (/js/landing/review-flow.js, which initialises every
   form.rv-flow on the page).

   If the homepage version changes, re-copy: these are two copies of the
   same design, not a shared source.
   ========================================================================= */
/* ============================================================
   REVIEW FORM SECTION
   Copy left, form right, on the same shell as the hero and the
   brand band. Light surface behind a white card, which is how
   Google separates a conversion block without a hard border.
   ============================================================ */

.rv-section {
  /* --page-max / --page-pad live in the homepage stylesheet, which template
     pages do not load, so define them locally. Without them .rv-inner has no
     max-width and no gutter, and the copy runs to the viewport edge. */
  --page-max: 1200px;
  --page-pad: 24px;
  /* main.css styles the bare `section` element (display:flex; align-items:
     center; margin:2rem auto). Left alone that shrink-wraps this block. */
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  gap: 0;
  background: #ffffff;
  scroll-margin-top: 96px;          /* clears the 80px fixed nav */
  padding-block: clamp(40px, 5vw, 72px);
}
.rv-inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
/* --- copy column --- */
.rv-copy { max-width: 46ch; }
/* Deliberately not italic: the hero kicker uses 'DM Sans Kicker', a subset containing only the glyphs in "Tech resume writer:".
   Italic here would synthesize an oblique instead. */
.rv-kicker {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: #5f6368;
}
.rv-section h2 {
  margin: 0;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--hv-ink);
  text-align: center;
}
.rv-lede {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  color: #5f6368;
}
.rv-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: #5f6368;
}
.rv-byline img {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e8eaed;
}

@media (max-width: 900px) {
  .rv-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 28px;
  }
  .rv-copy { max-width: none; }
  .rv-section h2 { text-align: center; }
  .rv-byline { justify-content: center; }
}
/* --- Review section copy ------------------------------------ */
.rv-list-intro {
  margin: 18px 0 10px;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 600;
  color: var(--hv-ink);
}
.rv-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.rv-list li {
  position: relative;
  padding-left: 30px;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.45;
  color: #5f6368;
}
/* Check drawn as an inline data URI so it inherits no font and
   cannot fall back to a missing glyph. The blue is written %232563EB:
   a raw # would terminate the URI. */
.rv-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat;
}
/* Byline sits under the card, centred on the card's width rather
   than the column's, so it reads as attached to the form. */
.rv-form-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.rv-form-wrap .rv-byline {
  width: 100%;
  max-width: 440px;
  margin: 0;
  justify-content: center;
}
/* Heading spans the full grid and centres over both columns, rather than sitting inside the copy column. */
.rv-head {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: clamp(20px, 2.6vw, 40px);
}
.rv-head .rv-kicker {
  margin-bottom: 8px;
}
/* The gap under the heading was stacking two values: .rv-head's
   bottom margin plus .rv-inner's `gap`, which sets row-gap as
   well as column-gap and so also applied between the header row
   and the columns below it. Zero the row-gap on desktop and let
   the margin alone control it; mobile still needs a real row-gap
   because the two columns stack there. */
.rv-inner {
  row-gap: 0;
}
.rv-head {
  margin-bottom: clamp(18px, 2vw, 28px);
}

@media (max-width: 900px) {
  .rv-inner {
    row-gap: 28px;
  }
}
/* Emphasis inside the review copy. .rv-lede is #5f6368, so a bold
   run has to darken to ink to actually read as emphasis rather
   than just heavier grey. */
.rv-lede strong {
  font-weight: 700;
  color: var(--hv-ink);
}
/* "You'll get:" drops back to body weight; the emphasis in this
   block now sits on the two bolded phrases above it. */
.rv-list-intro {
  font-weight: 400;
  color: #5f6368;
}
/* ============================================================
   REVIEW FLOW  (no card: elements sit on the section surface, which is what lets them run bigger)
   ============================================================ */

/* .fr-card is kept on the form for the geo gate only. Everything
   it brings visually is removed here. */
.rv-flow {
  width: 100%;
  max-width: 460px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: block;
  text-align: left;
}
/* --- progress --- */
.rv-progress {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.rv-progress li {
  height: 3px;
  width: 34px;
  border-radius: 999px;
  background: #dadce0;
  transition: background var(--motion-base) var(--ease-standard),
              width var(--motion-base) var(--ease-standard);
}
.rv-progress li.is-active {
  width: 48px;
  background: var(--hv-brand-blue);
}
/* --- steps --- */
.rv-step[hidden] { display: none; }
.rv-step {
  display: grid;
  gap: 16px;
  animation: rvStepIn var(--motion-slow) var(--ease-standard) both;
}

@media (prefers-reduced-motion: reduce) {
  .rv-step { animation: none; }
}
/* --- step 1: drop zone --- */
.rv-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 210px;
  padding: 28px 24px;
  border: 2px dashed #c9cdd2;
  border-radius: var(--shape-lg);
  background: #ffffff;
  color: var(--hv-brand-blue);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--motion-base) var(--ease-standard),
              background var(--motion-base) var(--ease-standard);
}
.rv-drop:hover, .rv-drop.is-over {
  border-color: var(--hv-brand-blue);
  background: #f5f9ff;
}
.rv-drop__title {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 700;
  color: var(--hv-ink);
  letter-spacing: -0.01em;
}
.rv-drop__hint {
  font-size: 13px;
  font-weight: 500;
  color: #80868b;
}
.rv-file:focus-visible + .rv-drop, .visually-hidden:focus-visible + .rv-drop {
  outline: 3px solid var(--hv-brand-blue);
  outline-offset: 3px;
}
/* --- fields --- */
.rv-field { display: grid; gap: 7px; }
.rv-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--hv-ink);
}
.rv-optional {
  font-weight: 400;
  color: #9aa0a6;
}
.rv-input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid #dadce0;
  border-radius: var(--shape-md);
  background: #ffffff;
  font: 400 16px/1.35 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--hv-ink);
  transition: border-color var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
}
textarea.rv-input { resize: vertical; min-height: 84px; }
.rv-input::placeholder { color: #9aa0a6; }
.rv-input:focus {
  outline: none;
  border-color: var(--hv-brand-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
/* Attached-file row. Was loose green text sitting above the email
   field with nothing tying it to anything; as a bordered row with
   the file name and a way out it reads as form state. */
.rv-chosen {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  /* No white fill and no 1px border: those are the input styling
     used by every field below it, so the row read as one more
     empty box to complete rather than as something already done.
     A tonal success surface says "handled". */
  border: none;
  border-radius: var(--shape-md);
  background: #e6f4ea;
  font-size: 14px;
  color: #1b5e20;
}
.rv-chosen[hidden] { display: none; }
.rv-chosen > svg {
  flex: 0 0 auto;
  color: #1e8e3e;
}
.rv-chosen__name { color: #1b5e20; }
.rv-chosen__name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rv-chosen__change {
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: none;
  color: #1e8e3e;
  font: 600 13.5px/1 'DM Sans', system-ui, sans-serif;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rv-chosen__change:hover { color: #14622c; }
/* --- checkboxes --- */
.rv-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.45;
  color: #5f6368;
  cursor: pointer;
}
.rv-check input {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--hv-brand-blue);
  cursor: pointer;
}
.rv-check a { color: #5f6368; text-decoration: underline; }
/* --- actions --- */
.rv-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.rv-next, .rv-submit {
  flex: 1 1 auto;
  padding: 17px 28px;
  border: none;
  border-radius: var(--shape-md);
  background: var(--hv-brand-blue);
  color: #fff;
  font: 700 17px/1 'DM Sans', system-ui, sans-serif;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(29, 78, 216, .24),
    0 8px 20px -4px rgba(37, 99, 235, .45);
  transition: background var(--motion-base) var(--ease-standard),
              transform var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
}
.rv-next:hover, .rv-submit:hover {
  background: var(--hv-brand-blue-hover);
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(29, 78, 216, .26),
    0 14px 28px -6px rgba(37, 99, 235, .52);
}
.rv-back {
  flex: 0 0 auto;
  padding: 15px 18px;
  border: 1px solid #dadce0;
  border-radius: var(--shape-md);
  background: #fff;
  color: #5f6368;
  font: 600 15px/1 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: background var(--motion-base) var(--ease-standard);
}
.rv-back:hover { background: #f1f3f4; }
.rv-next:focus-visible, .rv-submit:focus-visible, .rv-back:focus-visible {
  outline: 3px solid var(--hv-brand-blue);
  outline-offset: 3px;
}
.rv-error {
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: #d93025;
}

@media (max-width: 900px) {
  .rv-flow { max-width: none; }
  .rv-progress { justify-content: center; }
  .rv-check { text-align: left; }
}
/* Emphasised words in the checklist. Ink rather than the list's
   grey, so the italic reads as emphasis and not just a slant. */
.rv-list em {
  font-style: italic;
  color: #3c4043;   /* matches .wy-col em */
}
.rv-progress[hidden] { display: none; }
/* .rv-byline is display:flex, which beats the hidden attribute. */
.rv-byline[hidden] { display: none; }
/* Step bars plus a short label. */
.rv-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}
.rv-progress-row[hidden] { display: none; }
.rv-progress-row .rv-progress { margin: 0; }
.rv-progress-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #5f6368;
  letter-spacing: 0;
}
/* --- Arrival cue -------------------------------------------
   Fired once when the hero CTA lands you on the form.

   The ring lives on a pseudo-element, not on box-shadow. With a
   single box-shadow the second pulse has to collapse the spread
   back to 0 while its alpha rises, which renders as a reversed
   half-pulse between the two beats and throws the rhythm. A
   pseudo-element fades fully to 0 before repeating, so each beat
   is identical and evenly spaced.

   Ring and lift are separate animations on the same 1500ms clock:
   two ripples, two decaying lifts, even cadence. */
.rv-drop { position: relative; }
.rv-drop.is-cued {
  border-color: var(--hv-brand-blue);
  background: #f5f9ff;
  animation: rvLift 1500ms var(--ease-standard) both;
}
.rv-drop.is-cued::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--hv-brand-blue);
  pointer-events: none;
  animation: rvRipple 750ms var(--ease-standard) 2 both;
}

@media (prefers-reduced-motion: reduce) {
  .rv-drop.is-cued, .rv-drop.is-cued::after { animation: none; }
  .rv-drop.is-cued::after { display: none; }
}

@media (max-width: 900px) {
  /* Heading stays centred; the body does not. Four centred lines
     of ragged text are hard to read, and the checklist breaks
     outright: the ticks are absolutely positioned at left:0 while
     centred text drifts to the middle, so icon and item stop
     looking related. Left-aligning the copy fixes both. */
  .rv-copy {
    text-align: left;
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
  }
  .rv-list li { text-align: left; }
  /* The gap under the heading was stacking three values: the head
     margin, the grid row-gap, and the first paragraph's own top
     margin. */
  .rv-head { margin-bottom: 10px; }
  .rv-inner { row-gap: 20px; }
  .rv-copy > .rv-lede:first-of-type { margin-top: 0; }
  /* The form was shrink-wrapping, not filling the column. Two
     causes stacked: .rv-inner's justify-items:center sizes every
     grid item to its content, and .rv-form-wrap's
     align-items:flex-start does the same to its children. Both
     are two-column decisions with no meaning in one column. */
  .rv-inner { justify-items: stretch; }
  .rv-form-wrap {
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
    align-items: stretch;
  }
  .rv-flow {
    width: 100%;
    max-width: none;
  }
  .rv-form-wrap .rv-byline {
    max-width: none;
  }
  /* Fields and controls fill the width now that their parent does. */
  .rv-input, .rv-drop { width: 100%; }
  .rv-drop { min-height: 170px; padding: 22px 18px; }
  /* Back + Continue on one row still fits at 320px: the back
     button is content-width and the primary one flexes. */
  .rv-actions { gap: 10px; }
  .rv-next, .rv-submit { padding: 16px 18px; font-size: 16px; }
  .rv-back { padding: 14px 14px; font-size: 14px; }
}
/* --- Stop the attached-file row overflowing ------------------
   text-overflow on the filename does nothing unless every
   ancestor is allowed to shrink. Flex and grid items default to
   min-width:auto, which is min-content, so a long filename props
   the whole chain open and pushes "Change" past the edge. */
.rv-form-wrap, .rv-flow, .rv-step, .rv-step > *, .rv-chosen {
  min-width: 0;
}
.rv-chosen {
  max-width: 100%;
  overflow: hidden;
}
.rv-chosen__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Never let the action be the thing that gets clipped. */
.rv-chosen__change { white-space: nowrap; }


/* Keyframes, copied with the block: they live in the homepage stylesheet. */
@keyframes rvStepIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rvRipple {
  0%   { opacity: .5; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.035); }
  100% { opacity: 0;  transform: scale(1.035); }
}
@keyframes rvLift {
  0%   { transform: none; }
  12%  { transform: translateY(-4px); }
  28%  { transform: none; }
  50%  { transform: none; }
  62%  { transform: translateY(-2px); }
  78%  { transform: none; }
  100% { transform: none; }
}