/* Repmation website design system.
   Source of truth: the approved homepage experience from the shared header through
   the mobile "Swipe to see all 4" assurance strip. This module intentionally does
   not target .hero; the approved hero remains owned by its existing modules.

   Use these tokens and patterns to bring downstream homepage sections into the
   same visual language without changing their product behavior. */

body.brand-v5{
  --rm-web-ink:#171513;
  --rm-web-paper:#F7F4F1;
  --rm-web-surface:#FFFFFF;
  --rm-web-surface-soft:#FBF8F5;
  --rm-web-blaze:#F54703;
  --rm-web-forge:#D93B02;
  --rm-web-muted:#625C57;
  --rm-web-quiet:#8A827B;
  --rm-web-line:#D8D2CC;
  --rm-web-line-soft:#ECE6E0;
  --rm-web-radius-sm:10px;
  --rm-web-radius-md:14px;
  --rm-web-radius-card:20px;
  --rm-web-shadow-soft:0 13px 38px rgba(23,21,19,.07);
  --rm-web-shadow-card:0 34px 85px rgba(23,21,19,.15);
}

/* Follow one completed job — same website, same visual system.
   The six-stage scrollytelling mechanics remain owned by follow-job.css/js.
   Match the vertical-layout selector specificity used by the legacy authoring
   source so this final design-system layer wins by source order, not accident. */
body.rm-page-home .ftj[data-ftj-layout="vertical"]{
  background:var(--rm-web-paper)!important;
  color:var(--rm-web-ink);
}

/* Journey canvas: continue the hero's neutral Paper blend so the two sections
   read as one surface. Blaze stays in tiny signal accents, not background glow. */
