/* =========================================================================
   /engineering-resume-writer
   THIS PAGE OWNS ITS OWN CSS.

   It no longer links css/index.css (the homepage stylesheet). Everything
   the page needs from there has been COPIED into Part 2 and Part 3 below,
   so a homepage change can never move this page and a change here can
   never move the homepage. Part 2 is the subset of index.css whose
   selectors actually match markup on this page (audited in the browser
   against the rendered page, 59 rules out of 764); Part 3 is index.css's
   `.home-v2` hero block, rescoped to `.erw-page`.

   Still shared, deliberately, and NOT copied:
     - css/main.css        site-wide elements, navbar, footer, buttons
     - css/utilities.css   utility classes
     - css/resume-review.css   .rr-content / .rr-compare /
       .rr-about. Its own header notes these are used by /packages and the
       service landings, so it is a shared component sheet, not another
       page's private stylesheet. (.rr-trust is NOT used here: the stat
       band is the page's own .erw-trust, Part 7.)
     - css/shared/review-block.css   the free-review block component

   LOAD ORDER: after resume-review.css. Several rules here match a
   resume-review.css selector's specificity, so source order decides them.

   CONTENTS
     1. Page ground (the blue gradient) + global-element resets
     2. Copied from css/index.css: hero grid, carousel, modal,
        credential marks
     3. Copied from css/index.css `.home-v2`: the hero v2 fold
     4. Two-column section intro
     5. Rubric grid, 3-up
     6. E-E-A-T credential chips
     7. Trust strip (.erw-trust)
     8. Packages (copied from css/index.css)
     9. Comparison table (.erw-compare)
    10. Roles covered (.erw-fams)
    11. Client reviews (#client-reviews)
    12. How it works, shot canvas
    13. Section heads (.rr-content__head)
    14. Closing CTA (.erw-cta)
    15. One column width
    16. Navy review bands (.rv-section)
    17. Page-level trims
   ========================================================================= */


/* =========================================================================
   1. PAGE GROUND + GLOBAL-ELEMENT RESETS
   ========================================================================= */

/* The homepage's light blue page ground, copied from `body.home-v2` in
   css/index.css. Two soft radial washes over a vertical ramp that runs
   from a blue-tinted white at the fold to near-neutral at the bottom.

   background-attachment stays `scroll` (the homepage's choice) rather than
   the `fixed` /resume-review uses: fixed keeps the glow in the viewport the
   whole way down, which washes over the navy closing-CTA band further down
   this page. Anchored to the document, the glow belongs to the fold.

   Sections that paint their own white over the top are cleared in Part 7. */
body.erw-page {
  background:
    radial-gradient(1100px 600px at 50% 0%, rgba(37, 99, 235, .14), transparent 70%),
    radial-gradient(900px 500px at 100% 30%, rgba(16, 185, 129, .07), transparent 65%),
    linear-gradient(180deg, #f0f5ff 0%, #f4f7fc 360px, #f8fafc 100%);
  background-attachment: scroll;
  /* clip, not hidden: `overflow-x: hidden` on the body would turn it into
     a scroll container, which changes how any future sticky descendant
     resolves. clip contains the overflow without that side effect. */
  overflow-x: clip;
}

/* main.css styles bare `h3` with Arial (var(--main-font)), 1.5px letter
   spacing, centred text and 1.75 line-height. Component classes on this
   page set every one of those EXCEPT font-family, so their headings were
   silently rendering in Arial while the body ran Inter. Reset per class,
   on the element itself, rather than with a blanket `.erw-page h3`: a
   blanket rule sits at (0,1,1) and would outrank the component classes it
   is meant to leave alone. */
.erw-page .rr-content__head h2,
.erw-page .erw-intro__sub {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Same leak on links: main.css sets `a { font-family: var(--main-font) }`,
   so every inline link in a paragraph switched to Arial mid-sentence. */
.erw-page a {
  font-family: inherit;
}

/* ...but NOT in the footer, which is shared chrome. `inherit` there picks
   up a different face from the site-wide Arial the homepage footer uses.
   The NAVBAR is deliberately left inheriting: the homepage's menu renders
   in DM Sans too, and forcing it to Arial made this page's menu 3.6px
   wider than the homepage's, not narrower. The menu's real width problem
   was the gap and the padding, both fixed below. */
.erw-page footer a {
  font-family: var(--main-font);
}

/* --- Navbar on the same edge as the page --------------------
   Copied from index.css. main.css gives .nav-inner `padding: 0 1.5%`, and
   a percentage resolves against the element's own containing block: the
   navbar is position:fixed so its basis is the viewport, while the page
   sections are in flow so theirs is the body. Same declaration, two
   different x. At 1512 that put the brand at 178.67 and the hero text at
   180. Pinning the navbar to the same fixed token makes all of them
   compute identically. */
.erw-page nav .nav-inner {
  max-width: var(--page-max);
  padding-inline: var(--page-pad);
}

/* Every menu item is white-space: nowrap, so the row cannot shrink when it
   is wider than .nav-inner's content box: it overflows right, past the
   edge everything else aligns to. The homepage buys the headroom back by
   tightening this gap; same fix here. */
.erw-page .main-menu {
  gap: 1.15rem;
}

/* The dropdown triggers are <button>, the rest of the items are <a>.
   main.css gives the trigger `font: inherit`, so on paper they match, yet
   they render lighter and smaller and the row measures wide. Both
   selectors take the same declarations so they cannot diverge. `font:
   inherit` rather than a hardcoded px, so the 14.5px step at the 1100px
   breakpoint still applies to both equally. Last of the homepage's four
   nav rules; without it this menu ran 1.55px wider than the homepage's. */
.erw-page .main-menu a:not(.nav-cta),
.erw-page .main-menu .rg-nav-dd__trigger {
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* main.css also styles the bare `section` element as a centred column flex
   container (`display:flex; flex-direction:column; align-items:center`).
   Under `align-items: center` a block child is sized to its CONTENT, not
   stretched, so `max-width` + `margin: 0 auto` never gets to do its job:
   the 3-up rubric collapsed to ~430px inside a 780px section and the two
   Problem / Solution grids came out different widths from each other.
   `width: 100%` puts each block back on the section's full measure, which
   its own max-width then caps. Set on the elements themselves rather than
   by flipping .rr-content back to `display: block`, which would move the
   compare table and the about block too. */
.erw-page .rr-content__head,
.erw-page .erw-intro {
  width: 100%;
}

/* Body prose matches the article pages (17px / 1.8), which is the reading
   scale signed off on /job-search-toolkit. Scoped to the prose blocks
   only: the compare table, FAQ, review block and footer all set their own
   sizes and must not be pulled up to 17px. */
.erw-page .erw-intro p,
.erw-page .rr-about__body p {
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.1px;
}


/* =========================================================================
   2. COPIED FROM css/index.css
   The hero grid, the resume carousel and its modal, and the credential
   marks. Verbatim including the original comments, so
   a future diff against index.css is readable. Two selectors
   (.header-container .resume-gallery and .section-title) are declared
   twice in index.css and are copied twice here, in source order, because
   the second declaration is what actually wins there.

   These are the BASE rules; Part 3 layers the hero v2 look over them, and
   must stay after this part for the ties to resolve the right way.
   ========================================================================= */

/* ===============================
   LANDING / HERO
   =============================== */

#landing {
  padding: 0 16px;
  scroll-margin-top: 80px;
}

/* Hero container */
.header-container {
  display: grid;
  grid-template-columns:
    minmax(520px, 1.15fr)                 
    minmax(380px, 0.85fr);           
  grid-template-areas:
    "child1 child2"
    "child3 child2";  
  align-items: center;
  max-width: min(1280px, 92vw);
  gap: clamp(28px, 4.5vw, 72px);
  row-gap: 2rem;
}

@media (max-width: 900px) {

    .header-container {
      grid-template-columns: 1fr;
      grid-template-areas:
        "child1"
        "child2"
        "child3";
    }

}

.header-text { grid-area: child1; }

.resume-gallery { grid-area: child2; }

.review-upload-wrap { grid-area: child3; }

/* Left column (title + review) */
.header-container .header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  max-width: 780px;      
  margin-top: 2rem;              
}

.header-container .header-text h1 {
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  margin: auto;
}

.header-container .header-text h1 .filler {
  font-size: 70%;
  color: #0f172a;
  background: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #0f172a;
    font-weight: 800;
}

@media (min-width: 1100px) {

  
    .header-container .header-text h1 { 
      white-space: nowrap; 
    }

}

@media (max-width: 768px) {

    #landing {
      /* padding: 0 16px; */
      scroll-margin-top: 80px;
    }

    .header-container {

      grid-template-columns: 1fr;
      grid-template-areas:
        "child1"
        "child2"
        "child3"; 
      text-align: center;
      gap: 0;    
    }

      /* Hero Title */
    .header-container .header-text {
      margin-top: 0;
      width: 90%;
      margin: auto;
    }

    .header-container .header-text h1 {
      width: 100%;
      text-align: left;
    }

    .header-container .header-text h1 .filler {
          font-size: 60%;  
      }

}

/* ================================
   RESUME GALLERY
   ================================ */
.header-container  .resume-gallery {
  border: none;      
  padding: 0;        
  background: none; 
  max-width: 600px;
  text-align: center;
}

@media (max-width: 900px) {

    .header-container  .resume-gallery {
      height: auto;
    }

}

/* Modal */
.resume-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  justify-content: center;
  align-items: center;
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(2px);
}

.resume-modal-content {
  position: relative;
  height: min(95vh, 1200px);
  background: #0b1220;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,.5);
  display: flex; justify-content: center; align-items: center;
  padding: 0;
}

.resume-modal-content img {
  width: 100%; height: 100%; object-fit: contain; background: #0b1220; display: block;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 36px;
  height: 36px;
  line-height: 34px;
  text-align: center;
  font-size: 24px;

  color: #334155;  
  background: #f3f4f6;  
  border: 1px solid #e5e7eb;  

  border-radius: 100%;
  cursor: pointer;

  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .06s ease;
  z-index: 99999;
}

.close-button:hover {
  background: #e5e7eb;  
  border-color: #d1d5db;  
  color: #1e293b;  
}

.close-button:active { 
  transform: scale(.98); 
}