body.rm-page-home .ftj[data-ftj-layout="vertical"]::before{
  opacity:1;
  background:
    radial-gradient(circle at 92% 15%,rgba(245,71,3,.16) 0 2px,transparent 3px),
    radial-gradient(circle at 92% 15%,transparent 0 17px,rgba(245,71,3,.065) 18px 19px,transparent 20px),
    radial-gradient(circle at 7% 44%,rgba(23,21,19,.11) 0 2px,transparent 3px),
    radial-gradient(circle at 7% 44%,transparent 0 12px,rgba(23,21,19,.045) 13px 14px,transparent 15px),
    radial-gradient(circle at 94% 69%,rgba(245,71,3,.12) 0 2px,transparent 3px),
    radial-gradient(circle at 11% 87%,rgba(23,21,19,.08) 0 2px,transparent 3px),
    radial-gradient(ellipse at 82% 7%,rgba(255,255,255,.52),transparent 32%),
    radial-gradient(ellipse at 12% 34%,rgba(23,21,19,.028),transparent 30%),
    radial-gradient(ellipse at 88% 67%,rgba(255,255,255,.32),transparent 28%),
    linear-gradient(180deg,#FAF7F4 0,#F9F6F3 180px,#F8F5F2 420px,#F7F4F1 760px,#F7F4F1 100%);
  background-size:auto;
}

/* Oversized, cropped canonical Repmation marks replace the former route curve.
   They read as quiet brand atmosphere rather than a second progress indicator. */
body.rm-page-home .ftj[data-ftj-layout="vertical"]::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  width:auto;
  height:auto;
  pointer-events:none;
  opacity:.038;
  background-image:
    url("/assets/repmation-mark-dark.svg"),
    url("/assets/repmation-mark-orange.svg");
  background-position:
    calc(100% + 165px) 11%,
    calc(0% - 155px) 79%;
  background-size:
    clamp(430px,42vw,700px) auto,
    clamp(370px,36vw,620px) auto;
  background-repeat:no-repeat;
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-intro{
  padding-top:clamp(72px,7vw,112px);
  padding-bottom:clamp(54px,5vw,80px);
}

/* Shared section-heading pattern: the approved journey is the reference. */
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-kicker,
body.rm-page-home .lower-funnel-section .eyebrow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  margin:0 0 20px;
  color:var(--rm-muted,#6E655F)!important;
  font:700 13px/1.1 "Barlow Condensed","Arial Narrow",sans-serif!important;
  letter-spacing:.13em!important;
  text-transform:uppercase;
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-kicker span{
  gap:12px;
  color:var(--rm-muted,#6E655F);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-kicker span::before,
body.rm-page-home .lower-funnel-section .eyebrow::before{
  content:"";
  display:block;
  flex-shrink:0;
  width:32px;
  height:2px;
  background:var(--rm-web-blaze);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-kicker b{
  color:var(--rm-web-quiet);
  font-weight:500;
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-intro-grid{
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.72fr);
  align-items:end;
  gap:clamp(40px,5vw,78px);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-intro h2,
body.rm-page-home .lower-funnel-section h2{
  max-width:800px;
  margin:0;
  color:var(--rm-web-ink)!important;
  font-family:Archivo,Helvetica,Arial,sans-serif!important;
  font-size:clamp(48px,5vw,72px)!important;
  font-weight:800;
  line-height:.98!important;
  letter-spacing:-.055em!important;
  text-wrap:balance;
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-intro p{
  max-width:540px;
  color:var(--rm-web-muted);
  font-size:16px;
  line-height:1.66;
}

/* The timeline uses the same fine dividers and compact orange UI tiles seen in
   the approved hero assurance strip. */
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-stage-grid::before{
  width:1px;
  background:var(--rm-web-line);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-stage-grid::after{
  width:2px;
  background:linear-gradient(180deg,#FF8A55,var(--rm-web-blaze) 52%,var(--rm-web-forge));
  box-shadow:0 0 12px rgba(245,71,3,.22);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-scene + .ftj-scene{
  border-top-color:rgba(23,21,19,.075);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-scene::after{
  background:var(--rm-web-line);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-scene::before{
  width:38px;
  height:38px;
  border:1px solid rgba(245,71,3,.14);
  border-radius:11px;
  background:var(--rm-web-surface);
  color:#756D67;
  box-shadow:0 8px 22px rgba(23,21,19,.09);
  font:700 9px/1 "IBM Plex Mono",ui-monospace,monospace;
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-scene.is-past::before{
  border-color:rgba(245,71,3,.18);
  background:#FFF2EC;
  color:var(--rm-web-forge);
  box-shadow:0 8px 22px rgba(23,21,19,.08);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-scene.is-active::before{
  border-color:var(--rm-web-blaze);
  background:var(--rm-web-blaze);
  color:#FFF;
  box-shadow:0 8px 22px rgba(23,21,19,.08),0 0 0 5px rgba(245,71,3,.1);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-step{
  margin-bottom:18px;
  color:#6F6963!important;
  font-family:"Barlow Condensed","Arial Narrow",sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.09em;
  text-transform:uppercase;
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-step b{
  font-weight:700;
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-copy h3{
  max-width:560px;
  color:var(--rm-web-ink)!important;
  font-family:Archivo,Helvetica,Arial,sans-serif;
  font-size:clamp(42px,3.9vw,62px)!important;
  font-weight:800;
  line-height:.98!important;
  letter-spacing:-.05em!important;
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-copy>p{
  max-width:500px;
  color:var(--rm-web-muted)!important;
  font-size:15px;
  line-height:1.68;
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-copy>small{
  border-top-color:var(--rm-web-line-soft)!important;
  color:#817A74!important;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}

/* Product visuals use the same white / soft-paper card system as the approved
   dashboard preview. Dark UI is allowed only when it represents the product
   itself (for example the camera view), not as a section theme. */
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-visual{
  border:1px solid var(--rm-web-line-soft);
  border-radius:var(--rm-web-radius-card);
  background:
    radial-gradient(circle at 78% 14%,rgba(245,71,3,.055),transparent 28%),
    var(--rm-web-surface-soft);
  box-shadow:var(--rm-web-shadow-card);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-job-visual{
  padding:0!important;
  overflow:visible;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-job-image{
  border:1px solid var(--rm-web-line-soft);
  border-radius:var(--rm-web-radius-card);
  box-shadow:var(--rm-web-shadow-card);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-field-card,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-job-chip,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-signal-caption{
  border-color:var(--rm-web-line-soft);
  background:rgba(255,255,255,.96);
  color:var(--rm-web-ink);
  box-shadow:var(--rm-web-shadow-soft);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-browser-shell,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-demo-stage,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-owner-window{
  border:1px solid var(--rm-web-line-soft)!important;
  border-radius:var(--rm-web-radius-card);
  background:var(--rm-web-surface)!important;
  color:var(--rm-web-ink);
  box-shadow:0 14px 34px rgba(23,21,19,.08);
}
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-browser-bar,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-owner-topbar{
  border-bottom-color:var(--rm-web-line-soft);
  background:var(--rm-web-surface-soft);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-review-page,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-demo-empty,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-branch-panel,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-owner-metrics>div,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-owner-feed{
  border-color:var(--rm-web-line-soft);
  background:var(--rm-web-surface-soft);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-demo-header{
  border-bottom-color:var(--rm-web-line-soft);
  color:#6B655F;
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-demo-header b,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-demo-status{
  color:var(--rm-web-forge);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-demo-reset{
  color:#6B655F;
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-choice-grid button,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-demo-choice{
  border-color:var(--rm-web-line);
  border-radius:var(--rm-web-radius-sm);
  background:var(--rm-web-surface);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-choice-grid button:hover,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-choice-grid button:focus-visible,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-demo-choice:hover,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-demo-choice:focus-visible,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-demo-choice[aria-pressed="true"]{
  border-color:rgba(245,71,3,.62);
  background:#FFF8F3;
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-demo-submit{
  border-color:var(--rm-web-blaze);
  border-radius:var(--rm-web-radius-sm);
  background:var(--rm-web-blaze);
  color:#FFF;
  font-family:Archivo,Helvetica,Arial,sans-serif;
  font-weight:800;
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-demo-submit:hover,
body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-demo-submit:focus-visible{
  background:var(--rm-web-forge);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-resolution{
  border-color:#F0D5C8;
  border-radius:var(--rm-web-radius-sm);
  background:var(--rm-web-surface);
  color:var(--rm-web-ink);
  box-shadow:0 18px 45px rgba(23,21,19,.12);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-resolution small{
  color:var(--rm-web-forge);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-fair{
  margin-top:20px;
  padding:24px;
  border:1px solid var(--rm-web-line-soft);
  border-radius:var(--rm-web-radius-md);
  background:rgba(255,255,255,.72);
  color:var(--rm-web-ink);
  box-shadow:var(--rm-web-shadow-soft);
}

body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-fair span{
  color:var(--rm-web-muted);
}

@media(max-width:920px){
  body.rm-page-home .ftj[data-ftj-layout="vertical"]{
    padding-bottom:56px;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"]::after{
    opacity:.03;
    background-position:
      calc(100% + 185px) 9%,
      calc(0% - 175px) 80%;
    background-size:
      530px auto,
      470px auto;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-intro{
    padding-top:60px;
    padding-bottom:38px;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-kicker,
body.rm-page-home .lower-funnel-section .eyebrow{
    margin-bottom:18px;
    font-size:12px!important;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-intro-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-intro h2,
body.rm-page-home .lower-funnel-section h2{
    max-width:680px;
    font-size:clamp(40px,10.8vw,52px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-intro p{
    max-width:650px;
    font-size:15px;
    line-height:1.62;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-scene,
  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-scene.is-active,
  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-scene.is-past,
  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-scene.is-upcoming{
    padding-top:56px;
    padding-bottom:60px;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-copy h3{
    font-size:clamp(36px,9.5vw,46px)!important;
    line-height:1!important;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-copy>p{
    font-size:15px;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-visual{
    margin-top:24px;
    padding:14px;
    border-radius:18px;
    box-shadow:0 22px 58px rgba(23,21,19,.11);
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-job-visual{
    margin-top:24px;
    padding:0!important;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-fair{
    padding:18px;
  }
}

@media(max-width:640px){
  body.rm-page-home .ftj[data-ftj-layout="vertical"]::after{
    opacity:.025;
    background-position:
      calc(100% + 215px) 8%,
      calc(0% - 205px) 78%;
    background-size:
      455px auto,
      410px auto;
  }

  /* Keep the locked assurance-to-journey transition on the 42px mobile rhythm:
     18px outside the section + 24px of visible inset inside the journey canvas. */
  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-intro{
    padding-top:24px;
    padding-bottom:32px;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-kicker,
body.rm-page-home .lower-funnel-section .eyebrow{
    font-size:12px!important;
    letter-spacing:.11em!important;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-intro h2,
body.rm-page-home .lower-funnel-section h2{
    font-size:clamp(38px,10.2vw,44px)!important;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-scene::before{
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:8px;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-visual{
    padding:12px;
    border-radius:16px;
  }

  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-browser-shell,
  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-demo-stage,
  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-owner-window,
  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-job-image{
    border-radius:16px;
  }
}

@media(prefers-reduced-motion:reduce){
  body.rm-page-home .ftj[data-ftj-layout="vertical"] .ftj-scene::before{
    transition:none!important;
  }
}