@media (max-width: 960px) {

    .resume-gallery { 
      padding: 64px 24px 84px; 
    }

}

@media (max-width: 640px) {

    .resume-gallery { 
      padding: 56px 16px 72px; 
    }

    .resume-modal-content { 
      width: 100vw;
      height: 100vh;
      border-radius: 0;
    }

}

/* ===== Gallery Background ===== */
.header-container .resume-gallery {
  position: relative;
  isolation: isolate;
}

.header-container .resume-gallery::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;

  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);

  /* tighter area */
  width: clamp(380px, 46vw, 620px);
  height: clamp(260px, 34vw, 420px);

  /* multiple translucent overlapping bubbles */
  background:
    radial-gradient(circle at 55% 48%, rgba(59, 130, 246, 0.20) 0%, rgba(59, 130, 246, 0.10) 30%, transparent 70%),
    radial-gradient(circle at 45% 52%, rgba(37, 99, 235, 0.22) 0%, rgba(37, 99, 235, 0.10) 30%, transparent 70%),
    radial-gradient(circle at 62% 60%, rgba(29, 78, 216, 0.18) 0%, rgba(29, 78, 216, 0.08) 30%, transparent 70%),
    radial-gradient(circle at 38% 58%, rgba(147, 197, 253, 0.18) 0%, rgba(147, 197, 253, 0.08) 30%, transparent 70%),
    radial-gradient(circle at 50% 65%, rgba(96, 165, 250, 0.15) 0%, rgba(96, 165, 250, 0.06) 35%, transparent 70%);

  filter: blur(3px) saturate(115%);
  opacity: 0.9;
}

.header-container .resume-gallery .carousel {
  position: relative;
  z-index: 1;
}

@media (max-width: 980px) {

    .header-container .resume-gallery::before {
      width: clamp(340px, 70vw, 540px);
      height: clamp(240px, 46vw, 380px);
      top: 54%;
    }

}

@media (max-width: 640px) {

    .header-container .resume-gallery::before {
      width: 85vw;
      height: 56vw;
      top: 55%;
      opacity: 0.85;
    }

}

/* ===============================
   CREDENTIALS
   =============================== */

.credentials {
  --pill-h: 44px;
  --text: #000000;
  --ink: #111827;
  --ring: #E5E7EB;
  --pill: #FFFFFF;
  --shadow: 0 1px 2px rgba(17,24,39,.04), 0 6px 20px rgba(17,24,39,.08);

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 18px;
  width: 100%;
  margin-top: 12px;
  color: var(--text);
  font: 500 15px/1.3 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* FIVERR PILL */
.credentials .fiverr-credentials {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--pill-h);
  padding: 4px 10px 0;
  border-radius: 999px;
}

/* Fiverr brand group */
.credentials .fiverr-brand { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
}

/* Fiverr logo chip */
.credentials .fiverr-logo {
  width: 60px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 4px;
}

.ratings-buffer {
    height: 2rem;
    width: 4px;
    border-left: 1px solid var(--ring);
}

@media (max-width: 768px) {

    .credentials { 
      flex-direction: column; 
      border-radius: 8px;
      width: 90%;
      margin: auto;
      gap: 1;
      height: auto;
    }

    .ratings-buffer {
      display: none;
    }

    /* Fiverr Pill */
    .credentials .fiverr-credentials { 
      width: 100%;
      justify-content: center; 
      border: none;
      background: var(--pill);
      border: 1px solid var(--ring);
      box-shadow: var(--shadow);
      border-radius: 12px;
    }

}

@media (max-width: 768px) {

    .section-title { height: auto; background: none; width: 100%; padding: 0; gap: 2rem; }

    .section-title { width: 95%; margin: auto; }

}

/* ===============================
   CAROUSEL  
   =============================== */
.carousel {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 3.5rem;  
}

@media (max-width: 900px) {

    .carousel  {
      padding: 0rem auto;
    }

}

.carousel-viewport {
  position: relative;
  height: 420px;               
  perspective: 1200px;
  overflow: visible;
}

@media (max-width: 900px) {

    .carousel-viewport  {
      height: 300px;
    }

}

.carousel-track {
  list-style: none; 
  margin: 0; 
  padding: 0;
  position: relative;
  height: 100%;
}

.carousel-item {
  position: absolute; 
  top: 50%; 
  left: 50%;
  width: clamp(220px, 30vw, 320px);
  transform: translate(-50%, -50%);
  transition: transform 360ms ease, filter 360ms ease, opacity 260ms ease, z-index 0s step-end;
  cursor: pointer; 
  will-change: transform;
}

.carousel-item img {
  width: 100%;
  height: auto; 
  display: block; 
  border-radius: 12px;
  /* border-radius: 2px; */
  box-shadow: 0 10px 30px rgba(0,0,0,.25); 
  background: #f3f4f6;
  user-select: none; 
  pointer-events: none;  
}

/* Stacking look */
.pos-center {
  transform: translate(-50%, -50%) translateZ(0) scale(1.06);
  z-index: 3; filter: none;
}

.pos-left {
  transform: translate(calc(-50% - 28%), -50%) rotateY(8deg) scale(.92);
  z-index: 2; filter: saturate(.9) brightness(.95);
}

.pos-right {
  transform: translate(calc(-50% + 28%), -50%) rotateY(-8deg) scale(.92);
  z-index: 2; filter: saturate(.9) brightness(.95);
}


/* =========================================================================
   3. COPIED FROM css/index.css `.home-v2`: THE HERO v2 FOLD
   The above-the-fold hero shipped on the homepage on 2026-08-14: kicker +
   flat-ink headline, supporting blurb, one pill CTA that scrolls to the
   on-page review block, a personal byline beside it, and the Fiverr /
   Google credential marks underneath.

   Copied with `.home-v2` rewritten to `.erw-page`. These are copies of one
   design, not a shared source: if the homepage hero changes, re-copy.

   GRID RULE, inherited from the homepage: every section's outer edge
   matches the navbar's inner edge. The navbar is `nav .nav-inner` in
   main.css (max-width 1200px, padding 0 1.5%). That percentage resolves
   against the viewport, so the shell below zeroes its own horizontal
   padding to keep the same containing-block basis.
   ========================================================================= */

body.erw-page {
  --page-max: 1200px;
  --page-pad: 24px;              /* fixed, NOT a %: see the nav-inner note above */
  --hv-brand-blue: var(--blue-600);
  --hv-brand-blue-hover: var(--blue-700);
  --hv-ink: #0f172a;
  --hv-line: #e8eaed;
}


/* --- 1. One left edge for the whole fold -------------------- */

/* Horizontal padding zeroed so the % below resolves against the
   viewport, the same basis the navbar uses. Vertical is free. */
.erw-page #landing {
  padding: clamp(20px, 3.2vw, 48px) 0 0;
  background: #ffffff;
}

.erw-page .header-container {
  width: 100%;
  max-width: var(--page-max);
  padding-inline: var(--page-pad);
  margin-inline: auto;
}


/* --- 2. Hero grid (desktop only) ---------------------------- */
/* Headline spans both rows on the left; carousel top-right with
   the review CTA directly beneath it. */
@media (min-width: 901px) {

  .erw-page .header-container {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas:
      "child1 child2"
      "child3 child2";
    gap: clamp(28px, 4vw, 64px);
    row-gap: 1.75rem;
    align-items: center;
  }

  /* The carousel spans both rows and is taller than the left
     stack, so the rows would otherwise drift apart. Pinning the
     text to the bottom of row 1 and the CTA to the top of row 2
     keeps the left column reading as one block. */
  .erw-page .header-container .header-text { align-self: end; }
  .erw-page .review-upload-wrap { align-self: start; }

  .erw-page .header-container .header-text {
    max-width: none;
    margin-top: 0;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    gap: 1.25rem;
  }
}


/* --- 3. Headline -------------------------------------------- */
.erw-page .header-container .header-text h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.9rem, 2.95vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--hv-ink);
  white-space: normal;       /* base sheet sets nowrap above 1100px */
  /* main.css has a bare `h1 { text-align: center }` element rule.
     Nothing here declared text-align, so that global was winning
     and centring every line of the headline. */
  text-align: left;
}

/* One size across the whole sentence. The 70% step made the
   headline read as two disconnected fragments. */
.erw-page .header-container .header-text h1 .filler {
  font-size: 100%;
  font-weight: 800;
  color: var(--hv-ink);
  -webkit-text-fill-color: var(--hv-ink);
}

.erw-page .header-container .header-text h1 .filler.filler2 {
  margin-left: 0;
}

/* Flat colour instead of gradient-clipped text. */
.erw-page .header-container .header-text h1 .keyword-highlight {
  background: none;
  color: var(--hv-ink);
  -webkit-text-fill-color: var(--hv-ink);
  font-weight: 800;
}

@media (min-width: 1100px) {
  .erw-page .header-container .header-text h1 { white-space: normal; }
}

/* Kicker line. Plain small grey label, no pill. Keeps the head
   keyword inside the h1 for search while reading as a subtitle
   above the headline.

   The background/background-clip/-webkit-text-fill-color trio is
   not decoration, it is undoing `h1 span` in main.css, which
   paints every span in every h1 with a clipped blue gradient. */
.erw-page .header-container .header-text h1 .h1-kicker {
  display: block;
  width: fit-content;
  margin-bottom: .75em;
  padding: 0;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #5f6368;
  -webkit-text-fill-color: #5f6368;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: italic;
  font-size: 38%;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}

/* "Google" in the H1, brand colours. The rest of the headline is
   one flat ink colour; only the wordmark is coloured. Reuses the
   --g-* tokens already on :root in main.css.
   -webkit-text-fill-color is set alongside color because the base
   h1 rule paints its spans with a clipped gradient. */
.erw-page .header-container .header-text h1 .h1-google {
  font-weight: inherit;
  letter-spacing: inherit;
}

.erw-page .header-container .header-text h1 .h1-google .g-blue {
  color: var(--g-blue);
  -webkit-text-fill-color: var(--g-blue);
}

.erw-page .header-container .header-text h1 .h1-google .g-red {
  color: var(--g-red);
  -webkit-text-fill-color: var(--g-red);
}

.erw-page .header-container .header-text h1 .h1-google .g-yellow {
  color: var(--g-yellow);
  -webkit-text-fill-color: var(--g-yellow);
}

.erw-page .header-container .header-text h1 .h1-google .g-green {
  color: var(--g-green);
  -webkit-text-fill-color: var(--g-green);
}

/* Hero blurb under the H1. Its own class rather than the existing
   .hero-subtitle, which is centred and would have to be fought on
   every property. Measure capped so the line length stays readable
   while the H1 above it runs wider. */
.erw-page .header-container .header-text .hero-blurb {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(17px, 1.42vw, 21px);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: #5f6368;
  text-align: left;
}

.erw-page .header-container .header-text .hero-blurb strong {
  color: #3c4043;
  font-weight: 600;
}


/* --- 4. Review CTA ------------------------------------------
   One pill button that scrolls to the on-page review block. The
   old hero form card is gone entirely on this hero; the upload
   flow lives in the #review-form section further down. */
.erw-page .review-upload-wrap {
  max-width: none;
  margin: 0;
  align-items: flex-start;
  gap: .6rem;
}

.erw-page .review-upload-wrap .fr-upload {
  width: auto;
  margin-top: 0;
  padding: 20px 38px;
  background: var(--hv-brand-blue);
  border-radius: 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  /* Blue-tinted rather than black: a neutral shadow under a
     saturated fill reads as grey haze. Tight layer defines the
     edge, wide layer does the lifting. */
  box-shadow:
    0 1px 2px rgba(29, 78, 216, .24),
    0 8px 20px -4px rgba(37, 99, 235, .45);
}

.erw-page .review-upload-wrap .fr-upload: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);
}

.erw-page .review-upload-wrap .fr-upload:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(29, 78, 216, .30),
    0 4px 10px -2px rgba(37, 99, 235, .40);
}

/* The hero CTA is an anchor, not a label wrapping a file input. */
.erw-page .review-upload-wrap .fr-upload:focus-visible {
  outline: 3px solid var(--hv-brand-blue);
  outline-offset: 3px;
}

/* "Want to read more first?" hidden in the hero, exactly as on the
   homepage: the fold already carries one primary action and one
   byline link. Markup is left in place, so restoring it is
   deleting this rule. The .fr-deeplink lines in the below-fold
   review sections are untouched. */
.erw-page .review-upload-wrap .fr-deeplink {
  display: none;
}


/* --- 5. Personal byline beside the CTA ---------------------- */
.erw-page .review-upload-wrap .fr-cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  width: 100%;
}

.erw-page .review-upload-wrap .fr-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #5f6368;
}

.erw-page .review-upload-wrap .fr-byline img {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e8eaed;
}

/* Byline link. Kept in the row's own grey rather than brand blue:
   it sits inches from the blue CTA and a second blue element there
   would compete with the primary action. The underline is what
   marks it as a link; hover promotes it to blue. */
.erw-page .review-upload-wrap .fr-byline a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: #c4c7cb;
  transition: color .15s ease, text-decoration-color .15s ease;
}

.erw-page .review-upload-wrap .fr-byline a:hover {
  color: var(--hv-brand-blue);
  text-decoration-color: var(--hv-brand-blue);
}

.erw-page .review-upload-wrap .fr-byline a:focus-visible {
  outline: 2px solid var(--hv-brand-blue);
  outline-offset: 2px;
  border-radius: 2px;
}


/* --- 6. Credentials row, unified ----------------------------
   One credibility layer above the fold, with the client logo band
   as the only standalone strip.

   Unification: every item is [brand mark at a fixed height] + [one
   line of 13.5px/500 text in the same grey]. The pill heights, the
   700-weight labels, the 20px Google letters and the vertical
   dividers all normalise away. Brand colours stay, since that is
   what makes each mark recognisable. */
.erw-page .review-upload-wrap .credentials {
  width: 100%;
  margin: 1.6rem 0 0;
  justify-content: flex-start;
  /* baseline, not center: each credential group has its own
     internal baseline, and centring their boxes put those
     baselines on different lines. */
  align-items: baseline;
  gap: 8px 16px;
  font: 500 13.5px/1.35 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #5f6368;
}

/* Dividers removed: they break badly when the row wraps, and even
   spacing separates the items more cleanly. */
.erw-page .review-upload-wrap .credentials .ratings-buffer,
.erw-page .review-upload-wrap .credentials .fiverr-ratings {
  border: none;
}

.erw-page .review-upload-wrap .credentials .ratings-buffer { display: none; }

/* Strip the pill geometry off every item. */
.erw-page .review-upload-wrap .credentials .google-cred,
.erw-page .review-upload-wrap .credentials .fiverr-credentials,
.erw-page .review-upload-wrap .credentials .trustpilot-credentials {
  height: auto;
  min-height: 0;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.erw-page .review-upload-wrap .credentials .fiverr-ratings {
  padding-left: 0;
  margin-left: 4px;
  gap: 7px;
}

/* One type spec for every string in the row. */
.erw-page .review-upload-wrap .credentials p,
.erw-page .review-upload-wrap .credentials a,
.erw-page .review-upload-wrap .credentials .top-rated a,
.erw-page .review-upload-wrap .credentials .reviews-link,
.erw-page .review-upload-wrap .credentials .fiverr-rating-container p {
  font: inherit;
  color: inherit;
  margin: 0;
  line-height: inherit;
}

.erw-page .review-upload-wrap .credentials .reviews-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: #c4c7cb;
}

.erw-page .review-upload-wrap .credentials .fiverr-rating-container img {
  width: 13px;
  height: 13px;
}

/* --- Fiverr credential: logo, score beside the star ---------- */
.erw-page .review-upload-wrap .credentials .fiverr-credentials {
  gap: 6px;
}

.erw-page .review-upload-wrap .credentials .fiverr-brand {
  display: inline-flex;
  align-items: center;
}

.erw-page .review-upload-wrap .credentials .fiverr-logo {
  width: 62px;
  height: auto;
  padding: 0;
}

/* Rating: the numerals were illegible set inside the star at 24px,
   so they sit to its left instead, matched to the star's box height
   and to the wordmark's own grey. */
.erw-page .review-upload-wrap .credentials .fr-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.erw-page .review-upload-wrap .credentials .fr-rating__score {
  font-size: 16.8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #404145;
}

.erw-page .review-upload-wrap .credentials .fr-rating__star {
  display: block;
  width: 14px;
  height: 14px;
}

/* Baseline the rating against the wordmark. Everything was
   centre-aligned, so the numerals floated against the logo.
   Baseline alignment puts a replaced element's bottom margin edge
   on the text baseline, which lands the wordmark's letter bottoms
   and the "4.9" baseline on the same line. */
.erw-page .review-upload-wrap .credentials .fiverr-credentials,
.erw-page .review-upload-wrap .credentials .fr-rating {
  align-items: baseline;
}

/* --- Google credential + hairline separator -----------------
   Mirrors the Fiverr block. The wordmark needs a descender
   correction the Fiverr one does not: "fiverr" has no descender so
   its viewBox bottom is its baseline, whereas Google's "g" drops
   below. Width is set so the cap-to-baseline height matches the
   Fiverr wordmark's rather than matching box heights. */
.erw-page .review-upload-wrap .credentials .google-credentials {
  display: flex;
  align-items: baseline;
  gap: 6px;
  height: auto;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
}

.erw-page .review-upload-wrap .credentials .google-logo {
  width: 74px;
  height: auto;
  /* Flexbox synthesizes a missing baseline from the BORDER box, not
     the margin box, so a negative margin cannot move it. Left alone,
     the img's border-box bottom (the "g" descender) lands on the row
     baseline and the wordmark rides 6.6px high. A relative offset
     paints it down onto the line without disturbing layout. */
  position: relative;
  top: 5.2px;
}

/* Hairline between the two credentials. */
.erw-page .review-upload-wrap .credentials .cred-sep {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 18px;
  background: #dadce0;
}

/* --- Logo links ---------------------------------------------
   Both marks are links to the review sources. .google-brand is
   inline-flex like .fiverr-brand so the flex baseline still
   resolves from the img's border box and the wordmark's descender
   offset keeps working unchanged. */
.erw-page .review-upload-wrap .credentials .fiverr-brand,
.erw-page .review-upload-wrap .credentials .google-brand {
  display: inline-flex;
  align-items: center;
  transition: filter .18s ease;
  filter:
    drop-shadow(0 0 0 rgba(60, 64, 67, 0))
    drop-shadow(0 0 0 rgba(60, 64, 67, 0));
}

/* drop-shadow, not box-shadow: box-shadow would draw a rectangle
   around the link box, while drop-shadow follows the SVG's alpha so
   the halo traces the letterforms. Both states declare the same two
   functions so the filter can actually interpolate. */
.erw-page .review-upload-wrap .credentials .fiverr-brand:hover,
.erw-page .review-upload-wrap .credentials .google-brand:hover {
  filter:
    drop-shadow(0 1px 1px rgba(60, 64, 67, .22))
    drop-shadow(0 3px 9px rgba(60, 64, 67, .28));
}

.erw-page .review-upload-wrap .credentials .fiverr-brand:focus-visible,
.erw-page .review-upload-wrap .credentials .google-brand:focus-visible {
  outline: 2px solid var(--hv-brand-blue);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .erw-page .review-upload-wrap .credentials .fiverr-brand,
  .erw-page .review-upload-wrap .credentials .google-brand {
    transition: none;
  }
}


/* =========================================================================
   MOBILE
   Everything below is inside a max-width query, so none of it can reach
   the desktop layout.
   ========================================================================= */

@media (max-width: 900px) {

  /* Order: headline + supporting text, carousel, then the CTA block
     (button, byline, credentials). That is the base source order, so
     only the row-gap is set here. */
  .erw-page .header-container {
    row-gap: 28px;
  }

  /* Base sets width:90% + margin:auto here, which insets the text
     block from the container padding and leaves the headline off the
     page's left edge. */
  .erw-page .header-container .header-text {
    width: 100%;
    max-width: none;
    margin: 0;
    align-items: center;
    text-align: center;
  }

  .erw-page .header-container .header-text h1 {
    text-align: center;
  }

  /* fit-content block, so it needs auto side margins to centre.
     The size has to become absolute here too: the headline bottoms out at
     its clamp minimum (1.9rem) below ~965px, so the kicker's 38% resolves
     to 11.5px and the line stops being readable. The 600px block further
     down takes over on phones. */
  .erw-page .header-container .header-text h1 .h1-kicker {
    margin-inline: auto;
    font-size: 16px;
  }

  .erw-page .header-container .header-text .hero-blurb {
    max-width: none;
    text-align: center;
  }

  .erw-page .review-upload-wrap {
    align-items: center;
  }

  .erw-page .review-upload-wrap .fr-cta-row,
  .erw-page .review-upload-wrap .fr-byline,
  .erw-page .review-upload-wrap .credentials {
    justify-content: center;
  }
}

@media (max-width: 768px) {

  /* Base turns .credentials into a flex column at this width. That
     was written when the row held three pill-shaped items; it now
     holds two compact marks that fit side by side, and a column also
     broke the baseline alignment. */
  .erw-page .review-upload-wrap .credentials {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    margin: 1.25rem 0 0;
    justify-content: center;
    align-items: baseline;
    gap: 10px 14px;
  }

  /* main.css gives the nav element itself `padding: 0 10%` below
     768px, which stacks on top of .nav-inner's 24px. Zeroing it
     leaves .nav-inner's shared --page-pad alone. */
  .erw-page nav {
    padding-inline: 0;
  }

  /* The base sheet gives .fiverr-credentials width:100% at this
     breakpoint, a leftover from when each credential was a
     full-width pill. That alone forces the two marks onto separate
     rows. */
  .erw-page .review-upload-wrap .credentials .fiverr-credentials,
  .erw-page .review-upload-wrap .credentials .google-credentials {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  /* The CTA and the byline stop fitting on one line well before this
     width; make the stack explicit rather than relying on wrap, so
     the byline sits flush under the button. */
  .erw-page .review-upload-wrap .fr-cta-row {
    align-items: center;
    justify-content: center;
    gap: 14px;
  }
}

@media (max-width: 600px) {

  /* 2rem a side is ~18% of a 412px viewport once the 24px page
     padding is off, which shrinks the cards for no benefit. */
  .erw-page .carousel {
    padding-inline: .75rem;
  }

  /* Flush arrows are a desktop alignment decision; at this width
     they just collide with the screen edge. */
  .erw-page .nav-btn.prev { left: 4px; }
  .erw-page .nav-btn.next { right: 4px; }
}

/* Mobile kicker size.
   This MUST live after the base .h1-kicker rule above, not inside the
   earlier @media block. Both selectors are (0,4,1) and media queries
   add no specificity, so source order decides; sitting above the base
   rule meant `font-size: 38%` kept winning. */
@media (max-width: 600px) {
  .erw-page .header-container .header-text h1 .h1-kicker {
    font-size: 18px;
  }

  .erw-page #landing {
    padding-top: 16px;
  }
}


/* Anchor offset for the fixed 80px navbar, so a deep link lands with the
   section heading clear of it. resume-review.css sets 96px on .rr-content
   and on #faq; #faq needs an id-carrying selector here to outrank its own. */
.erw-page #problem,
.erw-page #solution,
.erw-page #roles,
.erw-page #review-form,
.erw-page #compare,
.erw-page #about-me,
.erw-page #faq {
  scroll-margin-top: 100px;
}


/* =========================================================================
   4. TWO-COLUMN SECTION INTRO  (.erw-intro)
   Two parallel arguments under a section head, split by a hairline. Used
   by the Problem and Solution sections, where the intro is genuinely two
   thoughts rather than one paragraph that got long.
   ========================================================================= */

.erw-intro {
  max-width: 1020px;
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  align-items: start;
  text-align: left;
}

.erw-intro > div:first-child {
  position: relative;
  padding-right: 28px;
}

/* Flat hairline, not a fading gradient rule: the Google idiom uses one
   solid #dadce0 line at 1px and nothing else. */
.erw-intro > div:first-child::after {
  content: "";
  position: absolute;
  right: -28px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: #dadce0;
}

.erw-intro__sub {
  margin: 0 0 10px;
  /* 19px against 17px body. It was 1.05rem (16.8px), i.e. SMALLER than the
     copy underneath it, and only read as a heading because of the weight.
     A subhead has to win on size first. */
  font-size: 19px;
  font-weight: 700;
  color: var(--rr-ink);
  letter-spacing: -0.015em;
  line-height: 1.3;
  text-align: left;
}

.erw-intro p {
  margin: 0 0 12px;
  color: var(--rr-ink-soft);
  text-align: left;
}

.erw-intro p:last-child { margin-bottom: 0; }

/* A subhead that follows a paragraph inside the same column (the Problem
   block stacks two). Without this it sat 12px under the previous line,
   which reads as a bolded sentence rather than a new heading. */
.erw-intro p + .erw-intro__sub { margin-top: 24px; }
.erw-intro strong { color: var(--rr-ink); font-weight: 700; }

.erw-intro a {
  color: var(--rr-primary-700);
  font-weight: 600;
  text-underline-offset: 3px;
  text-decoration: underline;
}

.erw-intro a:hover { color: var(--rr-primary-deep); }

@media (max-width: 820px) {
  .erw-intro {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 640px;
  }

  .erw-intro > div:first-child {
    padding-right: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #dadce0;
  }

  .erw-intro > div:first-child::after { display: none; }
}


/* =========================================================================
   6. E-E-A-T CREDENTIAL CHIPS  (.rr-about__creds)
   Google-style white pills with a coloured line icon, sitting above the
   bio. Unchanged from the previous inline block.
   ========================================================================= */

.erw-page .rr-about__creds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.erw-page .rr-about__creds > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: #3c4043;
  background: #ffffff;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid #dadce0;
  line-height: 1;
  letter-spacing: .005em;
  transition: box-shadow .15s ease, transform .15s ease;
}

.erw-page .rr-about__creds > span:hover {
  box-shadow: 0 2px 8px rgba(60, 64, 67, .10);
  transform: translateY(-1px);
}

.erw-page .rr-about__creds .erw-ic {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.erw-page .rr-about__creds .erw-ic--blue   { color: #4285F4; }
.erw-page .rr-about__creds .erw-ic--red    { color: #DB4437; }
.erw-page .rr-about__creds .erw-ic--yellow { color: #F4B400; }
.erw-page .rr-about__creds .erw-ic--green  { color: #0F9D58; }

.erw-page .rr-about__creds .erw-g {
  display: inline-flex;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.erw-page .rr-about__creds .erw-g .g-b { color: #4285F4; }
.erw-page .rr-about__creds .erw-g .g-r { color: #DB4437; }
.erw-page .rr-about__creds .erw-g .g-y { color: #F4B400; }
.erw-page .rr-about__creds .erw-g .g-g { color: #0F9D58; }

@media (prefers-reduced-motion: reduce) {
  .erw-page .rr-about__creds > span { transition: none; }
}


/* =========================================================================
   7. TRUST STRIP  (.erw-trust)
   Replaces the client logo band under the hero.

   Page-owned rather than the shared .rr-trust, whose own header calls it
   "Stripe/Linear-style": 800-weight numerals with a vertical rule between
   every stat, on a 1080px measure of its own.

   TWO THINGS THIS GETS RIGHT THAT A CENTRED ROW CANNOT.

   1. It lines up with the hero. Every element in the fold starts its ink
      at the same x: the kicker, the H1, the blurb and the CTA button. A
      centred stat row does not, because centring each stat inside its
      column pushes the first numeral inwards by half the leftover column
      width (measured: 96px at 1440, so the strip read as inset from a
      hero it was supposedly the same width as). The stats are left
      aligned and the row is distributed edge to edge instead, so the
      first numeral sits on the H1's left edge and the last stat closes
      on the carousel's right edge.

   2. It stays quiet. At 40px the numerals made the strip 145px tall,
      taller than the entire H1 block above it (128px), which inverts the
      page's hierarchy. The numerals run at ~26px here and the band lands
      near 90px: present, secondary, which is the job.

   No dividers: distributing the row leaves uneven gaps by design (the
   stats are different widths), and rules across uneven gaps look broken.
   The shared left edge is what holds the row together instead.

   Colour is spent in exactly two places, the Fiverr star and the Google
   wordmark, so the two credentials that carry a brand are the two things
   the eye lands on.
   ========================================================================= */

/* main.css styles the bare `section` element (display:flex; flex-direction:
   column; align-items:center; margin:2rem auto). The layout lives on
   __inner, so the section itself is put back to a plain block. */
.erw-trust {
  display: block;
  width: 100%;
  max-width: var(--page-max);
  height: auto;
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.erw-trust__inner {
  display: flex;
  align-items: flex-start;
  /* Distributed, not centred: this is what puts the first numeral on the
     hero's left edge and the last stat on its right edge. */
  justify-content: space-between;
  gap: 16px 24px;
  padding: clamp(16px, 1.8vw, 22px) 0;
  /* The one rule in the component, and it is horizontal: it closes the
     fold rather than chopping the row into five. */
  border-top: 1px solid var(--md-outline-soft);
}

.erw-trust__stat {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
}

.erw-trust__num {
  display: inline-flex;
  align-items: center;
  gap: .18em;
  font-family: var(--md-font);
  font-size: clamp(21px, 1.9vw, 26px);
  /* 600, not the 800 of the Stripe-style original and not the 500 a
     display numeral would take: at 26px, 500 reads thin next to the
     800-weight H1 and 800 competes with it. */
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--md-on-surface);
  white-space: nowrap;
}

/* Sized in em so it tracks the numeral through the clamp, and set to the
   digits' cap height rather than their full box, which is what puts the
   star and the "4.9" on the same optical line. */
.erw-trust__star {
  width: .78em;
  height: .78em;
  flex: 0 0 auto;
  fill: #FBBC04;
}

/* Per-letter brand colours, from the --g-* tokens on :root in main.css. */
.erw-trust__google { display: inline-flex; }
.erw-trust__google .g-b { color: var(--g-blue); }
.erw-trust__google .g-r { color: var(--g-red); }
.erw-trust__google .g-y { color: var(--g-yellow); }
.erw-trust__google .g-g { color: var(--g-green); }

.erw-trust__caption {
  margin-top: 5px;
  font-family: var(--md-font);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--md-on-surface-variant);
  white-space: nowrap;
}

/* Below the hero's own two-column breakpoint the row stops fitting on one
   line. Grid rather than wrapped flex: `space-between` spreads a wrapped
   last line across the full width, which strands two stats at opposite
   edges. Columns keep every stat on the same left edge as the row above.
   The captions are allowed to wrap here, since nowrap is what forces the
   row wide in the first place. */
@media (max-width: 900px) {
  .erw-trust__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 20px;
  }

  /* Centred here, left aligned above. 901px is where the hero itself
     drops to one centred column, so a left-aligned strip under a centred
     hero would be the same mismatch this component exists to fix, just
     the other way round. */
  .erw-trust__stat {
    align-items: center;
    text-align: center;
  }

  .erw-trust__caption { white-space: normal; }
}

@media (max-width: 560px) {
  .erw-trust__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }

  .erw-trust__caption { font-size: 12px; }
}


/* =========================================================================
   8. PACKAGES  (copied from css/index.css)
   The homepage pricing component, verbatim. Audited the same way as Part 2:
   the rules below are the ones whose selectors actually match the packages
   markup on this page. Base .pricing / .pc__feats / .pc__price styling
   comes from main.css, which is shared and still linked.
   ========================================================================= */

/* ============================================================
   PACKAGES: the /packages card design
   Ported from packages.css so the homepage grid and the packages
   page render the identical component. Everything the .pc cards
   need (the base component, the --pk-* scale, .pkg-usps) already
   lives in main.css, which both pages load; only these
   .packages-page refinements were missing here.

   Every selector is scoped to .packages-page, so nothing in this
   block can reach any other part of the homepage.
   ============================================================ */

/* --- Deliverables strip ----------------------------------------------------
   Replaces the decorative glyph tile with the things you actually receive, one
   artifact each. Sized by height so all three cards render the same scale and
   the strips simply get wider as the tier grows.
   --------------------------------------------------------------------------- */
/* Card lift. One big soft blur just makes a card look blurry; real objects cast
   three things at once, so this stacks them: a tight contact shadow that anchors
   the edge, a mid shadow for the gap under the card, and a wide low-opacity
   ambient that does the actual lifting. The negative spread on the outer two
   keeps it under the card instead of haloing sideways. The featured card casts
   in its own blue so it stays the hero of the three.
   The border drops to 5%: with real depth underneath, a strong outline flattens
   the card again. */
.packages-page .pc {
  border-color: rgba(15, 23, 42, .05);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .07),
    0 8px 16px -6px rgba(15, 23, 42, .10),
    0 28px 44px -20px rgba(15, 23, 42, .24);
}

/* Hover moves the card up 3px, so the shadow has to travel further and soften,
   the way a real one does as an object leaves the surface. */
.packages-page .pc:hover {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .06),
    0 14px 26px -10px rgba(15, 23, 42, .12),
    0 40px 60px -24px rgba(15, 23, 42, .30);
}

.packages-page .pc--featured {
  border-color: rgba(37, 99, 235, .22);
  box-shadow:
    0 1px 2px rgba(23, 37, 84, .10),
    0 10px 20px -8px rgba(37, 99, 235, .18),
    0 32px 50px -22px rgba(37, 99, 235, .34);
}

.packages-page .pc--featured:hover {
  box-shadow:
    0 1px 2px rgba(23, 37, 84, .10),
    0 16px 28px -10px rgba(37, 99, 235, .22),
    0 46px 66px -26px rgba(37, 99, 235, .40);
}

/* Text left, deliverables right. The art is bottom-aligned and hangs past the
   tinted header into the white body, so it reads as sitting in front of the
   card rather than printed on it. That needs the card to stop clipping, which
   in turn means the header has to round its own top corners. */
.packages-page .pc { overflow: visible; }

.packages-page .pc__head {
  border-radius: 22px 22px 0 0;
}

/* Name on the left, deliverables on the right; the description then runs the
   full width of the card underneath both. */
.packages-page .pc__headrow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Same top offset on all three so the plan names line up, and so the badge on
   the featured card has its own space above the name. */
.packages-page .pc__name { flex: 1 1 auto; min-width: 0; padding-top: 24px; margin-bottom: 0; }

.packages-page .pc__who { margin-top: 12px; }

/* Hangs off the top-right corner, above and outside the card. */
.packages-page .pc__kit {
  flex: 0 0 auto;
  height: 132px;
  width: auto;
  /* The negative bottom stops the art from padding out the row it shares with
     the plan name, which was pushing the description a long way down. */
  margin: -62px -46px -12px 0;
  position: relative;
  z-index: 2;
}

/* Room for the pop-out above the cards, and a wider gutter so a pile hanging
   off one card lands mostly in the gap rather than on its neighbour. */
.pricing.packages-page .pricing-grid { margin-top: 62px; gap: 36px; scroll-margin-top: 104px; }

/* The badge lived where the art now sits. */
.packages-page .pc__tag { right: auto; left: 16px; }

/* Earlier cards paint over later ones, so a kit hanging off the right edge
   lands in front of its neighbour instead of behind it. */
.packages-page .pricing-grid .pc:nth-child(1) { z-index: 3; }

.packages-page .pricing-grid .pc:nth-child(2) { z-index: 2; }

.packages-page .pricing-grid .pc:nth-child(3) { z-index: 1; }

@media (max-width: 700px) {

    /* Bigger and lower. At 86px hung 62px above the card the pile read as a
       stray graphic floating between cards; sitting closer to its own header it
       reads as belonging to the card it describes. */
    .packages-page .pc__kit {
      height: 112px;
      margin: -34px -18px -8px 0;
    }

    /* Less clearance needed above the grid now that the pile hangs 34px, not 62. */
    .pricing.packages-page .pricing-grid { margin-top: 40px; }

}

/* --- Money-back guarantee (offer only) -------------------------------------
   The guarantee ships with the promo link, not with the standard price, so
   every mention of it starts hidden and packages.js reveals it by putting
   .pkg-offer-on on the body while a valid, unexpired ?gt= deadline is running.
   Fails closed: no script, no parameter, or an expired deadline means no claim.
   --------------------------------------------------------------------------- */
.packages-page .pc__feat--mbg,
.packages-page .pkg-usp--mbg { display: none; }

/* Green, so the thing that is only true right now reads as the thing that is
   only true right now. */
.packages-page .pc__feat--mbg {
  color: #137333;
  font-weight: 700;
}

/* Needs to outrank the per-tier badge colour (.pc--mid .pc__feats li::before). */
.packages-page .pc__feats li.pc__feat--mbg::before {
  background-color: #e6f4ea;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137333' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* --- Expandable feature notes ---------------------------------------------
   A few package features need a sentence of explanation that would bloat the
   card if it were always on. The line becomes a button with a quiet chevron on
   the right, and the explanation opens under it. Only one is open at a time
   (the script enforces it), so the grid never grows by more than one panel.
   Adding another: give the li .pc__feat--note, wrap its text in the button with
   aria-controls pointing at a .pc__note below it. No JS change needed.
   --------------------------------------------------------------------------- */
.packages-page .pc__feat--note {
  padding-right: 0;
}

.packages-page .pc__note-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  /* A <button> does not inherit any of these. */
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.packages-page .pc__note-btn > span { flex: 1 1 auto; }

.packages-page .pc__chev {
  flex: 0 0 auto;
  color: #94a3b8;
  transition: transform .25s ease, color .18s ease;
}

.packages-page .pc__note-btn:hover .pc__chev { color: #475569; }

/* max-height is animated in px by the script, so the panel opens to exactly its
   own height. visibility keeps the collapsed copy out of the a11y tree without
   killing the transition the way [hidden] would. */
.packages-page .pc__note {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height .28s ease, visibility 0s linear .28s;
}

.packages-page .pc__note p {
  margin: 12px 0 2px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f6f7fb;
  font-size: var(--pk-small);
  line-height: 1.6;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {

    .packages-page .pc__note,
    .packages-page .pc__chev { transition: none; }

}


/* --- Packages heading and footnote ---------------------------
   Copied from index.css's `.home-v2 #packages` rules and rescoped: the
   audit that produced the block above tests selectors against this page,
   and a `.home-v2` selector can never match here, so these two were
   invisible to it. Without them the heading and the footnote render WHITE
   on a near-white ground.

   The cause, quoting the homepage's own note: .pricing paints navy and
   colours its heading, intro and footnote white to sit on it.
   .pricing.packages-page repaints the section light but only re-colours
   the h1 and the intro, so the h2 and the USD footnote are left white.

   The heading also takes the page's own h2 treatment rather than
   .pricing's 26px Inter, so it matches every other section heading. */
.erw-page #packages .pricing-head h2 {
  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.14;
  letter-spacing: -0.02em;
  color: var(--hv-ink);
}

.erw-page #packages .pricing-footnote {
  color: #5f6368;
}


/* =========================================================================
   9. COMPARISON TABLE  (.erw-compare)
   Page-owned. The shared .rr-compare in resume-review.css keeps its current
   look for /resume-review and /packages.

   THE DESIGN, AND WHY EACH DECISION.

   Unboxed. A bordered, rounded, shadowed card sitting on the page's own
   tinted ground is two containers doing one container's job. The table is
   the content; it does not need a tray. Only the recommended lane gets a
   surface, which is then the single strongest thing on screen.

   One weight of rule, one darker. Eight identical hairlines make a
   spreadsheet. Here the soft rule (--md-outline-soft) separates rows and
   the darker one (--md-outline) marks the two real boundaries: under the
   header, and between the five capability rows and the three spec rows
   (Done by / Turnaround / Cost). Those are different kinds of claim and
   the table now says so. Rules are drawn as border-TOP throughout, so a
   boundary is one line and never two stacked.

   Air over lines. Rows run 64px with 18px of vertical padding instead of
   56px with 13px. Separation comes from space first and rule second, which
   is what stops a dense matrix reading as clogged.

   One signal per idea. The recommended column is a pale lane plus a 2px
   accent under its heading. It does not ALSO recolour its body text, bold
   it, and carry a badge. The lane rounds at top and bottom so it reads as
   one continuous object rather than nine tinted cells.

   Colour marks wins only. Green check for yes; partial and no are grey and
   differ by glyph. Red on a competitor row reads as an error state
   (ILLUSTRATIONS.md §10.3), and the competitors are not errors.

   Icon leads, qualifier follows. The glyph is the answer and the text is
   the footnote, so the text sits a step down in size and colour. Scanning
   the column should work before you read a word of it.

   No sticky header. The table is 568px tall on desktop, inside a 900px
   viewport: it fits. Sticky would buy nothing and cost an opaque header
   the unboxed layout cannot give it. Mobile drops the header row entirely.

   Mobile ships no second copy of the data. Each value cell carries
   data-col and the stacked layout prints the column name from CSS.
   ========================================================================= */

.erw-compare {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
}

.erw-compare__grid {
  display: grid;
  /* Even option columns: they hold comparable claims, so giving one more
     room than another biases the read. */
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
}

.erw-compare__cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 18px 20px;
  border-top: 1px solid var(--md-outline-soft);
  font-family: var(--md-font);
  font-size: 14.5px;
  line-height: 1.5;
  /* One ink for the whole body. Label and value are told apart by weight,
     not by colour: greying the values would say "less important" about the
     only content the table exists to show. */
  color: var(--md-on-surface);
}

/* The two real boundaries: under the header, and where capabilities end
   and plain specs begin. Marked in the markup, not by nth-child, so
   editing a row cannot silently move them. */
.erw-compare__cell--div { border-top-color: var(--md-outline); }

/* Row labels: weight and ink, no fill and no divider column. */
.erw-compare__cell--label {
  font-weight: 500;
  color: var(--md-on-surface);
  padding-left: 0;
}

.erw-compare__cell strong { font-weight: 600; color: var(--md-on-surface); }


/* --- Header -------------------------------------------------
   `space-between`, not `flex-end`. Bottom-aligning the whole cell
   made the name sit wherever its own length left it: a one-line
   label dropped to the floor while name+sub blocks rose, so the
   four names were 40px out of line with each other. Pinning the
   name to the top and the descriptor to the bottom means both
   rows align across all four columns no matter how either wraps.

   The label column's header is empty, which is what Google does:
   the row labels already say what they are, and inventing a
   heading for them ("What it does") is the thing that created the
   alignment problem in the first place. */
.erw-compare__cell--head {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  /* Uniform on all four. The recommended cell used to carry an extra
     16px of top padding, which tilted the whole row. */
  min-height: 118px;
  padding: 38px 20px 18px;
  border-top: 0;
  /* Transparent 2px on every header cell so the recommended column's blue
     accent does not make its content box 2px shorter than the others.
     With space-between that shifted its descriptor 2px out of line. */
  border-bottom: 2px solid transparent;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--md-on-surface);
}

.erw-compare__opt {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--md-on-surface);
}

/* Descriptors are parallel by design: each one answers the same
   question, "who does the work". One line, no parentheses, no
   nested quotes. They also make a "Done by" row redundant, so that
   row is gone and the table is seven rows instead of eight. */
.erw-compare__sub {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--md-on-surface-variant);
  letter-spacing: 0;
}

/* Out of flow, so the three names still start on one line: the 38px
   of top padding above is the space it sits in. */
.erw-compare__chip {
  position: absolute;
  top: 13px;
  left: 20px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--md-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
}


/* --- The recommended lane -----------------------------------
   Pale surface + one accent rule. Rounded top and bottom so the
   nine cells read as a single lane running down the table. */
.erw-compare__col--mine { background: #f6f9fe; }

.erw-compare__cell--head.erw-compare__col--mine {
  border-radius: 12px 12px 0 0;
  border-bottom: 2px solid var(--md-primary);
  color: var(--md-on-primary-container);
}

/* Last row's mine cell: label, mine, generic, ai -> third from the end. */
.erw-compare__cell.erw-compare__col--mine:nth-last-child(3) {
  border-radius: 0 0 12px 12px;
}



/* --- Verdict glyphs -----------------------------------------
   The glyph answers the row; the text after it qualifies. Colour
   only on a win, so a column scans before it is read. */
.erw-compare__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.erw-compare__icon svg { width: 16px; height: 16px; }
.erw-compare__icon--yes { color: #1e8e3e; }
.erw-compare__icon--mid { color: #9aa0a6; }
.erw-compare__icon--no  { color: #bdc1c6; }


/* Tablet: the columns get narrow enough that a few values wrap and the
   row rhythm goes 80 / 80 / 64 / 64. One step down in type and padding
   puts every cell back on one line, so all seven rows stay equal. */
@media (max-width: 1000px) and (min-width: 861px) {
  .erw-compare__cell {
    font-size: 14px;
    padding: 16px 16px;
  }

  .erw-compare__cell--head {
    min-height: 108px;
    padding: 34px 16px 16px;
  }

  .erw-compare__opt { font-size: 14.5px; }
  .erw-compare__sub { font-size: 12px; }
  .erw-compare__chip { left: 16px; }
}


/* --- Stacked layout -----------------------------------------
   One block per row: the label as a heading, then the three
   options under it, each naming its own column.

   Stacks at 860, not 760. Between the two the option columns fall
   under ~190px, which leaves about 105px for text once the icon and
   the padding are out, and short values like "13 yrs, ex-Google"
   start breaking onto a second line. Rather than let the grid render
   at a width it cannot hold, it hands over to the stack earlier. */
@media (max-width: 860px) {
  .erw-compare__grid { display: block; }

  .erw-compare__cell--head { display: none; }

  .erw-compare__cell {
    min-height: 0;
    padding: 7px 0;
    border-top: 0;
    gap: 10px;
  }

  .erw-compare__cell--label {
    margin-top: 10px;
    padding-top: 22px;
    border-top: 1px solid var(--md-outline-soft);
    font-size: 15px;
    font-weight: 600;
  }

  /* The first label opens the block, so it carries no rule above it. */
  .erw-compare__cell--head + .erw-compare__cell--label {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  /* Keep the capability / spec boundary on mobile too. */
  .erw-compare__cell--label.erw-compare__cell--div {
    border-top-color: var(--md-outline);
  }

  .erw-compare__cell[data-col] {
    display: grid;
    grid-template-columns: 18px minmax(88px, auto) 1fr;
    align-items: baseline;
    gap: 0 10px;
    padding: 7px 10px;
  }

  .erw-compare__cell[data-col]::before {
    content: attr(data-col);
    grid-column: 2;
    font-size: 12.5px;
    color: var(--md-on-surface-variant);
  }

  .erw-compare__cell[data-col] .erw-compare__icon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  /* The lane becomes a highlighted row rather than a column. */
  .erw-compare__cell.erw-compare__col--mine,
  .erw-compare__cell.erw-compare__col--mine:nth-last-child(3) {
    border-radius: 8px;
  }
}


/* =========================================================================
   10. ROLES COVERED  (.erw-fams)
   One horizontal row per engineering family: illustration on one side,
   name + blurb + role links on the other, alternating each row.

   Why rows and not a card grid. The first build was a 3-up grid of link
   lists, which is a sitemap wearing a component's clothes: ten identical
   columns of blue text, nothing to look at, and no room to say what I
   actually do for that discipline. A row gives each family an
   illustration, two sentences of its own, and enough width for the role
   links to sit on one or two lines instead of ten stacked ones.

   The alternation is not decoration. With art always on the left the eye
   runs straight down the illustration column and never enters the text.
   Alternating forces a short horizontal scan per row, which is how Google
   sets its own "solutions by X" pages.

   Unboxed, like every other block on this page: the tint disc inside each
   illustration is the only background, and a hairline separates rows.
   ========================================================================= */

.erw-fams {
  width: 100%;
  max-width: 1060px;
  margin: 44px auto 0;
  display: flex;
  flex-direction: column;
}

.erw-fam {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: center;
  gap: 44px;
  padding: 34px 0;
  border-top: 1px solid var(--md-outline-soft);
}

.erw-fam:first-child { border-top: 0; padding-top: 8px; }

/* Odd rows swap the columns. The source order stays art-then-text so the
   reading order is identical in both directions for a screen reader. */
.erw-fam--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.erw-fam--rev .erw-fam__art  { grid-column: 2; grid-row: 1; }
.erw-fam--rev .erw-fam__body { grid-column: 1; grid-row: 1; }

.erw-fam__art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.erw-fam__art .rr-ill {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
}

/* Photo rows (the homepage's founder card and Google Doc screenshot):
   a plain white card the same width as the illustration column. */
/* Rows that carry a photo get a wider art column (500px against the
   illustration rows' 360px): a screenshot needs the room to stay legible,
   and the blurb is capped at 58ch anyway so the copy column loses nothing. */
.erw-fams--solution .erw-fam            { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); }
.erw-fams--solution .erw-fam--rev       { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); }

.erw-fam__art .erw-fam__photo {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--md-outline-soft);
  background: #fff;
}

.erw-fam__body { min-width: 0; }

.erw-fam__name {
  margin: 0 0 8px;
  font-family: var(--md-font);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--md-on-surface);
}

.erw-fam__blurb {
  margin: 0 0 16px;
  max-width: 58ch;
  font-family: var(--md-font);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--rr-ink-soft);           /* same ink as .erw-intro p */
}

.erw-fam__blurb strong { color: var(--rr-ink); font-weight: 700; }

/* Role links as outlined chips: a wrapped row reads as "here is the set",
   where a bulleted column reads as "here is a menu you must work through". */
.erw-fam__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.erw-fam__roles a {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid var(--md-outline);
  border-radius: 999px;
  background: var(--md-surface);
  font-family: var(--md-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--md-on-surface-variant);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.erw-fam__roles a:hover {
  border-color: var(--md-primary);
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.erw-fam__roles a:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .erw-fam__roles a { transition: none; }
}

/* --- Problem rows ------------------------------------------
   Same row component, used for the three problems. They carry the
   numbered badge the old grid had (the intro says "3 reasons"), and no
   chip list. The badge is the rubric's, left-aligned. */
.erw-fam__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #f1f3f4;
  color: #5f6368;
  font-family: var(--md-font);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}

.erw-fams--problem .erw-fam__blurb { margin-bottom: 0; }

@media (max-width: 900px) {
  .erw-fam__num { margin-inline: auto; }
}

@media (max-width: 900px) {
  .erw-fam,
  .erw-fam--rev,
  .erw-fams--solution .erw-fam,
  .erw-fams--solution .erw-fam--rev {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 30px 0;
    justify-items: center;
    text-align: center;
  }

  /* Stacked, the art leads every row: alternation has nothing to alternate
     across in one column, and a swapped row would just look like a mistake. */
  .erw-fam--rev .erw-fam__art  { grid-column: 1; grid-row: 1; }
  .erw-fam--rev .erw-fam__body { grid-column: 1; grid-row: 2; }

  .erw-fam__name { text-align: center; }
  .erw-fam__blurb { max-width: 52ch; margin-inline: auto; }
  .erw-fam__roles { justify-content: center; }
  .erw-fam__art .rr-ill { max-width: 290px; }
}

@media (max-width: 560px) {
  .erw-fams { margin-top: 34px; }
  .erw-fam { padding: 26px 0; gap: 16px; }
  .erw-fam__blurb { font-size: 15px; }
  .erw-fam__art .rr-ill { max-width: 260px; }
}


/* =========================================================================
   11. CLIENT REVIEWS  (#client-reviews)
   The homepage's .tcv-reviews widget. Base styles are in main.css, which is
   shared site-wide, so nothing here comes from index.css.

   main.css sizes this widget for the HOMEPAGE, where the section runs full
   bleed. Dropped into .rr-main's column it broke four ways at once:

     1. The viewport is `width: calc(360px * 3 + 4px)` = 1084px, inside a
        carousel that is `width: 90%` of a 1026px section = 923px. The
        viewport was 160px WIDER than its own parent, so the third card ran
        off the right edge.
     2. The row is 300px but every review screenshot is square (1000x1000),
        so `object-fit: contain` letterboxed each one to 300x300 inside a
        360px slot. 30px of dead space either side of every card.
     3. Because each screenshot carries a different amount of padding around
        its card, letterboxing made the three look staggered rather than
        aligned.
     4. The arrows are `left: 8px` / `right: 8px` on a carousel with no side
        padding, so they sat ON TOP of the first and third cards.

   Fixed by sizing everything from one number: the slide is a SQUARE that
   matches the source images, the row height equals it, and the carousel
   carries side padding wide enough to hold the arrows outside the viewport.
   All of it scoped to this page, so the homepage is untouched.
   ========================================================================= */

.erw-page #client-reviews { width: 100%; }

.erw-page #client-reviews .tcv-rev-carousel {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  /* Room for the arrows to sit outside the cards rather than over them. */
  padding: 0 52px;
}

.erw-page #client-reviews .carousel-viewport {
  width: 100% !important;
  max-width: 100% !important;
  height: 320px !important;
  margin: 0;
}

/* Square slides, square rows: the sources are 1000x1000, so a square box
   means object-fit has nothing to letterbox and all three align exactly.
   Lengths, not percentages: a percentage resolves against the track's own
   `width: max-content`, which is circular. !important matches main.css,
   which uses it here and cannot be beaten on specificity alone. */
.erw-page #client-reviews .tcv-revtrack {
  grid-auto-columns: 320px !important;
  grid-template-rows: 320px !important;
  column-gap: 20px !important;
  row-gap: 0 !important;
  left: 0;
  padding: 0;
}

.erw-page #client-reviews .tcv-revslide img {
  object-fit: contain;
  object-position: center;
}

/* The arrow is 44px wide and sits at left/right: 8px, so the padding has to
   clear 52px or it overlaps the first and last card again. 56 gives it air. */
@media (max-width: 1024px) {
  .erw-page #client-reviews .tcv-rev-carousel { padding: 0 56px; }
  .erw-page #client-reviews .carousel-viewport { height: 300px !important; }
  .erw-page #client-reviews .tcv-revtrack {
    grid-auto-columns: 300px !important;
    grid-template-rows: 300px !important;
  }
}

/* Phones: swipe, no arrows. There is no room to put a 44px control beside a
   full-width card, and overlaying it on the card is what made this look
   broken in the first place. The track already carries `overflow-x: auto`
   and `scroll-snap-type: x mandatory` from main.css, so the gesture works
   on its own. The card is cut ~36px short of the column so the next one
   peeks, which is the affordance the arrows were providing. */
@media (max-width: 640px) {
  .erw-page #client-reviews .tcv-rev-carousel { padding: 0; }

  .erw-page #client-reviews .nav-btn { display: none; }

  /* overflow STAYS hidden. Setting it visible to let the next card show
     let the whole max-content track paint and gave the document a 1984px
     scroll width. The peek comes from the card being narrower than the
     viewport instead: 92px short of the column, so ~36px of the next card
     sits inside the same clipped box. */
  .erw-page #client-reviews .carousel-viewport {
    height: calc(100vw - 92px) !important;
  }

  .erw-page #client-reviews .tcv-revtrack {
    grid-auto-columns: calc(100vw - 92px) !important;
    grid-template-rows: calc(100vw - 92px) !important;
    column-gap: 16px !important;
  }
}


/* =========================================================================
   12. HOW IT WORKS, SHOT CANVAS
   resume-review.css gives .rrx__shot > img a white background, which is
   right there because those captures are opaque and cover their box.

   Step 3 here uses finishedTechResume.webp, which is RGBA with a fully
   TRANSPARENT surround: the resume page floats and the frame's white shows
   through behind it, so a white document sat on a white background with no
   edge between them. A neutral canvas behind the image gives the page an
   implied edge without drawing a border on it, which is how Material sets
   a document on a surface.

   Safe to apply to all three steps: the other two images are opaque and
   cover their box, so nothing shows behind them. Scoped to this page so
   /resume-review keeps its own frames unchanged.
   ========================================================================= */

.erw-page #how-it-works .rrx__shot > img {
  background: var(--md-surface-variant);
}

/* The chrome bar sits above the canvas now, so it takes the same step down
   in tone. Left lighter than the canvas, the way a real title bar is. */
.erw-page #how-it-works .rrx__shot::before {
  background:
    radial-gradient(circle 4.5px at 18px 16px, #ff5f57 98%, transparent 100%),
    radial-gradient(circle 4.5px at 37px 16px, #febc2e 98%, transparent 100%),
    radial-gradient(circle 4.5px at 56px 16px, #28c840 98%, transparent 100%),
    #f8f9fa;
  border-bottom-color: var(--md-outline-soft);
}


/* =========================================================================
   13. SECTION HEADS  (.rr-content__head)
   Three faults, all of which read as "amateur" before you can say why.

   1. The h2 broke with a one-word orphan ("engineers" alone on line two).
      text-wrap: balance evens the two lines instead.

   2. The intro ran four ragged centred lines. Centred copy needs a shorter
      measure than left-aligned copy, because both edges move; past about
      three lines it stops reading as a deck and starts looking like a
      paragraph someone forgot to style. Narrower measure, and `pretty` to
      stop the last line coming back as one word.

   Applies to every section head on the page, so Problem, Solution, Roles,
   Compare and How it works all sit on the same rhythm.
   ========================================================================= */

.erw-page .rr-content__head {
  max-width: 820px;
}

.erw-page .rr-content__head h2 {
  /* Kills the one-word orphan by evening the lines. */
  text-wrap: balance;
  margin-bottom: 14px;

  /* Matches "A recruiter screen, but with feedback" in the review
     block above. resume-review.css sets no font-family here, so this
     heading was falling back to main.css's Inter while the review
     heading right above it rendered in DM Sans, and it sat a step
     smaller (2rem against 2.15rem). Scoped to .erw-page so the other
     two pages on resume-review.css keep what they have. */
  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;
}

.erw-page .rr-content__head p {
  max-width: 680px;
  /* pretty, not balance: balance is for headings of a few words. On a
     three-line deck it evens the lines but leaves the rag worse. */
  text-wrap: pretty;
}


/* =========================================================================
   14. CLOSING CTA  (.erw-cta)
   Replaces the old .tcv-free-review-split--box, which was a rounded navy
   card inset inside .rr-main's column and carried the one-step fr-card
   form. Two changes:

     - FULL BLEED. The band now runs edge to edge instead of sitting as a
       rounded box inside a 1180px column. It lives inside <main>, so it
       breaks out with symmetric negative margins rather than being moved
       in the markup: `calc(50% - 50vw)` on each side resolves to exactly
       the distance from the column edge to the viewport edge, whatever the
       column is. No width is set; a block element then fills what the
       margins opened up. Any sub-pixel spill from vw counting the
       scrollbar is caught by `overflow-x: clip` on the body (Part 1).

     - The three-screen drop widget, the same one used by #review-form and
       #review-roles, instead of the single-field upload card. The widget's
       internals (drop zone, inputs, labels) are all styled for a LIGHT
       background in shared/review-block.css, so rather than restyle each
       one for navy it sits on a white card. One override, not fifteen.
   ========================================================================= */

.erw-cta {
  /* main.css styles the bare `section` as a centred column flex container. */
  display: block;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(56px, 6vw, 88px) 0;
  background: linear-gradient(90deg, var(--navy-900) 0%, #1E3A8A 100%);
  color: #ffffff;
}

.erw-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Copy side ---------------------------------------------- */
.erw-cta__copy { min-width: 0; }

.erw-cta__copy .erw-cta__kicker {
  /* Explicit line-height so the offset that lifts the copy column is exact
     arithmetic rather than a guess at what 1.7 resolves to. */
  line-height: 20px;
  margin: 0 0 12px;
  font-family: var(--md-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93c5fd;
}

.erw-cta__copy h2 {
  margin: 0 0 20px;
  font-family: var(--md-font);
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-align: left;
  color: #ffffff;
  text-wrap: balance;
}

.erw-cta__copy p {
  margin: 0 0 14px;
  font-family: var(--md-font);
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
}

.erw-cta__copy strong { color: #ffffff; font-weight: 600; }

.erw-cta__copy .erw-cta__deeplink {
  margin-top: 22px;
  margin-bottom: 0;
  font-size: 14.5px;
}

.erw-cta__deeplink a {
  color: #93c5fd;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.erw-cta__deeplink a:hover { color: #bfdbfe; }

/* --- Widget side --------------------------------------------
   The white card is the whole reason the widget needs no dark-mode
   variant: everything inside it is already designed for light. */
.erw-cta__action { min-width: 0; }

.erw-cta__card {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 24px 48px -20px rgba(8, 15, 40, .5);
}

.erw-cta__card .rv-flow {
  max-width: none;
  width: 100%;
}

.erw-cta__byline {
  display: flex;
  align-items: center;
  /* Centred under the card, not flush left: the card is the thing it
     belongs to, and the two share a centre line rather than an edge. */
  justify-content: center;
  gap: 10px;
  margin: 18px 0 0;
  font-family: var(--md-font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, .8);
}

.erw-cta__byline img {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .28);
}

/* Line the H2 up with the card, not the column.
   Both columns start at the same y, so the copy side led with the kicker and
   the headline sat ~32px lower than the card's top edge. Lifting the copy by
   the kicker's own height plus its gap puts the HEADLINE on the card's top
   edge and leaves the kicker above it, which is what the eye reads as
   aligned. --erw-cta-lift carries the extra half-leading correction so the
   headline's cap-line, not its line box, is what lands on the edge. */
@media (min-width: 901px) {
  .erw-cta__copy {
    margin-top: calc(-1 * (20px + 12px) - var(--erw-cta-lift, 0px));
  }
}

@media (max-width: 900px) {
  .erw-cta__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    max-width: 560px;
  }

  .erw-cta__copy h2 { text-align: center; }
  .erw-cta__copy .erw-cta__kicker { text-align: center; }
  .erw-cta__copy p  { text-align: center; }
}

@media (max-width: 560px) {
  .erw-cta { padding: 48px 0; }
  .erw-cta__inner { padding: 0 20px; }
  .erw-cta__card { padding: 18px; border-radius: 16px; }
}


/* =========================================================================
   15. ONE COLUMN WIDTH
   Every block on the page sat on its own measure. Audited at 1440 against
   the hero, whose content runs 144 -> 1296 (1152 wide):

     .rr-main content 1140 | rubric 1120 | roles 1060 | compare 1060
     how-it-works 1080 | about 960 | reviews 1120 | CTA inner 1120 | FAQ 900

   Nine widths, nine different left edges, none of them the hero's. Nothing
   below the fold lined up with anything above it.

   Fixed by giving the main column the HERO'S OWN tokens rather than a new
   pair: --page-max and --page-pad are declared on body.erw-page in Part 3
   and are what the hero shell and the trust strip already use, so the two
   cannot drift apart later. Everything inside then just fills the column,
   which is why most of what follows is `max-width: none` rather than a
   number to keep in sync.

   Reading measures are deliberately NOT touched: .rr-content__head (820),
   .erw-intro (1020) and the deck (680) are line-length decisions, not
   section widths, and centred copy needs a shorter measure than the shell
   it sits in.
   ========================================================================= */

.erw-page .rr-main {
  max-width: var(--page-max);
  padding-inline: var(--page-pad);
}

.erw-page .erw-fams,
.erw-page .erw-compare,
.erw-page .rrx,
.erw-page .rr-about,
.erw-page #client-reviews .tcv-rev-carousel {
  max-width: none;
}

/* main.css pins this one with `#faq.tcv-faq { max-width: 900px; padding: 0
   1.5rem }`, which is (1,1,0) and outranks a plain class chain. Matched on
   the id to win, and the 24px padding is dropped because .rr-main is
   already supplying the page gutter. */
.erw-page #faq.tcv-faq {
  max-width: none;
  padding-inline: 0;
}

/* The CTA breaks out of the column, so it rebuilds the same shell inside
   itself rather than inheriting one. */
.erw-cta__inner {
  max-width: var(--page-max);
  padding-inline: var(--page-pad);
}

/* Widening the bio block would otherwise stretch its paragraphs to ~110
   characters. The block aligns; the prose keeps a readable measure. */
.erw-page .rr-about__body p {
  max-width: 70ch;
}

/* --- The four that were still inset -------------------------
   Container edges were right after the first pass, but four blocks put
   their own padding or measure INSIDE that container, so the ink the eye
   actually follows still started short of the column. Measured at 1512,
   where the column runs 180 -> 1332:

     .erw-intro      246  (+66)  a 1020px measure centred in 1152
     .pricing-grid   200  (+20)  padding: 0 20px
     review slides   232  (+52)  the carousel's arrow lane

   The two-column intro is the important one: unlike the section heads, its
   text is LEFT aligned, so its edge is visible and has to sit on the
   column. Centred blocks have no edge to align and are left as they are. */
.erw-page .erw-intro {
  max-width: none;
}

.erw-page #packages .pricing-grid {
  padding-inline: 0;
}

/* The cards have to start on the column, so the arrows move OUT of the
   carousel's box and into the page gutter.

   Negative margins do not work here: #client-reviews is a <section>, which
   main.css makes a flex column with `align-items: center`, and a centred
   flex item re-centres on its OUTER size. Pulling 52px off each side just
   made the line 104px narrower and the box landed back on 180. The arrows
   are already absolutely positioned, so they are what moves.

   The arrow sits at -52px, so the gutter has to be at least 52px wide or
   it hangs off the page. Gutter = (100vw - 1200) / 2 + 24, which reaches
   52px at 1256px, so the switch is at 1260 with a little margin. Measured
   at 1240 first: the arrow landed at -8px and pushed the document to
   1248px. Below the breakpoint they stay inside the carousel. */
@media (min-width: 1260px) {
  .erw-page #client-reviews .tcv-rev-carousel {
    padding-inline: 0;
  }

  .erw-page #client-reviews .nav-btn.prev { left: -52px; }
  .erw-page #client-reviews .nav-btn.next { right: -52px; }
}

/* main.css gives every FAQ row `padding: 5px`, which pushed the question
   text 5px off the column. */
.erw-page #faq .tcv-faq__item {
  padding-inline: 0;
}


/* --- Compare: left-aligned head -----------------------------
   The table under it is left-aligned content: the row labels start on the
   column edge. A centred head over it left the eyebrow, the headline and
   the deck all floating on a different axis from the thing they introduce.
   Aligned to the same edge, so the section reads as one block.

   resume-review.css centres this component in three places (the head's
   auto margins, `h2 { text-align: center }` and `p { margin: 0 auto }`),
   so all three have to be undone, not just the container. The deck keeps a
   measure: left-aligned copy can run wider than centred, but not the full
   1152px column. */
.erw-page #compare .rr-content__head {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

.erw-page #compare .rr-content__head h2 {
  text-align: left;
}

.erw-page #compare .rr-content__head p {
  margin-inline: 0;
  max-width: 74ch;
  text-align: left;
}


/* =========================================================================
   16. NAVY REVIEW BANDS  (.rv-section)
   Copied from index.css's "CTA BANDS" block and rescoped. On the homepage
   navy is reserved for one meaning, the free review, and all of its review
   CTAs run this treatment. Same rule here: #review-form and #review-roles
   both take it, and the closing CTA already had it.

   The band goes dark; the form card does NOT. Inputs stay white with dark
   ink, which keeps Chrome's autofill tint a harmless pale-blue-on-white and
   leaves the drop zone's dashed edge readable. Only the copy inverts.

   FULL BLEED: the homepage's .rv-section sits directly on the body, so it
   is viewport-wide for free. Here it sits inside .rr-main's 1200px shell,
   so it breaks out the same way the closing CTA does, and .rv-inner (which
   already carries max-width: --page-max and margin auto) re-centres the
   content on the column with its own --page-pad gutter. That gutter had
   been zeroed in Part 15 because the section used to sit INSIDE the padded
   column; it is restored now that the section is outside it.
   ========================================================================= */

.erw-page .rv-section {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: auto;
  background: linear-gradient(90deg, var(--navy-900) 0%, #1E3A8A 100%);
}

/* ---------- Copy column, inverted ---------- */

.erw-page .rv-section .rv-kicker { color: rgba(255, 255, 255, 0.72); }

.erw-page .rv-section h2 { color: #ffffff; }

.erw-page .rv-section .rv-lede,
.erw-page .rv-section .rv-list li { color: rgba(255, 255, 255, 0.88); }

.erw-page .rv-section .rv-list-intro,
.erw-page .rv-section .rv-lede strong,
.erw-page .rv-section .rv-list li strong { color: #ffffff; }

/* `.rv-list em` is #3c4043, picked to read as ink against the list's grey
   on a white ground. On navy that is 1.0:1, i.e. invisible. Same intent
   inverted: the emphasised word steps up to white while the sentence
   around it sits at 88%. */
.erw-page .rv-section .rv-list em,
.erw-page .rv-section .rv-lede em { color: #ffffff; }

/* The tick is a blue SVG data-URI sized for a white ground. Mint reads at
   this weight on navy where the brand blue goes muddy. */
.erw-page .rv-section .rv-list li::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236EE7A5' 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;
}

.erw-page .rv-section .rv-byline { color: rgba(255, 255, 255, 0.78); }

.erw-page .rv-section .rv-byline img {
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ---------- Form, kept as a light card ---------- */

.erw-page .rv-section .rv-flow {
  background: #ffffff;
  border-radius: 18px;
  padding: clamp(18px, 2vw, 26px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .20), 0 18px 48px rgba(0, 0, 0, .28);
}

/* The card is white, so everything inside keeps the light treatment the
   component ships with. Only the drop zone needs a nudge: its #fff fill is
   invisible against the card, so it takes the page tint instead. */
.erw-page .rv-section .rv-drop { background: #f8f9fa; }

.erw-page .rv-section .rv-drop:hover,
.erw-page .rv-section .rv-drop.is-over { background: #f5f9ff; }


/* =========================================================================
   17. PAGE-LEVEL TRIMS
   ========================================================================= */

/* Let the Part 1 gradient through. Audited in the browser against the
   rendered page: these are the only two blocks that painted an opaque
   white over the body ground. #landing gets its white in Part 3 (copied
   from the homepage hero, which clears it the same way further down its
   own sheet); .rv-section gets its white from shared/review-block.css,
   which is written for pages with a plain background.

   Everything else was already transparent: the trust strip, the client
   logo band, the .rr-content sections and the FAQ. The navy closing CTA
   (.tcv-free-review-split--box) keeps its own fill deliberately, and the
   white cards inside the review block are meant to sit ON the gradient. */
.erw-page #landing {
  background: transparent;
}

/* Body links in the bio and the closing disclaimer take the brand blue;
   main.css paints bare links in the muted grey used for nav items. */
.erw-page .rr-about__body a,
.erw-page .rr-disclaimer a {
  color: var(--rr-primary);
  font-weight: 600;
}

.erw-page .rr-disclaimer a { text-decoration: underline; }

.erw-page .rr-about__body a:hover,
.erw-page .rr-disclaimer a:hover { color: var(--rr-primary-deep); }